Full Site Editing: Add a Site Logo block

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',
 			)

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";

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,

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
+	}
+}

packages/block-library/src/site-logo/edit.js

@@ -0,0 +1,283 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+import { debounce } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { isBlobURL } from '@wordpress/blob';
+import { useState, useEffect } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import {
+	useEntityProp,
+	__experimentalUseEntitySaving,
+} from '@wordpress/core-data';
+import {
+	IconButton,
+	Notice,
+	PanelBody,
+	RangeControl,
+	ResizableBox,
+} from '@wordpress/components';
+import {
+	BlockControls,
+	BlockAlignmentToolbar,
+	BlockIcon,
+	InspectorControls,
+	MediaPlaceholder,
+	MediaReplaceFlow,
+} from '@wordpress/block-editor';
+import { useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+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 = {
+		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 [ url, setUrl ] = useState( null );
+	const [ error, setError ] = useState();
+	const [ logo, setLogo ] = useEntityProp( 'root', 'site', 'sitelogo' );
+	const [ isDirty, , save ] = __experimentalUseEntitySaving(
+		'root',
+		'site',
+		'sitelogo'
+	);
+
+	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 alt = null;
+	if ( mediaItemData ) {
+		alt = mediaItemData.alt;
+		if ( url !== mediaItemData.url ) {
+			setUrl( mediaItemData.url );
+		}
+	}
+
+	if ( isDirty ) {
+		save();
+	}
+
+	const onSelectLogo = ( media ) => {
+		if ( ! media ) {
+			return;
+		}
+
+		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( '' );
+	};
+
+	const onUploadError = ( message ) => {
+		setIsEditing( true );
+		setError( message[ 2 ] ? message[ 2 ] : null );
+	};
+
+	const controls = (
+		<BlockControls>
+			<BlockAlignmentToolbar
+				value={ align }
+				onChange={ ( newAlign ) => setAttributes( { align: newAlign } ) }
+				controls={ [ 'left', 'center', 'right' ] }
+			/>
+			{ url && <MediaReplaceFlow
+				mediaURL={ url }
+				allowedTypes={ ALLOWED_MEDIA_TYPES }
+				accept={ ACCEPT_MEDIA_STRING }
+				onSelect={ onSelectLogo }
+				onError={ onUploadError }
+			/> }
+		</BlockControls>
+	);
+
+	const getInspectorControls = ( imageWidth, resizedImageWidth, containerWidth, canResize ) => {
+		return (
+			<InspectorControls>
+				<PanelBody title={ __( 'Site Logo Settings' ) }>
+					<RangeControl
+						label={ __( 'Image width' ) }
+						onChange={ ( newWidth ) => setAttributes( { width: newWidth } ) }
+						min={ 10 }
+						max={ Math.min( imageWidth, containerWidth ) }
+						initialPosition={ Math.min( imageWidth, containerWidth ) }
+						value={ resizedImageWidth || '' }
+						disabled={ ! canResize }
+					/>
+				</PanelBody>
+			</InspectorControls>
+		);
+	};
+
+	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 = (
+		<a href="#home" className={ classes } rel="home">
+			<img className="custom-logo" src={ url } alt={ alt } />
+		</a>
+	);
+
+	const label = __( 'Site Logo' );
+	const logoImage = (
+		<ImageSize src={ url }>
+			{ ( 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 ) }
+						<div { ...wrapperProps }>
+							{ canResize ? (
+								<ResizableBox
+									showHandle={ isSelected }
+									size={ boxSize }
+									lockAspectRatio={ true }
+									minWidth={ 10 }
+									{ ...maxWidthProp }
+									enable={ {
+										top: false,
+										bottom: true,
+										...getHandleStates( align, isRTL ),
+									} }
+
+									onResizeStop={ ( event, direction, elt, delta ) => {
+										setAttributes( {
+											width: parseInt( currentWidth + delta.width, 10 ),
+										} );
+									} }
+									style={ { display: 'inline-block' } }
+								>
+									{ img }
+								</ResizableBox>
+							) : img }
+						</div>
+					</>
+				);
+			} }
+		</ImageSize>
+	);
+	const editComponent = (
+		<MediaPlaceholder
+			icon={ <BlockIcon icon={ icon } /> }
+			labels={ {
+				title: label,
+				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 && (
+				<Notice status="error" isDismissible={ false }>{ error }</Notice>
+			) }
+			onCancel={ !! url && ( () => setIsEditing( false ) ) }
+			onError={ onUploadError }
+		>
+			{ !! url && (
+				<IconButton isLarge icon="delete" onClick={ deleteLogo }>
+					{ __( 'Delete Site Logo' ) }
+				</IconButton>
+			) }
+			{ children }
+		</MediaPlaceholder>
+	);
+
+	return (
+		<div className={ className }>
+			{ controls }
+			{ ! url || isEditing ? editComponent : logoImage }
+		</div>
+	);
+}

packages/block-library/src/site-logo/editor.scss

@@ -0,0 +1,22 @@
+.wp-block-site-logo {
+	.custom-logo-link {
+		cursor: inherit;
+
+		&:focus {
+			box-shadow: none;
+		}
+
+		&.is-transient img {
+			opacity: 0.3;
+		}
+	}
+
+	.editor-media-placeholder__button {
+		margin-bottom: 0;
+	}
+
+	.block-editor-media-placeholder__cancel-button {
+		flex-basis: 100%;
+		text-align: center;
+	}
+}

packages/block-library/src/site-logo/icon.js

@@ -0,0 +1,11 @@
+/**
+ * WordPress dependencies
+ */
+import { SVG, Path } from '@wordpress/components';
+
+export default (
+
+	<SVG height="21" viewBox="0 0 20 21" width="20">
+		<Path d="m5 9.5h-5v2h5zm2.17-3.24-2.12-2.12-1.41 1.41 2.12 2.12zm3.83-5.76h-2v5h2zm5.36 5.05-1.41-1.41-2.12 2.12 1.41 1.41zm-1.36 3.95v2h5v-2zm-5-2c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3zm2.83 7.24 2.12 2.12 1.41-1.41-2.12-2.12zm-9.19.71 1.41 1.41 2.12-2.12-1.41-1.41zm5.36 5.05h2v-5h-2z" fill="#525d67" />
+	</SVG>
+);

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,
+};