From 3cce651bba87f3664d89be7f244cd25e1a338193 Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Tue, 19 Nov 2019 16:29:22 +0000 Subject: [PATCH 01/25] Add a site logo block This uses some filters to non-destructively override the theme mod value when the experiment is enabled and the site logo setting has a value. --- lib/blocks.php | 1 + packages/block-library/src/editor.scss | 1 + packages/block-library/src/index.js | 2 + .../block-library/src/site-logo/block.json | 15 + packages/block-library/src/site-logo/edit.js | 274 ++++++++++++++++++ .../block-library/src/site-logo/editor.scss | 18 ++ packages/block-library/src/site-logo/icon.js | 15 + packages/block-library/src/site-logo/index.js | 27 ++ .../block-library/src/site-logo/index.php | 91 ++++++ .../block-library/src/site-logo/style.scss | 5 + packages/block-library/src/style.scss | 1 + 11 files changed, 450 insertions(+) create mode 100644 packages/block-library/src/site-logo/block.json create mode 100644 packages/block-library/src/site-logo/edit.js create mode 100644 packages/block-library/src/site-logo/editor.scss create mode 100644 packages/block-library/src/site-logo/icon.js create mode 100644 packages/block-library/src/site-logo/index.js create mode 100644 packages/block-library/src/site-logo/index.php create mode 100644 packages/block-library/src/site-logo/style.scss diff --git a/lib/blocks.php b/lib/blocks.php index 80522bda953672..aa37d373bba5ac 100644 --- a/lib/blocks.php +++ b/lib/blocks.php @@ -85,6 +85,7 @@ function gutenberg_reregister_core_block_types() { 'query.php' => 'core/query', 'query-loop.php' => 'core/query-loop', 'query-pagination.php' => 'core/query-pagination', + 'site-logo.php' => 'core/site-logo', 'site-title.php' => 'core/site-title', 'template-part.php' => 'core/template-part', ) diff --git a/packages/block-library/src/editor.scss b/packages/block-library/src/editor.scss index 8f232cb0a35e6f..491295a4af55a8 100644 --- a/packages/block-library/src/editor.scss +++ b/packages/block-library/src/editor.scss @@ -37,6 +37,7 @@ @import "./search/editor.scss"; @import "./separator/editor.scss"; @import "./shortcode/editor.scss"; +@import "./site-logo/editor.scss"; @import "./social-link/editor.scss"; @import "./social-links/editor.scss"; @import "./spacer/editor.scss"; diff --git a/packages/block-library/src/index.js b/packages/block-library/src/index.js index cf54d74dab5120..e4e553926eb14e 100644 --- a/packages/block-library/src/index.js +++ b/packages/block-library/src/index.js @@ -64,6 +64,7 @@ import * as socialLink from './social-link'; import * as widgetArea from './widget-area'; // Full Site Editing Blocks +import * as siteLogo from './site-logo'; import * as siteTitle from './site-title'; import * as templatePart from './template-part'; import * as query from './query'; @@ -198,6 +199,7 @@ export const __experimentalRegisterExperimentalCoreBlocks = ...( __experimentalEnableFullSiteEditing ? [ siteTitle, + siteLogo, templatePart, query, queryLoop, diff --git a/packages/block-library/src/site-logo/block.json b/packages/block-library/src/site-logo/block.json new file mode 100644 index 00000000000000..31a0ff259fc442 --- /dev/null +++ b/packages/block-library/src/site-logo/block.json @@ -0,0 +1,15 @@ +{ + "name": "core/site-logo", + "category": "layout", + "attributes": { + "align": { + "type": "string" + }, + "width": { + "type": "number" + } + }, + "supports": { + "html": false + } +} diff --git a/packages/block-library/src/site-logo/edit.js b/packages/block-library/src/site-logo/edit.js new file mode 100644 index 00000000000000..502f06b4d2b288 --- /dev/null +++ b/packages/block-library/src/site-logo/edit.js @@ -0,0 +1,274 @@ +/** + * External dependencies + */ +import classnames from 'classnames'; +import { debounce } from 'lodash'; + +/** + * WordPress dependencies + */ +import { useState, useEffect } from '@wordpress/element'; +import { __ } from '@wordpress/i18n'; +import { + useEntityProp, + __experimentalUseEntitySaving, +} from '@wordpress/core-data'; +import { + IconButton, + PanelBody, + RangeControl, + Toolbar, + ResizableBox, +} from '@wordpress/components'; +import { + BlockControls, + BlockAlignmentToolbar, + BlockIcon, + InspectorControls, + MediaPlaceholder, +} from '@wordpress/block-editor'; +import { useSelect, useDispatch } from '@wordpress/data'; + +/** + * Internal dependencies + */ +import icon from './icon'; + +import ImageSize from '../image/image-size'; + +const getHandleStates = ( align, isRTL = false ) => { + const defaultAlign = isRTL ? 'right' : 'left'; + const handleStates = { + left: { + right: true, + left: false, + }, + center: { + right: true, + left: true, + }, + right: { + right: false, + left: true, + }, + }; + + return handleStates[ align ? align : defaultAlign ]; +}; + +export default function LogoEdit( { attributes: { align, width }, children, className, clientId, setAttributes, isSelected } ) { + const [ isEditing, setIsEditing ] = useState( false ); + const [ logo, setLogo ] = useEntityProp( 'root', 'site', 'sitelogo' ); + const [ isDirty, , save ] = __experimentalUseEntitySaving( + 'root', + 'site', + 'sitelogo' + ); + + const { createNotice } = useDispatch( 'core/notices' ); + const onError = ( message ) => createNotice( + 'error', + message[ 2 ] ? message[ 2 ] : __( 'Sorry an error occourred.' ), + { + isDismissible: true, + type: 'snackbar', + }, + ); + + const mediaItemData = useSelect( + ( select ) => { + const mediaItem = select( 'core' ).getEntityRecord( 'root', 'media', logo ); + return mediaItem && { + url: mediaItem.source_url, + alt: mediaItem.alt_text, + }; + }, [ logo ] ); + + const { isRTL, isLargeViewport } = useSelect( + ( select ) => ( { + isRTL: select( 'core/block-editor' ).getSettings().isRTL, + isLargeViewport: select( 'core/viewport' ).isViewportMatch( 'medium' ), + } ) + ); + + let url = null; + let alt = null; + if ( mediaItemData ) { + alt = mediaItemData.alt; + url = mediaItemData.url; + } + + if ( isDirty ) { + save(); + } + + const toggleIsEditing = () => setIsEditing( ! isEditing ); + + const setIsNotEditing = () => setIsEditing( false ); + + const onSelectLogo = ( media ) => { + if ( ! media || ! media.id ) { + return; + } + + setLogo( media.id.toString() ); + setIsNotEditing(); + }; + + const deleteLogo = () => { + setLogo( '' ); + }; + + const controls = ( + + setAttributes( { align: newAlign } ) } + controls={ [ 'left', 'center', 'right' ] } + /> + { !! url && ( + + + + ) } + + ); + + const getInspectorControls = ( imageWidth, resizedImageWidth, containerWidth, canResize ) => { + return ( + + + setAttributes( { width: newWidth } ) } + min={ 10 } + max={ Math.min( imageWidth, containerWidth ) } + initialPosition={ Math.min( imageWidth, containerWidth ) } + value={ resizedImageWidth || '' } + disabled={ ! canResize } + /> + + + ); + }; + + const [ maxWidth, setMaxWidth ] = useState( 10 ); + + useEffect( () => { + const wrapperElement = document.getElementById( `block-${ clientId }` ); + const calculateMaxWidth = debounce( () => setMaxWidth( wrapperElement && wrapperElement.clientWidth ), 250 ); + calculateMaxWidth(); + window.addEventListener( 'resize', calculateMaxWidth ); + return () => window.removeEventListener( 'resize', calculateMaxWidth ); + } ); + + const img = ( + + { + + ); + + const label = __( 'Site Logo' ); + const logoImage = ( + + { ( sizes ) => { + const { + imageWidthWithinContainer, + imageWidth, + imageHeight, + } = sizes; + + const currentWidth = width || imageWidthWithinContainer; + const ratio = imageWidth / imageHeight; + const currentHeight = currentWidth / ratio; + + const maxWidthProp = {}; + if ( maxWidth ) { + maxWidthProp.maxWidth = Math.min( imageWidth, maxWidth ); + } + + const canResize = ! isEditing && isLargeViewport && ( ! width || width <= maxWidth ); + + const wrapperProps = {}; + if ( align ) { + wrapperProps.className = `align${ align }`; + } + + if ( ! canResize ) { + wrapperProps.style = { width: Math.min( currentWidth, maxWidth ) }; + } + + const boxSize = { + width: Math.min( currentWidth, maxWidth ), + height: ( maxWidth && currentWidth <= maxWidth ) ? currentHeight : maxWidth / ratio, + }; + + return ( + <> + { getInspectorControls( imageWidth, width, maxWidth, canResize ) } +
+ { canResize ? ( + { + setAttributes( { + width: parseInt( currentWidth + delta.width, 10 ), + } ); + } } + style={ { display: 'inline-block' } } + > + { img } + + ) : img } +
+ + ); + } } + + ); + const editComponent = ( + } + labels={ { + title: label, + instructions: __( 'Upload an image, or pick one from your media library, to be your site logo' ), + } } + onSelect={ onSelectLogo } + accept="image/*" + allowedTypes={ [ 'image' ] } + mediaPreview={ !! url && img } + onCancel={ !! url && setIsNotEditing } + onError={ onError } + > + { !! url && ( + + { __( 'Delete Site Logo' ) } + + ) } + { children } + + ); + + return ( +
+ { controls } + { ! url || isEditing ? editComponent : logoImage } +
+ ); +} diff --git a/packages/block-library/src/site-logo/editor.scss b/packages/block-library/src/site-logo/editor.scss new file mode 100644 index 00000000000000..290fe93c6f29c5 --- /dev/null +++ b/packages/block-library/src/site-logo/editor.scss @@ -0,0 +1,18 @@ +.wp-block-site-logo { + .custom-logo-link { + cursor: inherit; + + &:focus { + box-shadow: none; + } + } + + .editor-media-placeholder__button { + margin-bottom: 0; + } + + .block-editor-media-placeholder__cancel-button { + flex-basis: 100%; + text-align: center; + } +} diff --git a/packages/block-library/src/site-logo/icon.js b/packages/block-library/src/site-logo/icon.js new file mode 100644 index 00000000000000..c6c36f64020c0d --- /dev/null +++ b/packages/block-library/src/site-logo/icon.js @@ -0,0 +1,15 @@ +/** + * WordPress dependencies + */ +import { SVG, Path, Circle, G } from '@wordpress/components'; + +export default ( + + + + + + + + +); diff --git a/packages/block-library/src/site-logo/index.js b/packages/block-library/src/site-logo/index.js new file mode 100644 index 00000000000000..f25a6d2178be5f --- /dev/null +++ b/packages/block-library/src/site-logo/index.js @@ -0,0 +1,27 @@ +/** + * WordPress dependencies + */ +import { __ } from '@wordpress/i18n'; + +/** + * Internal dependencies + */ +import metadata from './block.json'; +import icon from './icon'; +import edit from './edit'; + +const { name } = metadata; +export { metadata, name }; + +export const settings = { + title: __( 'Site Logo' ), + description: __( 'Show a site logo' ), + icon, + getEditWrapperProps( attributes ) { + const { align, width } = attributes; + if ( 'left' === align || 'center' === align || 'right' === align ) { + return { 'data-align': align, 'data-resized': !! width }; + } + }, + edit, +}; diff --git a/packages/block-library/src/site-logo/index.php b/packages/block-library/src/site-logo/index.php new file mode 100644 index 00000000000000..5a97efc492388c --- /dev/null +++ b/packages/block-library/src/site-logo/index.php @@ -0,0 +1,91 @@ +%s', $custom_logo ); + } else { + $html = str_replace( + 'class="custom-logo-link"', + 'class="wp-block-custom-logo custom-logo-link"', + $custom_logo + ); + } + remove_filter( 'wp_get_attachment_image_src', $adjust_width_height_filter ); + + return $html; +} + +/** + * Registers the `core/site-logo` block on the server. + */ +function register_block_core_site_logo() { + if ( gutenberg_is_experiment_enabled( 'gutenberg-full-site-editing' ) ) { + register_block_type( + 'core/site-logo', + array( + 'render_callback' => 'render_block_core_site_logo', + ) + ); + add_filter( 'pre_set_theme_mod_custom_logo', 'sync_site_logo_to_theme_mod' ); + add_filter( 'theme_mod_custom_logo', 'override_custom_logo_theme_mod' ); + } +} +add_action( 'init', 'register_block_core_site_logo' ); + +function override_custom_logo_theme_mod( $custom_logo ) { + $sitelogo = get_option( 'sitelogo' ); + return false === $sitelogo ? $custom_logo : $sitelogo; +} + +function sync_site_logo_to_theme_mod( $custom_logo ) { + if ( $custom_logo ) { + update_option( 'sitelogo', $custom_logo ); + } + return $custom_logo; +} + +function register_block_core_site_logo_setting() { + register_setting( + 'general', + 'sitelogo', + array( + 'show_in_rest' => array( + 'name' => 'sitelogo', + ), + 'type' => 'string', + 'description' => __( 'Site logo.' ), + ) + ); +} + +add_action( 'rest_api_init', 'register_block_core_site_logo_setting', 10 ); diff --git a/packages/block-library/src/site-logo/style.scss b/packages/block-library/src/site-logo/style.scss new file mode 100644 index 00000000000000..6e186d32296df0 --- /dev/null +++ b/packages/block-library/src/site-logo/style.scss @@ -0,0 +1,5 @@ +.wp-block-custom-logo { + .aligncenter { + display: table; + } +} diff --git a/packages/block-library/src/style.scss b/packages/block-library/src/style.scss index 2ef1a87bba4179..31abfed6e3eb77 100644 --- a/packages/block-library/src/style.scss +++ b/packages/block-library/src/style.scss @@ -26,6 +26,7 @@ @import "./rss/style.scss"; @import "./search/style.scss"; @import "./separator/style.scss"; +@import "./site-logo/style.scss"; @import "./social-links/style.scss"; @import "./spacer/style.scss"; @import "./subhead/style.scss"; From 088bb64c473724d2cf042c17de888ab61e6cf5b3 Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Tue, 10 Dec 2019 13:45:13 +0000 Subject: [PATCH 02/25] show a preview while the image uploads --- packages/block-library/src/site-logo/edit.js | 22 +++++++++++++++---- .../block-library/src/site-logo/editor.scss | 4 ++++ 2 files changed, 22 insertions(+), 4 deletions(-) diff --git a/packages/block-library/src/site-logo/edit.js b/packages/block-library/src/site-logo/edit.js index 502f06b4d2b288..bad53e123d11b1 100644 --- a/packages/block-library/src/site-logo/edit.js +++ b/packages/block-library/src/site-logo/edit.js @@ -7,6 +7,7 @@ import { debounce } from 'lodash'; /** * WordPress dependencies */ +import { isBlobURL } from '@wordpress/blob'; import { useState, useEffect } from '@wordpress/element'; import { __ } from '@wordpress/i18n'; import { @@ -58,6 +59,7 @@ const getHandleStates = ( align, isRTL = false ) => { export default function LogoEdit( { attributes: { align, width }, children, className, clientId, setAttributes, isSelected } ) { const [ isEditing, setIsEditing ] = useState( false ); + const [ url, setUrl ] = useState( null ); const [ logo, setLogo ] = useEntityProp( 'root', 'site', 'sitelogo' ); const [ isDirty, , save ] = __experimentalUseEntitySaving( 'root', @@ -91,11 +93,12 @@ export default function LogoEdit( { attributes: { align, width }, children, clas } ) ); - let url = null; let alt = null; if ( mediaItemData ) { alt = mediaItemData.alt; - url = mediaItemData.url; + if ( url !== mediaItemData.url ) { + setUrl( mediaItemData.url ); + } } if ( isDirty ) { @@ -107,7 +110,14 @@ export default function LogoEdit( { attributes: { align, width }, children, clas const setIsNotEditing = () => setIsEditing( false ); const onSelectLogo = ( media ) => { - if ( ! media || ! media.id ) { + if ( ! media ) { + return; + } + + if ( ! media.id && media.url ) { // This is a temporary blob image + setLogo( '' ); + setUrl( media.url ); + setIsNotEditing(); return; } @@ -168,8 +178,12 @@ export default function LogoEdit( { attributes: { align, width }, children, clas return () => window.removeEventListener( 'resize', calculateMaxWidth ); } ); + const classes = classnames( 'custom-logo-link', { + 'is-transient': isBlobURL( url ), + } ); + const img = ( - + { ); diff --git a/packages/block-library/src/site-logo/editor.scss b/packages/block-library/src/site-logo/editor.scss index 290fe93c6f29c5..c1ccb934893e9f 100644 --- a/packages/block-library/src/site-logo/editor.scss +++ b/packages/block-library/src/site-logo/editor.scss @@ -5,6 +5,10 @@ &:focus { box-shadow: none; } + + &.is-transient img { + opacity: 0.3; + } } .editor-media-placeholder__button { From 161092fd782b4fcc9f82bd15645f87cd1fb3f1ec Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Tue, 10 Dec 2019 13:48:50 +0000 Subject: [PATCH 03/25] change the block icon --- packages/block-library/src/site-logo/edit.js | 2 +- packages/block-library/src/site-logo/icon.js | 12 ++++-------- 2 files changed, 5 insertions(+), 9 deletions(-) diff --git a/packages/block-library/src/site-logo/edit.js b/packages/block-library/src/site-logo/edit.js index bad53e123d11b1..d087a5a2b1df6b 100644 --- a/packages/block-library/src/site-logo/edit.js +++ b/packages/block-library/src/site-logo/edit.js @@ -258,7 +258,7 @@ export default function LogoEdit( { attributes: { align, width }, children, clas ); const editComponent = ( } + icon={ } labels={ { title: label, instructions: __( 'Upload an image, or pick one from your media library, to be your site logo' ), diff --git a/packages/block-library/src/site-logo/icon.js b/packages/block-library/src/site-logo/icon.js index c6c36f64020c0d..7bdd2ea99f5b34 100644 --- a/packages/block-library/src/site-logo/icon.js +++ b/packages/block-library/src/site-logo/icon.js @@ -1,15 +1,11 @@ /** * WordPress dependencies */ -import { SVG, Path, Circle, G } from '@wordpress/components'; +import { SVG, Path } from '@wordpress/components'; export default ( - - - - - - - + + + ); From 8a24f7f719120ffcb179fda406956704d10088d9 Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Tue, 10 Dec 2019 15:29:05 +0000 Subject: [PATCH 04/25] show an inline error message in the site logo block --- packages/block-library/src/site-logo/edit.js | 19 +++++++------------ 1 file changed, 7 insertions(+), 12 deletions(-) diff --git a/packages/block-library/src/site-logo/edit.js b/packages/block-library/src/site-logo/edit.js index d087a5a2b1df6b..ab2db763d3cf0f 100644 --- a/packages/block-library/src/site-logo/edit.js +++ b/packages/block-library/src/site-logo/edit.js @@ -16,6 +16,7 @@ import { } from '@wordpress/core-data'; import { IconButton, + Notice, PanelBody, RangeControl, Toolbar, @@ -28,7 +29,7 @@ import { InspectorControls, MediaPlaceholder, } from '@wordpress/block-editor'; -import { useSelect, useDispatch } from '@wordpress/data'; +import { useSelect } from '@wordpress/data'; /** * Internal dependencies @@ -60,6 +61,7 @@ const getHandleStates = ( align, isRTL = false ) => { export default function LogoEdit( { attributes: { align, width }, children, className, clientId, setAttributes, isSelected } ) { const [ isEditing, setIsEditing ] = useState( false ); const [ url, setUrl ] = useState( null ); + const [ error, setError ] = useState(); const [ logo, setLogo ] = useEntityProp( 'root', 'site', 'sitelogo' ); const [ isDirty, , save ] = __experimentalUseEntitySaving( 'root', @@ -67,16 +69,6 @@ export default function LogoEdit( { attributes: { align, width }, children, clas 'sitelogo' ); - const { createNotice } = useDispatch( 'core/notices' ); - const onError = ( message ) => createNotice( - 'error', - message[ 2 ] ? message[ 2 ] : __( 'Sorry an error occourred.' ), - { - isDismissible: true, - type: 'snackbar', - }, - ); - const mediaItemData = useSelect( ( select ) => { const mediaItem = select( 'core' ).getEntityRecord( 'root', 'media', logo ); @@ -267,8 +259,11 @@ export default function LogoEdit( { attributes: { align, width }, children, clas accept="image/*" allowedTypes={ [ 'image' ] } mediaPreview={ !! url && img } + notices={ error && ( + { error } + ) } onCancel={ !! url && setIsNotEditing } - onError={ onError } + onError={ ( message ) => setError( message[ 2 ] ? message[ 2 ] : null ) } > { !! url && ( From 620a0d355384f40467e6bea27f5fcadccb786083 Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Tue, 10 Dec 2019 15:47:28 +0000 Subject: [PATCH 05/25] hide the error when a file is successful --- packages/block-library/src/site-logo/edit.js | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/block-library/src/site-logo/edit.js b/packages/block-library/src/site-logo/edit.js index ab2db763d3cf0f..6f5073e7ed0bcc 100644 --- a/packages/block-library/src/site-logo/edit.js +++ b/packages/block-library/src/site-logo/edit.js @@ -108,6 +108,7 @@ export default function LogoEdit( { attributes: { align, width }, children, clas if ( ! media.id && media.url ) { // This is a temporary blob image setLogo( '' ); + setError(); setUrl( media.url ); setIsNotEditing(); return; From 2c815e4fe047f6737f703fa37b1b161a97e468ca Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Tue, 10 Dec 2019 18:00:47 +0000 Subject: [PATCH 06/25] use mediaflow to replace the image in the logo block --- packages/block-library/src/site-logo/edit.js | 43 ++++++++++---------- 1 file changed, 21 insertions(+), 22 deletions(-) diff --git a/packages/block-library/src/site-logo/edit.js b/packages/block-library/src/site-logo/edit.js index 6f5073e7ed0bcc..cf302ba5a0bee7 100644 --- a/packages/block-library/src/site-logo/edit.js +++ b/packages/block-library/src/site-logo/edit.js @@ -19,7 +19,6 @@ import { Notice, PanelBody, RangeControl, - Toolbar, ResizableBox, } from '@wordpress/components'; import { @@ -28,6 +27,7 @@ import { BlockIcon, InspectorControls, MediaPlaceholder, + MediaReplaceFlow, } from '@wordpress/block-editor'; import { useSelect } from '@wordpress/data'; @@ -38,6 +38,8 @@ import icon from './icon'; import ImageSize from '../image/image-size'; +const ALLOWED_MEDIA_TYPES = [ 'image' ]; +const ACCEPT_MEDIA_STRING = 'image/*'; const getHandleStates = ( align, isRTL = false ) => { const defaultAlign = isRTL ? 'right' : 'left'; const handleStates = { @@ -97,10 +99,6 @@ export default function LogoEdit( { attributes: { align, width }, children, clas save(); } - const toggleIsEditing = () => setIsEditing( ! isEditing ); - - const setIsNotEditing = () => setIsEditing( false ); - const onSelectLogo = ( media ) => { if ( ! media ) { return; @@ -110,18 +108,23 @@ export default function LogoEdit( { attributes: { align, width }, children, clas setLogo( '' ); setError(); setUrl( media.url ); - setIsNotEditing(); + setIsEditing( false ); return; } setLogo( media.id.toString() ); - setIsNotEditing(); + setIsEditing( false ); }; const deleteLogo = () => { setLogo( '' ); }; + const onUploadError = ( message ) => { + setIsEditing( true ); + setError( message[ 2 ] ? message[ 2 ] : null ); + }; + const controls = ( setAttributes( { align: newAlign } ) } controls={ [ 'left', 'center', 'right' ] } /> - { !! url && ( - - - - ) } + { url && } ); @@ -257,14 +256,14 @@ export default function LogoEdit( { attributes: { align, width }, children, clas instructions: __( 'Upload an image, or pick one from your media library, to be your site logo' ), } } onSelect={ onSelectLogo } - accept="image/*" - allowedTypes={ [ 'image' ] } + accept={ ACCEPT_MEDIA_STRING } + allowedTypes={ ALLOWED_MEDIA_TYPES } mediaPreview={ !! url && img } notices={ error && ( { error } ) } - onCancel={ !! url && setIsNotEditing } - onError={ ( message ) => setError( message[ 2 ] ? message[ 2 ] : null ) } + onCancel={ !! url && ( () => setIsEditing( false ) ) } + onError={ onUploadError } > { !! url && ( From a2f1c7e755005bfbebe0f5ad4ef2d170882a1775 Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Wed, 11 Dec 2019 13:31:56 +0000 Subject: [PATCH 07/25] fix typo in dismissible prop --- packages/block-library/src/site-logo/edit.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-library/src/site-logo/edit.js b/packages/block-library/src/site-logo/edit.js index cf302ba5a0bee7..c12934d6b70d2a 100644 --- a/packages/block-library/src/site-logo/edit.js +++ b/packages/block-library/src/site-logo/edit.js @@ -260,7 +260,7 @@ export default function LogoEdit( { attributes: { align, width }, children, clas allowedTypes={ ALLOWED_MEDIA_TYPES } mediaPreview={ !! url && img } notices={ error && ( - { error } + { error } ) } onCancel={ !! url && ( () => setIsEditing( false ) ) } onError={ onUploadError } From 66a1434d86181d8f052b58ed7d6aeeface69d5eb Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Tue, 23 Jun 2020 12:17:27 +0100 Subject: [PATCH 08/25] update the entity fetching mechanism --- packages/block-library/src/site-logo/edit.js | 455 ++++++++++-------- .../block-library/src/site-logo/editor.scss | 18 + packages/block-library/src/site-logo/icon.js | 6 +- packages/block-library/src/site-logo/index.js | 8 +- .../block-library/src/site-logo/index.php | 4 +- 5 files changed, 294 insertions(+), 197 deletions(-) diff --git a/packages/block-library/src/site-logo/edit.js b/packages/block-library/src/site-logo/edit.js index c12934d6b70d2a..0ea6c8bfff43b0 100644 --- a/packages/block-library/src/site-logo/edit.js +++ b/packages/block-library/src/site-logo/edit.js @@ -2,91 +2,252 @@ * External dependencies */ import classnames from 'classnames'; -import { debounce } from 'lodash'; +import { includes, pick } from 'lodash'; /** * WordPress dependencies */ import { isBlobURL } from '@wordpress/blob'; -import { useState, useEffect } from '@wordpress/element'; +import { useState, useRef } from '@wordpress/element'; import { __ } from '@wordpress/i18n'; import { - useEntityProp, - __experimentalUseEntitySaving, -} from '@wordpress/core-data'; -import { - IconButton, Notice, PanelBody, RangeControl, ResizableBox, + Spinner, + ToolbarButton, } from '@wordpress/components'; +import { useViewportMatch } from '@wordpress/compose'; import { BlockControls, - BlockAlignmentToolbar, BlockIcon, InspectorControls, MediaPlaceholder, MediaReplaceFlow, + __experimentalBlock as Block, } from '@wordpress/block-editor'; -import { useSelect } from '@wordpress/data'; +import { useSelect, useDispatch } from '@wordpress/data'; /** * Internal dependencies */ import icon from './icon'; +import useClientWidth from '../image/use-client-width'; -import ImageSize from '../image/image-size'; +/** + * Module constants + */ +import { MIN_SIZE } from '../image/constants'; const ALLOWED_MEDIA_TYPES = [ 'image' ]; const ACCEPT_MEDIA_STRING = 'image/*'; -const getHandleStates = ( align, isRTL = false ) => { - const defaultAlign = isRTL ? 'right' : 'left'; - const handleStates = { - left: { - right: true, - left: false, - }, - center: { - right: true, - left: true, - }, - right: { - right: false, - left: true, - }, - }; - return handleStates[ align ? align : defaultAlign ]; +const SiteLogo = ( { + alt, + attributes: { align, width, height }, + containerRef, + isSelected, + setAttributes, + url, +} ) => { + const clientWidth = useClientWidth( containerRef, [ align ] ); + const isLargeViewport = useViewportMatch( 'medium' ); + const isWideAligned = includes( [ 'wide', 'full' ], align ); + const isResizable = ! isWideAligned && isLargeViewport; + const [ { naturalWidth, naturalHeight }, setNaturalSize ] = useState( {} ); + const { toggleSelection } = useDispatch( 'core/block-editor' ); + const classes = classnames( 'custom-logo-link', { + 'is-transient': isBlobURL( url ), + } ); + const { maxWidth, isRTL } = useSelect( ( select ) => { + const { getSettings } = select( 'core/block-editor' ); + return pick( getSettings(), [ 'imageSizes', 'isRTL', 'maxWidth' ] ); + } ); + + function onResizeStart() { + toggleSelection( false ); + } + + function onResizeStop() { + toggleSelection( true ); + } + + let img = ( + // Disable reason: Image itself is not meant to be interactive, but + // should direct focus to block. + /* eslint-disable jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/click-events-have-key-events */ + + { { + setNaturalSize( + pick( event.target, [ + 'naturalWidth', + 'naturalHeight', + ] ) + ); + } } + /> + + /* eslint-enable jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/click-events-have-key-events */ + ); + + let imageWidthWithinContainer; + let logoInspectorControls = null; + + if ( clientWidth && naturalWidth && naturalHeight ) { + const exceedMaxWidth = naturalWidth > clientWidth; + imageWidthWithinContainer = exceedMaxWidth ? clientWidth : naturalWidth; + } + + if ( ! isResizable || ! imageWidthWithinContainer ) { + img =
{ img }
; + } else { + const currentWidth = width || imageWidthWithinContainer; + const ratio = naturalWidth / naturalHeight; + const currentHeight = currentWidth * ratio; + const minWidth = + naturalWidth < naturalHeight ? MIN_SIZE : MIN_SIZE * ratio; + const minHeight = + naturalHeight < naturalWidth ? MIN_SIZE : MIN_SIZE / ratio; + + // With the current implementation of ResizableBox, an image needs an + // explicit pixel value for the max-width. In absence of being able to + // set the content-width, this max-width is currently dictated by the + // vanilla editor style. The following variable adds a buffer to this + // vanilla style, so 3rd party themes have some wiggleroom. This does, + // in most cases, allow you to scale the image beyond the width of the + // main column, though not infinitely. + // @todo It would be good to revisit this once a content-width variable + // becomes available. + const maxWidthBuffer = maxWidth * 2.5; + + let showRightHandle = false; + let showLeftHandle = false; + + /* eslint-disable no-lonely-if */ + // See https://github.com/WordPress/gutenberg/issues/7584. + if ( align === 'center' ) { + // When the image is centered, show both handles. + showRightHandle = true; + showLeftHandle = true; + } else if ( isRTL ) { + // In RTL mode the image is on the right by default. + // Show the right handle and hide the left handle only when it is + // aligned left. Otherwise always show the left handle. + if ( align === 'left' ) { + showRightHandle = true; + } else { + showLeftHandle = true; + } + } else { + // Show the left handle and hide the right handle only when the + // image is aligned right. Otherwise always show the right handle. + if ( align === 'right' ) { + showLeftHandle = true; + } else { + showRightHandle = true; + } + } + /* eslint-enable no-lonely-if */ + + img = ( + { + onResizeStop(); + setAttributes( { + width: parseInt( currentWidth + delta.width, 10 ), + height: parseInt( currentHeight + delta.height, 10 ), + } ); + } } + > + { img } + + ); + + logoInspectorControls = ( + + + + setAttributes( { width: newWidth } ) + } + min={ minWidth } + max={ maxWidthBuffer } + initialPosition={ Math.min( + naturalWidth, + maxWidthBuffer + ) } + value={ width || '' } + disabled={ ! isResizable } + /> + + + ); + } + + return ( + <> + { logoInspectorControls } + { img } + + ); }; -export default function LogoEdit( { attributes: { align, width }, children, className, clientId, setAttributes, isSelected } ) { - const [ isEditing, setIsEditing ] = useState( false ); +export default function LogoEdit( { + attributes, + className, + setAttributes, + isSelected, +} ) { + const { width } = attributes; const [ url, setUrl ] = useState( null ); const [ error, setError ] = useState(); - const [ logo, setLogo ] = useEntityProp( 'root', 'site', 'sitelogo' ); - const [ isDirty, , save ] = __experimentalUseEntitySaving( - 'root', - 'site', - 'sitelogo' + const ref = useRef(); + const { sitelogo } = useSelect( ( select ) => + select( 'core' ).getEditedEntityRecord( 'root', 'site' ) ); - const mediaItemData = useSelect( ( select ) => { - const mediaItem = select( 'core' ).getEntityRecord( 'root', 'media', logo ); - return mediaItem && { - url: mediaItem.source_url, - alt: mediaItem.alt_text, - }; - }, [ logo ] ); - - const { isRTL, isLargeViewport } = useSelect( - ( select ) => ( { - isRTL: select( 'core/block-editor' ).getSettings().isRTL, - isLargeViewport: select( 'core/viewport' ).isViewportMatch( 'medium' ), - } ) + const mediaItem = select( 'core' ).getEntityRecord( + 'root', + 'media', + sitelogo + ); + return ( + mediaItem && { + url: mediaItem.source_url, + alt: mediaItem.alt_text, + } + ); + }, + [ sitelogo ] ); + const { editEntityRecord } = useDispatch( 'core' ); + const setLogo = ( newValue ) => + editEntityRecord( 'root', 'site', undefined, { + sitelogo: newValue, + } ); + let alt = null; if ( mediaItemData ) { alt = mediaItemData.alt; @@ -95,189 +256,107 @@ export default function LogoEdit( { attributes: { align, width }, children, clas } } - if ( isDirty ) { - save(); - } - const onSelectLogo = ( media ) => { if ( ! media ) { return; } - if ( ! media.id && media.url ) { // This is a temporary blob image + if ( ! media.id && media.url ) { + // This is a temporary blob image setLogo( '' ); setError(); setUrl( media.url ); - setIsEditing( false ); return; } setLogo( media.id.toString() ); - setIsEditing( false ); }; const deleteLogo = () => { setLogo( '' ); + setUrl( '' ); }; const onUploadError = ( message ) => { - setIsEditing( true ); setError( message[ 2 ] ? message[ 2 ] : null ); }; const controls = ( - setAttributes( { align: newAlign } ) } - controls={ [ 'left', 'center', 'right' ] } - /> - { url && } + { url && ( + + ) } + { !! url && ( + deleteLogo() } + label={ __( 'Delete Site Logo' ) } + /> + ) } ); - const getInspectorControls = ( imageWidth, resizedImageWidth, containerWidth, canResize ) => { - return ( - - - setAttributes( { width: newWidth } ) } - min={ 10 } - max={ Math.min( imageWidth, containerWidth ) } - initialPosition={ Math.min( imageWidth, containerWidth ) } - value={ resizedImageWidth || '' } - disabled={ ! canResize } - /> - - - ); - }; - - const [ maxWidth, setMaxWidth ] = useState( 10 ); - - useEffect( () => { - const wrapperElement = document.getElementById( `block-${ clientId }` ); - const calculateMaxWidth = debounce( () => setMaxWidth( wrapperElement && wrapperElement.clientWidth ), 250 ); - calculateMaxWidth(); - window.addEventListener( 'resize', calculateMaxWidth ); - return () => window.removeEventListener( 'resize', calculateMaxWidth ); - } ); - - const classes = classnames( 'custom-logo-link', { - 'is-transient': isBlobURL( url ), - } ); - - const img = ( - - { - - ); - const label = __( 'Site Logo' ); - const logoImage = ( - - { ( sizes ) => { - const { - imageWidthWithinContainer, - imageWidth, - imageHeight, - } = sizes; - - const currentWidth = width || imageWidthWithinContainer; - const ratio = imageWidth / imageHeight; - const currentHeight = currentWidth / ratio; - - const maxWidthProp = {}; - if ( maxWidth ) { - maxWidthProp.maxWidth = Math.min( imageWidth, maxWidth ); - } - - const canResize = ! isEditing && isLargeViewport && ( ! width || width <= maxWidth ); - - const wrapperProps = {}; - if ( align ) { - wrapperProps.className = `align${ align }`; - } + let logoImage; + if ( url === null ) { + logoImage = ; + } - if ( ! canResize ) { - wrapperProps.style = { width: Math.min( currentWidth, maxWidth ) }; - } + if ( !! url ) { + logoImage = ( + + ); + } - const boxSize = { - width: Math.min( currentWidth, maxWidth ), - height: ( maxWidth && currentWidth <= maxWidth ) ? currentHeight : maxWidth / ratio, - }; - - return ( - <> - { getInspectorControls( imageWidth, width, maxWidth, canResize ) } -
- { canResize ? ( - { - setAttributes( { - width: parseInt( currentWidth + delta.width, 10 ), - } ); - } } - style={ { display: 'inline-block' } } - > - { img } - - ) : img } -
- - ); - } } - - ); - const editComponent = ( + const mediaPlaceholder = ( } labels={ { title: label, - instructions: __( 'Upload an image, or pick one from your media library, to be your site logo' ), + instructions: __( + 'Upload an image, or pick one from your media library, to be your site logo' + ), } } onSelect={ onSelectLogo } accept={ ACCEPT_MEDIA_STRING } allowedTypes={ ALLOWED_MEDIA_TYPES } - mediaPreview={ !! url && img } - notices={ error && ( - { error } - ) } - onCancel={ !! url && ( () => setIsEditing( false ) ) } + mediaPreview={ logoImage } + notices={ + error && ( + + { error } + + ) + } onError={ onUploadError } - > - { !! url && ( - - { __( 'Delete Site Logo' ) } - - ) } - { children } - + /> ); + const classes = classnames( className, { + 'is-resized': !! width, + 'is-focused': isSelected, + } ); + + const key = !! url; + return ( -
+ { controls } - { ! url || isEditing ? editComponent : logoImage } -
+ { url && logoImage } + { ! url && mediaPlaceholder } + ); } diff --git a/packages/block-library/src/site-logo/editor.scss b/packages/block-library/src/site-logo/editor.scss index c1ccb934893e9f..8867b2fa0c3aa2 100644 --- a/packages/block-library/src/site-logo/editor.scss +++ b/packages/block-library/src/site-logo/editor.scss @@ -1,4 +1,14 @@ +.wp-block[data-align="center"] > .wp-block-site-logo { + margin-left: auto; + margin-right: auto; + text-align: center; +} + .wp-block-site-logo { + &.is-resized { + display: table; + } + .custom-logo-link { cursor: inherit; @@ -11,6 +21,10 @@ } } + img { + max-width: 100%; + } + .editor-media-placeholder__button { margin-bottom: 0; } @@ -19,4 +33,8 @@ flex-basis: 100%; text-align: center; } + + .components-resizable-box__container { + display: inline-block; + } } diff --git a/packages/block-library/src/site-logo/icon.js b/packages/block-library/src/site-logo/icon.js index 7bdd2ea99f5b34..67ab2ea40fdd90 100644 --- a/packages/block-library/src/site-logo/icon.js +++ b/packages/block-library/src/site-logo/icon.js @@ -4,8 +4,10 @@ import { SVG, Path } from '@wordpress/components'; export default ( - - + ); diff --git a/packages/block-library/src/site-logo/index.js b/packages/block-library/src/site-logo/index.js index f25a6d2178be5f..b021f2b08bbecc 100644 --- a/packages/block-library/src/site-logo/index.js +++ b/packages/block-library/src/site-logo/index.js @@ -17,11 +17,9 @@ export const settings = { title: __( 'Site Logo' ), description: __( 'Show a site logo' ), icon, - getEditWrapperProps( attributes ) { - const { align, width } = attributes; - if ( 'left' === align || 'center' === align || 'right' === align ) { - return { 'data-align': align, 'data-resized': !! width }; - } + supports: { + align: true, + alignWide: false, }, edit, }; diff --git a/packages/block-library/src/site-logo/index.php b/packages/block-library/src/site-logo/index.php index 5a97efc492388c..53fde96813a685 100644 --- a/packages/block-library/src/site-logo/index.php +++ b/packages/block-library/src/site-logo/index.php @@ -42,7 +42,7 @@ function render_block_core_site_logo( $attributes ) { } remove_filter( 'wp_get_attachment_image_src', $adjust_width_height_filter ); - return $html; + return '' . $html . ''; } /** @@ -64,7 +64,7 @@ function register_block_core_site_logo() { function override_custom_logo_theme_mod( $custom_logo ) { $sitelogo = get_option( 'sitelogo' ); - return false === $sitelogo ? $custom_logo : $sitelogo; + return false === $sitelogo ? $custom_logo : $sitelogo; } function sync_site_logo_to_theme_mod( $custom_logo ) { From 5b53fe9aaa887f39d2801d1a47d653a6938072a4 Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Tue, 23 Jun 2020 12:26:36 +0100 Subject: [PATCH 09/25] use lightBlockWrapper flag --- packages/block-library/src/site-logo/block.json | 3 ++- packages/block-library/src/site-logo/edit.js | 4 ++-- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/packages/block-library/src/site-logo/block.json b/packages/block-library/src/site-logo/block.json index 31a0ff259fc442..f86b4a22ef363c 100644 --- a/packages/block-library/src/site-logo/block.json +++ b/packages/block-library/src/site-logo/block.json @@ -10,6 +10,7 @@ } }, "supports": { - "html": false + "html": false, + "lightBlockWrapper": true } } diff --git a/packages/block-library/src/site-logo/edit.js b/packages/block-library/src/site-logo/edit.js index 0ea6c8bfff43b0..de9fb4adbf7ae5 100644 --- a/packages/block-library/src/site-logo/edit.js +++ b/packages/block-library/src/site-logo/edit.js @@ -353,10 +353,10 @@ export default function LogoEdit( { const key = !! url; return ( - + { controls } { url && logoImage } { ! url && mediaPlaceholder } - + ); } From 94f305985f15af954e155ee8f5ff5beef27c9447 Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Tue, 23 Jun 2020 12:54:49 +0100 Subject: [PATCH 10/25] fix image resizing --- packages/block-library/src/site-logo/edit.js | 2 +- packages/block-library/src/site-logo/editor.scss | 5 +---- 2 files changed, 2 insertions(+), 5 deletions(-) diff --git a/packages/block-library/src/site-logo/edit.js b/packages/block-library/src/site-logo/edit.js index de9fb4adbf7ae5..be7161c7a203f5 100644 --- a/packages/block-library/src/site-logo/edit.js +++ b/packages/block-library/src/site-logo/edit.js @@ -108,7 +108,7 @@ const SiteLogo = ( { } else { const currentWidth = width || imageWidthWithinContainer; const ratio = naturalWidth / naturalHeight; - const currentHeight = currentWidth * ratio; + const currentHeight = currentWidth / ratio; const minWidth = naturalWidth < naturalHeight ? MIN_SIZE : MIN_SIZE * ratio; const minHeight = diff --git a/packages/block-library/src/site-logo/editor.scss b/packages/block-library/src/site-logo/editor.scss index 8867b2fa0c3aa2..7fd3a6e2312140 100644 --- a/packages/block-library/src/site-logo/editor.scss +++ b/packages/block-library/src/site-logo/editor.scss @@ -22,6 +22,7 @@ } img { + display: block; max-width: 100%; } @@ -33,8 +34,4 @@ flex-basis: 100%; text-align: center; } - - .components-resizable-box__container { - display: inline-block; - } } From df479693f3639fa682efdc4615d64c70c0d4750c Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Tue, 23 Jun 2020 15:54:38 +0100 Subject: [PATCH 11/25] match the front/back end markup --- packages/block-library/src/site-logo/edit.js | 48 +++++++++++-------- .../block-library/src/site-logo/index.php | 30 ++++++------ 2 files changed, 44 insertions(+), 34 deletions(-) diff --git a/packages/block-library/src/site-logo/edit.js b/packages/block-library/src/site-logo/edit.js index be7161c7a203f5..9ea658fb8b2131 100644 --- a/packages/block-library/src/site-logo/edit.js +++ b/packages/block-library/src/site-logo/edit.js @@ -57,12 +57,19 @@ const SiteLogo = ( { const isResizable = ! isWideAligned && isLargeViewport; const [ { naturalWidth, naturalHeight }, setNaturalSize ] = useState( {} ); const { toggleSelection } = useDispatch( 'core/block-editor' ); - const classes = classnames( 'custom-logo-link', { + const classes = classnames( { 'is-transient': isBlobURL( url ), } ); - const { maxWidth, isRTL } = useSelect( ( select ) => { + const { maxWidth, isRTL, title } = useSelect( ( select ) => { const { getSettings } = select( 'core/block-editor' ); - return pick( getSettings(), [ 'imageSizes', 'isRTL', 'maxWidth' ] ); + const siteEntities = select( 'core' ).getEditedEntityRecord( + 'root', + 'site' + ); + return { + title: siteEntities.title, + ...pick( getSettings(), [ 'imageSizes', 'isRTL', 'maxWidth' ] ), + }; } ); function onResizeStart() { @@ -77,20 +84,22 @@ const SiteLogo = ( { // Disable reason: Image itself is not meant to be interactive, but // should direct focus to block. /* eslint-disable jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/click-events-have-key-events */ - - { { - setNaturalSize( - pick( event.target, [ - 'naturalWidth', - 'naturalHeight', - ] ) - ); - } } - /> + + + { { + setNaturalSize( + pick( event.target, [ + 'naturalWidth', + 'naturalHeight', + ] ) + ); + } } + /> + /* eslint-enable jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/click-events-have-key-events */ ); @@ -313,9 +322,10 @@ export default function LogoEdit( { ); diff --git a/packages/block-library/src/site-logo/index.php b/packages/block-library/src/site-logo/index.php index 53fde96813a685..1db857be79b469 100644 --- a/packages/block-library/src/site-logo/index.php +++ b/packages/block-library/src/site-logo/index.php @@ -24,27 +24,27 @@ function render_block_core_site_logo( $attributes ) { }; add_filter( 'wp_get_attachment_image_src', $adjust_width_height_filter ); - + //var_dump( $attributes );die; $custom_logo = get_custom_logo(); + $class_name = "wp-block-site-logo"; + if ( ! empty( $attributes['className'] ) ) { + $class_name .= " {$attributes['className']}"; + } + if ( ! empty( $attributes['align'] ) && in_array( $attributes['align'], array( 'center', 'left', 'right' ) ) ) { - $custom_logo = str_replace( - 'class="custom-logo-link"', - "class=\"custom-logo-link align{$attributes['align']}\"", - $custom_logo - ); - $html = sprintf( '', $custom_logo ); - } else { - $html = str_replace( - 'class="custom-logo-link"', - 'class="wp-block-custom-logo custom-logo-link"', - $custom_logo - ); + $class_name .= " align{$attributes['align']}"; } - remove_filter( 'wp_get_attachment_image_src', $adjust_width_height_filter ); - return '' . $html . ''; + /*if ( ! empty( $attributes['align'] ) && in_array( $attributes['align'], array( 'center', 'left', 'right' ) ) ) { + $html = sprintf( '', $html ); + }*/ + + $html = sprintf( '
%s
', $class_name, $custom_logo ); + remove_filter( 'wp_get_attachment_image_src', $adjust_width_height_filter ); + return $html; } + /** * Registers the `core/site-logo` block on the server. */ From 30a6dbb8694e77c87d90e59939912aadccfc3cf8 Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Tue, 23 Jun 2020 16:25:05 +0100 Subject: [PATCH 12/25] fix alignment in the BlockControls --- packages/block-library/src/site-logo/edit.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/block-library/src/site-logo/edit.js b/packages/block-library/src/site-logo/edit.js index 9ea658fb8b2131..82e0c3fd8e65d8 100644 --- a/packages/block-library/src/site-logo/edit.js +++ b/packages/block-library/src/site-logo/edit.js @@ -17,6 +17,7 @@ import { ResizableBox, Spinner, ToolbarButton, + ToolbarGroup, } from '@wordpress/components'; import { useViewportMatch } from '@wordpress/compose'; import { @@ -292,6 +293,7 @@ export default function LogoEdit( { const controls = ( + { url && ( ) } + ); From 70ce3d7d36a58254f99c617486760cf93333475e Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Tue, 23 Jun 2020 16:39:04 +0100 Subject: [PATCH 13/25] fix alignment in the BlockControls --- packages/block-library/src/site-logo/edit.js | 32 ++++++++++---------- 1 file changed, 16 insertions(+), 16 deletions(-) diff --git a/packages/block-library/src/site-logo/edit.js b/packages/block-library/src/site-logo/edit.js index 82e0c3fd8e65d8..9ac85200ae3279 100644 --- a/packages/block-library/src/site-logo/edit.js +++ b/packages/block-library/src/site-logo/edit.js @@ -294,22 +294,22 @@ export default function LogoEdit( { const controls = ( - { url && ( - - ) } - { !! url && ( - deleteLogo() } - label={ __( 'Delete Site Logo' ) } - /> - ) } + { url && ( + + ) } + { !! url && ( + deleteLogo() } + label={ __( 'Delete Site Logo' ) } + /> + ) } ); From e54cbd7d2999255d2793e8a744d759a4a28e1716 Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Tue, 30 Jun 2020 15:01:15 +0100 Subject: [PATCH 14/25] uopdate icon --- packages/block-library/src/site-logo/icon.js | 17 ++++++++++++++--- 1 file changed, 14 insertions(+), 3 deletions(-) diff --git a/packages/block-library/src/site-logo/icon.js b/packages/block-library/src/site-logo/icon.js index 67ab2ea40fdd90..a7118a72de038c 100644 --- a/packages/block-library/src/site-logo/icon.js +++ b/packages/block-library/src/site-logo/icon.js @@ -4,10 +4,21 @@ import { SVG, Path } from '@wordpress/components'; export default ( - + + ); From 632bc72a29ce12a72a42be3145c34349338805f0 Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Tue, 30 Jun 2020 15:18:19 +0100 Subject: [PATCH 15/25] simplify code --- packages/block-library/src/site-logo/edit.js | 140 +++++++++---------- 1 file changed, 65 insertions(+), 75 deletions(-) diff --git a/packages/block-library/src/site-logo/edit.js b/packages/block-library/src/site-logo/edit.js index 9ac85200ae3279..78d3d9bde0e615 100644 --- a/packages/block-library/src/site-logo/edit.js +++ b/packages/block-library/src/site-logo/edit.js @@ -81,7 +81,7 @@ const SiteLogo = ( { toggleSelection( true ); } - let img = ( + const img = ( // Disable reason: Image itself is not meant to be interactive, but // should direct focus to block. /* eslint-disable jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/click-events-have-key-events */ @@ -106,7 +106,6 @@ const SiteLogo = ( { ); let imageWidthWithinContainer; - let logoInspectorControls = null; if ( clientWidth && naturalWidth && naturalHeight ) { const exceedMaxWidth = naturalWidth > clientWidth; @@ -114,57 +113,76 @@ const SiteLogo = ( { } if ( ! isResizable || ! imageWidthWithinContainer ) { - img =
{ img }
; - } else { - const currentWidth = width || imageWidthWithinContainer; - const ratio = naturalWidth / naturalHeight; - const currentHeight = currentWidth / ratio; - const minWidth = - naturalWidth < naturalHeight ? MIN_SIZE : MIN_SIZE * ratio; - const minHeight = - naturalHeight < naturalWidth ? MIN_SIZE : MIN_SIZE / ratio; - - // With the current implementation of ResizableBox, an image needs an - // explicit pixel value for the max-width. In absence of being able to - // set the content-width, this max-width is currently dictated by the - // vanilla editor style. The following variable adds a buffer to this - // vanilla style, so 3rd party themes have some wiggleroom. This does, - // in most cases, allow you to scale the image beyond the width of the - // main column, though not infinitely. - // @todo It would be good to revisit this once a content-width variable - // becomes available. - const maxWidthBuffer = maxWidth * 2.5; - - let showRightHandle = false; - let showLeftHandle = false; + return
{ img }
; + } - /* eslint-disable no-lonely-if */ - // See https://github.com/WordPress/gutenberg/issues/7584. - if ( align === 'center' ) { - // When the image is centered, show both handles. + const currentWidth = width || imageWidthWithinContainer; + const ratio = naturalWidth / naturalHeight; + const currentHeight = currentWidth / ratio; + const minWidth = naturalWidth < naturalHeight ? MIN_SIZE : MIN_SIZE * ratio; + const minHeight = + naturalHeight < naturalWidth ? MIN_SIZE : MIN_SIZE / ratio; + + // With the current implementation of ResizableBox, an image needs an + // explicit pixel value for the max-width. In absence of being able to + // set the content-width, this max-width is currently dictated by the + // vanilla editor style. The following variable adds a buffer to this + // vanilla style, so 3rd party themes have some wiggleroom. This does, + // in most cases, allow you to scale the image beyond the width of the + // main column, though not infinitely. + // @todo It would be good to revisit this once a content-width variable + // becomes available. + const maxWidthBuffer = maxWidth * 2.5; + + let showRightHandle = false; + let showLeftHandle = false; + + /* eslint-disable no-lonely-if */ + // See https://github.com/WordPress/gutenberg/issues/7584. + if ( align === 'center' ) { + // When the image is centered, show both handles. + showRightHandle = true; + showLeftHandle = true; + } else if ( isRTL ) { + // In RTL mode the image is on the right by default. + // Show the right handle and hide the left handle only when it is + // aligned left. Otherwise always show the left handle. + if ( align === 'left' ) { showRightHandle = true; + } else { + showLeftHandle = true; + } + } else { + // Show the left handle and hide the right handle only when the + // image is aligned right. Otherwise always show the right handle. + if ( align === 'right' ) { showLeftHandle = true; - } else if ( isRTL ) { - // In RTL mode the image is on the right by default. - // Show the right handle and hide the left handle only when it is - // aligned left. Otherwise always show the left handle. - if ( align === 'left' ) { - showRightHandle = true; - } else { - showLeftHandle = true; - } } else { - // Show the left handle and hide the right handle only when the - // image is aligned right. Otherwise always show the right handle. - if ( align === 'right' ) { - showLeftHandle = true; - } else { - showRightHandle = true; - } + showRightHandle = true; } - /* eslint-enable no-lonely-if */ + } + /* eslint-enable no-lonely-if */ - img = ( + return ( + <> + + + + setAttributes( { width: newWidth } ) + } + min={ minWidth } + max={ maxWidthBuffer } + initialPosition={ Math.min( + naturalWidth, + maxWidthBuffer + ) } + value={ width || '' } + disabled={ ! isResizable } + /> + + { img } - ); - - logoInspectorControls = ( - - - - setAttributes( { width: newWidth } ) - } - min={ minWidth } - max={ maxWidthBuffer } - initialPosition={ Math.min( - naturalWidth, - maxWidthBuffer - ) } - value={ width || '' } - disabled={ ! isResizable } - /> - - - ); - } - - return ( - <> - { logoInspectorControls } - { img } ); }; From 7fef33b7a27f9ad2dfec662765e10760af210688 Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Tue, 30 Jun 2020 15:55:03 +0100 Subject: [PATCH 16/25] Hide the spinner when the site logo has loaded --- packages/block-library/src/site-logo/edit.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/block-library/src/site-logo/edit.js b/packages/block-library/src/site-logo/edit.js index 78d3d9bde0e615..a199cf693c3ba6 100644 --- a/packages/block-library/src/site-logo/edit.js +++ b/packages/block-library/src/site-logo/edit.js @@ -219,7 +219,7 @@ export default function LogoEdit( { isSelected, } ) { const { width } = attributes; - const [ url, setUrl ] = useState( null ); + const [ url, setUrl ] = useState(); const [ error, setError ] = useState(); const ref = useRef(); const { sitelogo } = useSelect( ( select ) => @@ -306,7 +306,7 @@ export default function LogoEdit( { const label = __( 'Site Logo' ); let logoImage; - if ( url === null ) { + if ( sitelogo === undefined ) { logoImage = ; } From 9288aec588b898bfab122186600b33dd1930fef0 Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Thu, 9 Jul 2020 13:17:25 +0100 Subject: [PATCH 17/25] Use the real url for the site logo --- packages/block-library/src/site-logo/edit.js | 38 ++++++++++---------- 1 file changed, 20 insertions(+), 18 deletions(-) diff --git a/packages/block-library/src/site-logo/edit.js b/packages/block-library/src/site-logo/edit.js index a199cf693c3ba6..24b2bf8c7ba687 100644 --- a/packages/block-library/src/site-logo/edit.js +++ b/packages/block-library/src/site-logo/edit.js @@ -50,7 +50,8 @@ const SiteLogo = ( { containerRef, isSelected, setAttributes, - url, + logoUrl, + siteUrl, } ) => { const clientWidth = useClientWidth( containerRef, [ align ] ); const isLargeViewport = useViewportMatch( 'medium' ); @@ -59,7 +60,7 @@ const SiteLogo = ( { const [ { naturalWidth, naturalHeight }, setNaturalSize ] = useState( {} ); const { toggleSelection } = useDispatch( 'core/block-editor' ); const classes = classnames( { - 'is-transient': isBlobURL( url ), + 'is-transient': isBlobURL( logoUrl ), } ); const { maxWidth, isRTL, title } = useSelect( ( select ) => { const { getSettings } = select( 'core/block-editor' ); @@ -85,11 +86,11 @@ const SiteLogo = ( { // Disable reason: Image itself is not meant to be interactive, but // should direct focus to block. /* eslint-disable jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/click-events-have-key-events */ - + event.preventDefault() }> { { setNaturalSize( @@ -219,10 +220,10 @@ export default function LogoEdit( { isSelected, } ) { const { width } = attributes; - const [ url, setUrl ] = useState(); + const [ logoUrl, setLogoUrl ] = useState(); const [ error, setError ] = useState(); const ref = useRef(); - const { sitelogo } = useSelect( ( select ) => + const { sitelogo, url } = useSelect( ( select ) => select( 'core' ).getEditedEntityRecord( 'root', 'site' ) ); const mediaItemData = useSelect( @@ -251,8 +252,8 @@ export default function LogoEdit( { let alt = null; if ( mediaItemData ) { alt = mediaItemData.alt; - if ( url !== mediaItemData.url ) { - setUrl( mediaItemData.url ); + if ( logoUrl !== mediaItemData.url ) { + setLogoUrl( mediaItemData.url ); } } @@ -265,7 +266,7 @@ export default function LogoEdit( { // This is a temporary blob image setLogo( '' ); setError(); - setUrl( media.url ); + setLogoUrl( media.url ); return; } @@ -274,7 +275,7 @@ export default function LogoEdit( { const deleteLogo = () => { setLogo( '' ); - setUrl( '' ); + setLogoUrl( '' ); }; const onUploadError = ( message ) => { @@ -284,16 +285,16 @@ export default function LogoEdit( { const controls = ( - { url && ( + { logoUrl && ( ) } - { !! url && ( + { !! logoUrl && ( deleteLogo() } @@ -310,7 +311,7 @@ export default function LogoEdit( { logoImage = ; } - if ( !! url ) { + if ( !! logoUrl ) { logoImage = ( ); } @@ -353,13 +355,13 @@ export default function LogoEdit( { 'is-focused': isSelected, } ); - const key = !! url; + const key = !! logoUrl; return ( { controls } - { url && logoImage } - { ! url && mediaPlaceholder } + { logoUrl && logoImage } + { ! logoUrl && mediaPlaceholder } ); } From 13a5265ac10b719576fc22e31cd91b5910f225c2 Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Thu, 9 Jul 2020 13:23:09 +0100 Subject: [PATCH 18/25] remove dead code --- packages/block-library/src/site-logo/edit.js | 8 +++++++- packages/block-library/src/site-logo/index.php | 4 ---- 2 files changed, 7 insertions(+), 5 deletions(-) diff --git a/packages/block-library/src/site-logo/edit.js b/packages/block-library/src/site-logo/edit.js index 24b2bf8c7ba687..b3beec6d8f1bfd 100644 --- a/packages/block-library/src/site-logo/edit.js +++ b/packages/block-library/src/site-logo/edit.js @@ -86,7 +86,13 @@ const SiteLogo = ( { // Disable reason: Image itself is not meant to be interactive, but // should direct focus to block. /* eslint-disable jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/click-events-have-key-events */ - event.preventDefault() }> + event.preventDefault() } + > %s', $html ); - }*/ - $html = sprintf( '
%s
', $class_name, $custom_logo ); remove_filter( 'wp_get_attachment_image_src', $adjust_width_height_filter ); return $html; From e343862a5aa00cda859c58e392cc21e082100ae6 Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Thu, 9 Jul 2020 13:25:11 +0100 Subject: [PATCH 19/25] remove unused CSS --- packages/block-library/src/site-logo/editor.scss | 9 --------- 1 file changed, 9 deletions(-) diff --git a/packages/block-library/src/site-logo/editor.scss b/packages/block-library/src/site-logo/editor.scss index 7fd3a6e2312140..8cb4592480eca7 100644 --- a/packages/block-library/src/site-logo/editor.scss +++ b/packages/block-library/src/site-logo/editor.scss @@ -25,13 +25,4 @@ display: block; max-width: 100%; } - - .editor-media-placeholder__button { - margin-bottom: 0; - } - - .block-editor-media-placeholder__cancel-button { - flex-basis: 100%; - text-align: center; - } } From 0d2585b29efe1576a9f0ee9d341173c7155baed7 Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Thu, 9 Jul 2020 13:54:46 +0100 Subject: [PATCH 20/25] combine the useSelect calls --- packages/block-library/src/site-logo/edit.js | 38 ++++++++++---------- 1 file changed, 19 insertions(+), 19 deletions(-) diff --git a/packages/block-library/src/site-logo/edit.js b/packages/block-library/src/site-logo/edit.js index b3beec6d8f1bfd..47fe868b94da32 100644 --- a/packages/block-library/src/site-logo/edit.js +++ b/packages/block-library/src/site-logo/edit.js @@ -229,25 +229,25 @@ export default function LogoEdit( { const [ logoUrl, setLogoUrl ] = useState(); const [ error, setError ] = useState(); const ref = useRef(); - const { sitelogo, url } = useSelect( ( select ) => - select( 'core' ).getEditedEntityRecord( 'root', 'site' ) - ); - const mediaItemData = useSelect( - ( select ) => { - const mediaItem = select( 'core' ).getEntityRecord( - 'root', - 'media', - sitelogo - ); - return ( - mediaItem && { - url: mediaItem.source_url, - alt: mediaItem.alt_text, - } - ); - }, - [ sitelogo ] - ); + const { mediaItemData, sitelogo, url } = useSelect( ( select ) => { + const siteSettings = select( 'core' ).getEditedEntityRecord( + 'root', + 'site' + ); + const mediaItem = select( 'core' ).getEntityRecord( + 'root', + 'media', + siteSettings.sitelogo + ); + return { + mediaItemData: mediaItem && { + url: mediaItem.source_url, + alt: mediaItem.alt_text, + }, + sitelogo: siteSettings.sitelogo, + url: siteSettings.url, + }; + } ); const { editEntityRecord } = useDispatch( 'core' ); const setLogo = ( newValue ) => From 2f08a3b530bfda2b52cf42a44be158a5652ac557 Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Thu, 9 Jul 2020 15:01:24 +0100 Subject: [PATCH 21/25] pass an empty array to useSelect to stop it firing on every render --- packages/block-library/src/site-logo/edit.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-library/src/site-logo/edit.js b/packages/block-library/src/site-logo/edit.js index 47fe868b94da32..911189f3115733 100644 --- a/packages/block-library/src/site-logo/edit.js +++ b/packages/block-library/src/site-logo/edit.js @@ -247,7 +247,7 @@ export default function LogoEdit( { sitelogo: siteSettings.sitelogo, url: siteSettings.url, }; - } ); + }, [] ); const { editEntityRecord } = useDispatch( 'core' ); const setLogo = ( newValue ) => From b8601093abaaec78e657c7a07760050357096c5e Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Thu, 9 Jul 2020 16:19:35 +0100 Subject: [PATCH 22/25] Linter fixes --- .../block-library/src/site-logo/index.php | 26 ++++++++++++++++--- 1 file changed, 22 insertions(+), 4 deletions(-) diff --git a/packages/block-library/src/site-logo/index.php b/packages/block-library/src/site-logo/index.php index 25ae638ddf4a90..6ec31ff0ca76b3 100644 --- a/packages/block-library/src/site-logo/index.php +++ b/packages/block-library/src/site-logo/index.php @@ -8,6 +8,8 @@ /** * Renders the `core/site-logo` block on the server. * + * @param array $attributes The block attributes. + * * @return string The render. */ function render_block_core_site_logo( $attributes ) { @@ -20,13 +22,12 @@ function render_block_core_site_logo( $attributes ) { return $image; } $height = floatval( $attributes['width'] ) / ( floatval( $image[1] ) / floatval( $image[2] ) ); - return array( $image[0], intval( $attributes['width'] ), intval( $height ) ); - }; + return array( $image[0], intval( $attributes['width'] ), intval( $height ) ); + }; add_filter( 'wp_get_attachment_image_src', $adjust_width_height_filter ); - //var_dump( $attributes );die; $custom_logo = get_custom_logo(); - $class_name = "wp-block-site-logo"; + $class_name = 'wp-block-site-logo'; if ( ! empty( $attributes['className'] ) ) { $class_name .= " {$attributes['className']}"; } @@ -58,11 +59,25 @@ function register_block_core_site_logo() { } add_action( 'init', 'register_block_core_site_logo' ); +/** + * Overrides the custom logo with a site logo, if the option is set. + * + * @param string $custom_logo The custom logo set by a theme. + * + * @return string The site logo if set. + */ function override_custom_logo_theme_mod( $custom_logo ) { $sitelogo = get_option( 'sitelogo' ); return false === $sitelogo ? $custom_logo : $sitelogo; } +/** + * Syncs the site logo with the theme modified logo. + * + * @param string $custom_logo The custom logo set by a theme. + * + * @return string The custom logo. + */ function sync_site_logo_to_theme_mod( $custom_logo ) { if ( $custom_logo ) { update_option( 'sitelogo', $custom_logo ); @@ -70,6 +85,9 @@ function sync_site_logo_to_theme_mod( $custom_logo ) { return $custom_logo; } +/** + * Register a core site setting for a site logo + */ function register_block_core_site_logo_setting() { register_setting( 'general', From 884d081f2a91bbf77d4250d633fa62e2f875e14b Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Thu, 9 Jul 2020 16:28:29 +0100 Subject: [PATCH 23/25] add fixtures for the site-logo block --- .../fixtures/blocks/core__site-logo.html | 1 + .../fixtures/blocks/core__site-logo.json | 10 ++++++++++ .../blocks/core__site-logo.parsed.json | 18 ++++++++++++++++++ .../blocks/core__site-logo.serialized.html | 1 + 4 files changed, 30 insertions(+) create mode 100644 packages/e2e-tests/fixtures/blocks/core__site-logo.html create mode 100644 packages/e2e-tests/fixtures/blocks/core__site-logo.json create mode 100644 packages/e2e-tests/fixtures/blocks/core__site-logo.parsed.json create mode 100644 packages/e2e-tests/fixtures/blocks/core__site-logo.serialized.html diff --git a/packages/e2e-tests/fixtures/blocks/core__site-logo.html b/packages/e2e-tests/fixtures/blocks/core__site-logo.html new file mode 100644 index 00000000000000..cfd4cd6a3b8d69 --- /dev/null +++ b/packages/e2e-tests/fixtures/blocks/core__site-logo.html @@ -0,0 +1 @@ + diff --git a/packages/e2e-tests/fixtures/blocks/core__site-logo.json b/packages/e2e-tests/fixtures/blocks/core__site-logo.json new file mode 100644 index 00000000000000..a84c7c57737e3d --- /dev/null +++ b/packages/e2e-tests/fixtures/blocks/core__site-logo.json @@ -0,0 +1,10 @@ +[ + { + "clientId": "_clientId_0", + "name": "core/site-logo", + "isValid": true, + "attributes": {}, + "innerBlocks": [], + "originalContent": "" + } +] diff --git a/packages/e2e-tests/fixtures/blocks/core__site-logo.parsed.json b/packages/e2e-tests/fixtures/blocks/core__site-logo.parsed.json new file mode 100644 index 00000000000000..3db3836e10d1af --- /dev/null +++ b/packages/e2e-tests/fixtures/blocks/core__site-logo.parsed.json @@ -0,0 +1,18 @@ +[ + { + "blockName": "core/site-logo", + "attrs": {}, + "innerBlocks": [], + "innerHTML": "", + "innerContent": [] + }, + { + "blockName": null, + "attrs": {}, + "innerBlocks": [], + "innerHTML": "\n", + "innerContent": [ + "\n" + ] + } +] diff --git a/packages/e2e-tests/fixtures/blocks/core__site-logo.serialized.html b/packages/e2e-tests/fixtures/blocks/core__site-logo.serialized.html new file mode 100644 index 00000000000000..cfd4cd6a3b8d69 --- /dev/null +++ b/packages/e2e-tests/fixtures/blocks/core__site-logo.serialized.html @@ -0,0 +1 @@ + From 9718c79ac6b211f2c613812134cbd9af463fbadf Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Thu, 9 Jul 2020 16:47:38 +0100 Subject: [PATCH 24/25] remove unused code --- packages/block-library/src/site-logo/index.php | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/packages/block-library/src/site-logo/index.php b/packages/block-library/src/site-logo/index.php index 6ec31ff0ca76b3..8b56eeb13730f5 100644 --- a/packages/block-library/src/site-logo/index.php +++ b/packages/block-library/src/site-logo/index.php @@ -13,10 +13,6 @@ * @return string The render. */ function render_block_core_site_logo( $attributes ) { - $image_attrs_filter = function ( $image_attrs ) use ( $attributes ) { - return $image_attrs; - }; - $adjust_width_height_filter = function ( $image ) use ( $attributes ) { if ( empty( $attributes['width'] ) ) { return $image; @@ -32,7 +28,7 @@ function render_block_core_site_logo( $attributes ) { $class_name .= " {$attributes['className']}"; } - if ( ! empty( $attributes['align'] ) && in_array( $attributes['align'], array( 'center', 'left', 'right' ) ) ) { + if ( ! empty( $attributes['align'] ) && in_array( $attributes['align'], array( 'center', 'left', 'right' ), TRUE ) ) { $class_name .= " align{$attributes['align']}"; } From 8638ccf130a47fbaa8d44bc8c9a63c5b6f16111c Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Thu, 9 Jul 2020 17:10:06 +0100 Subject: [PATCH 25/25] fix for linter --- packages/block-library/src/site-logo/index.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-library/src/site-logo/index.php b/packages/block-library/src/site-logo/index.php index 8b56eeb13730f5..66b3a84023af20 100644 --- a/packages/block-library/src/site-logo/index.php +++ b/packages/block-library/src/site-logo/index.php @@ -28,7 +28,7 @@ function render_block_core_site_logo( $attributes ) { $class_name .= " {$attributes['className']}"; } - if ( ! empty( $attributes['align'] ) && in_array( $attributes['align'], array( 'center', 'left', 'right' ), TRUE ) ) { + if ( ! empty( $attributes['align'] ) && in_array( $attributes['align'], array( 'center', 'left', 'right' ), true ) ) { $class_name .= " align{$attributes['align']}"; }