@wordpress/edit-site 5.5.0 → 5.6.0

package/src/components/style-book/index.js

@@ -8,6 +8,10 @@ import classnames from 'classnames';
  */
 import {
 	Button,
+	__unstableComposite as Composite,
+	__unstableUseCompositeState as useCompositeState,
+	__unstableCompositeItem as CompositeItem,
+	Disabled,
 	TabPanel,
 	createSlotFill,
 	__experimentalUseSlotFills as useSlotFills,
@@ -20,9 +24,13 @@ import {
 	createBlock,
 } from '@wordpress/blocks';
 import {
-	BlockPreview,
+	BlockList,
 	privateApis as blockEditorPrivateApis,
+	store as blockEditorStore,
+	__unstableEditorStyles as EditorStyles,
+	__unstableIframe as Iframe,
 } from '@wordpress/block-editor';
+import { useSelect } from '@wordpress/data';
 import { closeSmall } from '@wordpress/icons';
 import {
 	useResizeObserver,
@@ -38,12 +46,84 @@ import { ESCAPE } from '@wordpress/keycodes';
  */
 import { unlock } from '../../private-apis';
 
-const { useGlobalStyle } = unlock( blockEditorPrivateApis );
+const { ExperimentalBlockEditorProvider, useGlobalStyle } = unlock(
+	blockEditorPrivateApis
+);
 
 const SLOT_FILL_NAME = 'EditSiteStyleBook';
 const { Slot: StyleBookSlot, Fill: StyleBookFill } =
 	createSlotFill( SLOT_FILL_NAME );
 
+// The content area of the Style Book is rendered within an iframe so that global styles
+// are applied to elements within the entire content area. To support elements that are
+// not part of the block previews, such as headings and layout for the block previews,
+// additional CSS rules need to be passed into the iframe. These are hard-coded below.
+// Note that button styles are unset, and then focus rules from the `Button` component are
+// applied to the `button` element, targeted via `.edit-site-style-book__example`.
+// This is to ensure that browser default styles for buttons are not applied to the previews.
+const STYLE_BOOK_IFRAME_STYLES = `
+	.edit-site-style-book__examples {
+		max-width: 900px;
+		margin: 0 auto;
+	}
+
+	.edit-site-style-book__example {
+		border-radius: 2px;
+		cursor: pointer;
+		display: flex;
+		flex-direction: column;
+		gap: 40px;
+		margin-bottom: 40px;
+		padding: 16px;
+		width: 100%;
+		box-sizing: border-box;
+	}
+
+	.edit-site-style-book__example.is-selected {
+		box-shadow: 0 0 0 1px var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
+	}
+
+	.edit-site-style-book__example:focus:not(:disabled) {
+		box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba));
+		outline: 3px solid transparent;
+	}
+
+	.edit-site-style-book__examples.is-wide .edit-site-style-book__example {
+		flex-direction: row;
+	}
+
+	.edit-site-style-book__example-title {
+		font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+		font-size: 11px;
+		font-weight: 500;
+		line-height: normal;
+		margin: 0;
+		text-align: left;
+		text-transform: uppercase;
+	}
+
+	.edit-site-style-book__examples.is-wide .edit-site-style-book__example-title {
+		text-align: right;
+		width: 120px;
+	}
+
+	.edit-site-style-book__example-preview {
+		width: 100%;
+	}
+
+	.edit-site-style-book__example-preview .block-editor-block-list__insertion-point,
+	.edit-site-style-book__example-preview .block-list-appender {
+		display: none;
+	}
+
+	.edit-site-style-book__example-preview .is-root-container > .wp-block:first-child {
+		margin-top: 0;
+	}
+	.edit-site-style-book__example-preview .is-root-container > .wp-block:last-child {
+		margin-bottom: 0;
+	}
+`;
+
 function getExamples() {
 	// Use our own example for the Heading block so that we can show multiple
 	// heading levels.
@@ -118,6 +198,15 @@ function StyleBook( { isSelected, onSelect, onClose } ) {
 		[ examples ]
 	);
 
+	const originalSettings = useSelect(
+		( select ) => select( blockEditorStore ).getSettings(),
+		[]
+	);
+	const settings = useMemo(
+		() => ( { ...originalSettings, __unstableIsPreviewMode: true } ),
+		[ originalSettings ]
+	);
+
 	function closeOnEscape( event ) {
 		if ( event.keyCode === ESCAPE && ! event.defaultPrevented ) {
 			event.preventDefault();
@@ -156,12 +245,47 @@ function StyleBook( { isSelected, onSelect, onClose } ) {
 					tabs={ tabs }
 				>
 					{ ( tab ) => (
-						<Examples
-							examples={ examples }
-							category={ tab.name }
-							isSelected={ isSelected }
-							onSelect={ onSelect }
-						/>
+						<Iframe
+							className="edit-site-style-book__iframe"
+							head={
+								<>
+									<EditorStyles styles={ settings.styles } />
+									<style>
+										{
+											// Forming a "block formatting context" to prevent margin collapsing.
+											// @see https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context
+											`.is-root-container { display: flow-root; }
+											body { position: relative; padding: 32px !important; }` +
+												STYLE_BOOK_IFRAME_STYLES
+										}
+									</style>
+								</>
+							}
+							name="style-book-canvas"
+							tabIndex={ 0 }
+						>
+							{ /* Filters need to be rendered before children to avoid Safari rendering issues. */ }
+							{ settings.svgFilters }
+							<Examples
+								className={ classnames(
+									'edit-site-style-book__examples',
+									{
+										'is-wide': sizes.width > 600,
+									}
+								) }
+								examples={ examples }
+								category={ tab.name }
+								label={ sprintf(
+									// translators: %s: Category of blocks, e.g. Text.
+									__(
+										'Examples of blocks in the %s category'
+									),
+									tab.title
+								) }
+								isSelected={ isSelected }
+								onSelect={ onSelect }
+							/>
+						</Iframe>
 					) }
 				</TabPanel>
 			</section>
@@ -169,52 +293,83 @@ function StyleBook( { isSelected, onSelect, onClose } ) {
 	);
 }
 
-const Examples = memo( ( { examples, category, isSelected, onSelect } ) => (
-	<div className="edit-site-style-book__examples">
-		{ examples
-			.filter( ( example ) => example.category === category )
-			.map( ( example ) => (
-				<Example
-					key={ example.name }
-					title={ example.title }
-					blocks={ example.blocks }
-					isSelected={ isSelected( example.name ) }
-					onClick={ () => {
-						onSelect( example.name );
-					} }
-				/>
-			) ) }
-	</div>
-) );
-
-const Example = memo( ( { title, blocks, isSelected, onClick } ) => (
-	<button
-		className={ classnames( 'edit-site-style-book__example', {
-			'is-selected': isSelected,
-		} ) }
-		aria-label={ sprintf(
-			// translators: %s: Title of a block, e.g. Heading.
-			__( 'Open %s styles in Styles panel' ),
-			title
-		) }
-		onClick={ onClick }
-	>
-		<span className="edit-site-style-book__example-title">{ title }</span>
-		<div className="edit-site-style-book__example-preview">
-			<BlockPreview
-				blocks={ blocks }
-				viewportWidth={ 0 }
-				additionalStyles={ [
-					{
-						css:
-							'.wp-block:first-child { margin-top: 0; }' +
-							'.wp-block:last-child { margin-bottom: 0; }',
-					},
-				] }
-			/>
-		</div>
-	</button>
-) );
+const Examples = memo(
+	( { className, examples, category, label, isSelected, onSelect } ) => {
+		const composite = useCompositeState( { orientation: 'vertical' } );
+		return (
+			<Composite
+				{ ...composite }
+				className={ className }
+				aria-label={ label }
+			>
+				{ examples
+					.filter( ( example ) => example.category === category )
+					.map( ( example ) => (
+						<Example
+							key={ example.name }
+							id={ `example-${ example.name }` }
+							composite={ composite }
+							title={ example.title }
+							blocks={ example.blocks }
+							isSelected={ isSelected( example.name ) }
+							onClick={ () => {
+								onSelect( example.name );
+							} }
+						/>
+					) ) }
+			</Composite>
+		);
+	}
+);
+
+const Example = ( { composite, id, title, blocks, isSelected, onClick } ) => {
+	const originalSettings = useSelect(
+		( select ) => select( blockEditorStore ).getSettings(),
+		[]
+	);
+	const settings = useMemo(
+		() => ( { ...originalSettings, __unstableIsPreviewMode: true } ),
+		[ originalSettings ]
+	);
+
+	// Cache the list of blocks to avoid additional processing when the component is re-rendered.
+	const renderedBlocks = useMemo(
+		() => ( Array.isArray( blocks ) ? blocks : [ blocks ] ),
+		[ blocks ]
+	);
+
+	return (
+		<CompositeItem
+			{ ...composite }
+			className={ classnames( 'edit-site-style-book__example', {
+				'is-selected': isSelected,
+			} ) }
+			id={ id }
+			aria-label={ sprintf(
+				// translators: %s: Title of a block, e.g. Heading.
+				__( 'Open %s styles in Styles panel' ),
+				title
+			) }
+			onClick={ onClick }
+			role="button"
+			as="div"
+		>
+			<span className="edit-site-style-book__example-title">
+				{ title }
+			</span>
+			<div className="edit-site-style-book__example-preview" aria-hidden>
+				<Disabled className="edit-site-style-book__example-preview__content">
+					<ExperimentalBlockEditorProvider
+						value={ renderedBlocks }
+						settings={ settings }
+					>
+						<BlockList renderAppender={ false } />
+					</ExperimentalBlockEditorProvider>
+				</Disabled>
+			</div>
+		</CompositeItem>
+	);
+};
 
 function useHasStyleBook() {
 	const fills = useSlotFills( SLOT_FILL_NAME );

package/src/components/style-book/style.scss

@@ -26,53 +26,9 @@
 		bottom: 0;
 		left: 0;
 		overflow: auto;
-		padding: $grid-unit-40;
+		padding: 0;
 		position: absolute;
 		right: 0;
 		top: $grid-unit-60; // Height of tabs.
 	}
 }
-
-.edit-site-style-book__examples {
-	max-width: 900px;
-	margin: 0 auto;
-}
-
-.edit-site-style-book__example {
-	background: none;
-	border-radius: $radius-block-ui;
-	border: none;
-	color: inherit;
-	cursor: pointer;
-	display: flex;
-	flex-direction: column;
-	gap: $grid-unit-50;
-	margin-bottom: $grid-unit-50;
-	padding: $grid-unit-20;
-	width: 100%;
-
-	&.is-selected {
-		box-shadow: 0 0 0 1px var(--wp-admin-theme-color);
-	}
-
-	.edit-site-style-book.is-wide & {
-		flex-direction: row;
-	}
-}
-
-.edit-site-style-book__example-title {
-	font-size: 11px;
-	font-weight: 500;
-	margin: 0;
-	text-align: left;
-	text-transform: uppercase;
-
-	.edit-site-style-book.is-wide & {
-		text-align: right;
-		width: 120px;
-	}
-}
-
-.edit-site-style-book__example-preview {
-	width: 100%;
-}

package/src/components/sync-state-with-url/use-sync-canvas-mode-with-url.js

@@ -20,22 +20,52 @@ export default function useSyncCanvasModeWithURL() {
 	);
 	const { setCanvasMode } = unlock( useDispatch( editSiteStore ) );
 	const currentCanvasMode = useRef( canvasMode );
-	const { canvas: canvasInUrl = 'view' } = params;
+	const { canvas: canvasInUrl } = params;
 	const currentCanvasInUrl = useRef( canvasInUrl );
+	const currentUrlParams = useRef( params );
+	useEffect( () => {
+		currentUrlParams.current = params;
+	}, [ params ] );
+
 	useEffect( () => {
 		currentCanvasMode.current = canvasMode;
-		if ( currentCanvasMode !== currentCanvasInUrl ) {
+		if ( canvasMode === 'init' ) {
+			return;
+		}
+
+		if (
+			canvasMode === 'edit' &&
+			currentCanvasInUrl.current !== canvasMode
+		) {
+			history.push( {
+				...currentUrlParams.current,
+				canvas: 'edit',
+			} );
+		}
+
+		if (
+			canvasMode === 'view' &&
+			currentCanvasInUrl.current !== undefined
+		) {
 			history.push( {
-				...params,
-				canvas: canvasMode,
+				...currentUrlParams.current,
+				canvas: undefined,
 			} );
 		}
-	}, [ canvasMode ] );
+	}, [ canvasMode, history ] );
 
 	useEffect( () => {
 		currentCanvasInUrl.current = canvasInUrl;
-		if ( canvasInUrl !== currentCanvasMode.current ) {
-			setCanvasMode( canvasInUrl );
+		if (
+			canvasInUrl === undefined &&
+			currentCanvasMode.current !== 'view'
+		) {
+			setCanvasMode( 'view' );
+		} else if (
+			canvasInUrl === 'edit' &&
+			currentCanvasMode.current !== 'edit'
+		) {
+			setCanvasMode( 'edit' );
 		}
-	}, [ canvasInUrl ] );
+	}, [ canvasInUrl, setCanvasMode ] );
 }

package/src/components/sync-state-with-url/use-sync-path-with-url.js

@@ -41,8 +41,16 @@ export default function useSyncPathWithURL() {
 	} = useNavigator();
 	const currentUrlParams = useRef( urlParams );
 	const currentPath = useRef( navigatorLocation.path );
+	const isMounting = useRef( true );
 
 	useEffect( () => {
+		// The navigatorParams are only initially filled properly when the
+		// navigator screens mount. so we ignore the first synchronisation.
+		if ( isMounting.current ) {
+			isMounting.current = false;
+			return;
+		}
+
 		function updateUrlParams( newUrlParams ) {
 			if (
 				Object.entries( newUrlParams ).every( ( [ key, value ] ) => {
@@ -65,17 +73,14 @@ export default function useSyncPathWithURL() {
 				postId: navigatorParams?.postId,
 				path: undefined,
 			} );
-		} else if ( navigatorParams?.postType && ! navigatorParams?.postId ) {
-			updateUrlParams( {
-				postType: navigatorParams?.postType,
-				path: navigatorLocation.path,
-				postId: undefined,
-			} );
 		} else {
 			updateUrlParams( {
 				postType: undefined,
 				postId: undefined,
-				path: navigatorLocation.path,
+				path:
+					navigatorLocation.path === '/'
+						? undefined
+						: navigatorLocation.path,
 			} );
 		}
 	}, [ navigatorLocation?.path, navigatorParams, history ] );

package/src/components/template-details/index.js

@@ -32,9 +32,6 @@ export default function TemplateDetails( { template, onClose } ) {
 
 	// TODO: We should update this to filter by template part's areas as well.
 	const browseAllLinkProps = useLink( {
-		canvas: 'view',
-		postType: template.type,
-		postId: undefined,
 		path: '/' + template.type + '/all',
 	} );
 

package/src/components/template-part-converter/convert-to-regular.js

@@ -2,14 +2,11 @@
  * WordPress dependencies
  */
 import { useSelect, useDispatch } from '@wordpress/data';
-import {
-	BlockSettingsMenuControls,
-	store as blockEditorStore,
-} from '@wordpress/block-editor';
+import { store as blockEditorStore } from '@wordpress/block-editor';
 import { MenuItem } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
-export default function ConvertToRegularBlocks( { clientId } ) {
+export default function ConvertToRegularBlocks( { clientId, onClose } ) {
 	const { getBlocks } = useSelect( blockEditorStore );
 	const { replaceBlocks } = useDispatch( blockEditorStore );
 
@@ -23,17 +20,13 @@ export default function ConvertToRegularBlocks( { clientId } ) {
 	}
 
 	return (
-		<BlockSettingsMenuControls>
-			{ ( { onClose } ) => (
-				<MenuItem
-					onClick={ () => {
-						replaceBlocks( clientId, getBlocks( clientId ) );
-						onClose();
-					} }
-				>
-					{ __( 'Detach blocks from template part' ) }
-				</MenuItem>
-			) }
-		</BlockSettingsMenuControls>
+		<MenuItem
+			onClick={ () => {
+				replaceBlocks( clientId, getBlocks( clientId ) );
+				onClose();
+			} }
+		>
+			{ __( 'Detach blocks from template part' ) }
+		</MenuItem>
 	);
 }

package/src/components/template-part-converter/convert-to-template-part.js

@@ -2,10 +2,7 @@
  * WordPress dependencies
  */
 import { useDispatch, useSelect } from '@wordpress/data';
-import {
-	BlockSettingsMenuControls,
-	store as blockEditorStore,
-} from '@wordpress/block-editor';
+import { store as blockEditorStore } from '@wordpress/block-editor';
 import { MenuItem } from '@wordpress/components';
 import { createBlock, serialize } from '@wordpress/blocks';
 import { __ } from '@wordpress/i18n';
@@ -78,18 +75,14 @@ export default function ConvertToTemplatePart( { clientIds, blocks } ) {
 
 	return (
 		<>
-			<BlockSettingsMenuControls>
-				{ () => (
-					<MenuItem
-						icon={ symbolFilled }
-						onClick={ () => {
-							setIsModalOpen( true );
-						} }
-					>
-						{ __( 'Create Template part' ) }
-					</MenuItem>
-				) }
-			</BlockSettingsMenuControls>
+			<MenuItem
+				icon={ symbolFilled }
+				onClick={ () => {
+					setIsModalOpen( true );
+				} }
+			>
+				{ __( 'Create Template part' ) }
+			</MenuItem>
 			{ isModalOpen && (
 				<CreateTemplatePartModal
 					closeModal={ () => {

package/src/components/template-part-converter/index.js

@@ -2,7 +2,10 @@
  * WordPress dependencies
  */
 import { useSelect } from '@wordpress/data';
-import { store as blockEditorStore } from '@wordpress/block-editor';
+import {
+	BlockSettingsMenuControls,
+	store as blockEditorStore,
+} from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
@@ -11,20 +14,33 @@ import ConvertToRegularBlocks from './convert-to-regular';
 import ConvertToTemplatePart from './convert-to-template-part';
 
 export default function TemplatePartConverter() {
-	const { clientIds, blocks } = useSelect( ( select ) => {
-		const { getSelectedBlockClientIds, getBlocksByClientId } =
-			select( blockEditorStore );
-		const selectedBlockClientIds = getSelectedBlockClientIds();
-		return {
-			clientIds: selectedBlockClientIds,
-			blocks: getBlocksByClientId( selectedBlockClientIds ),
-		};
-	}, [] );
+	return (
+		<BlockSettingsMenuControls>
+			{ ( { selectedClientIds, onClose } ) => (
+				<TemplatePartConverterMenuItem
+					clientIds={ selectedClientIds }
+					onClose={ onClose }
+				/>
+			) }
+		</BlockSettingsMenuControls>
+	);
+}
+
+function TemplatePartConverterMenuItem( { clientIds, onClose } ) {
+	const blocks = useSelect(
+		( select ) =>
+			select( blockEditorStore ).getBlocksByClientId( clientIds ),
+		[ clientIds ]
+	);
 
 	// Allow converting a single template part to standard blocks.
 	if ( blocks.length === 1 && blocks[ 0 ]?.name === 'core/template-part' ) {
-		return <ConvertToRegularBlocks clientId={ clientIds[ 0 ] } />;
+		return (
+			<ConvertToRegularBlocks
+				clientId={ clientIds[ 0 ] }
+				onClose={ onClose }
+			/>
+		);
 	}
-
 	return <ConvertToTemplatePart clientIds={ clientIds } blocks={ blocks } />;
 }

package/src/components/use-edited-entity-record/index.js

@@ -11,25 +11,33 @@ import { decodeEntities } from '@wordpress/html-entities';
  */
 import { store as editSiteStore } from '../../store';
 
-export default function useEditedEntityRecord() {
-	const { record, title, description, isLoaded } = useSelect( ( select ) => {
-		const { getEditedPostType, getEditedPostId } = select( editSiteStore );
-		const { getEditedEntityRecord } = select( coreStore );
-		const { __experimentalGetTemplateInfo: getTemplateInfo } =
-			select( editorStore );
-		const postType = getEditedPostType();
-		const postId = getEditedPostId();
-		const _record = getEditedEntityRecord( 'postType', postType, postId );
-		const _isLoaded = !! postId;
-		const templateInfo = getTemplateInfo( _record );
+export default function useEditedEntityRecord( postType, postId ) {
+	const { record, title, description, isLoaded } = useSelect(
+		( select ) => {
+			const { getEditedPostType, getEditedPostId } =
+				select( editSiteStore );
+			const { getEditedEntityRecord } = select( coreStore );
+			const { __experimentalGetTemplateInfo: getTemplateInfo } =
+				select( editorStore );
+			const usedPostType = postType ?? getEditedPostType();
+			const usedPostId = postId ?? getEditedPostId();
+			const _record = getEditedEntityRecord(
+				'postType',
+				usedPostType,
+				usedPostId
+			);
+			const _isLoaded = !! usedPostId;
+			const templateInfo = getTemplateInfo( _record );
 
-		return {
-			record: _record,
-			title: templateInfo.title,
-			description: templateInfo.description,
-			isLoaded: _isLoaded,
-		};
-	}, [] );
+			return {
+				record: _record,
+				title: templateInfo.title,
+				description: templateInfo.description,
+				isLoaded: _isLoaded,
+			};
+		},
+		[ postType, postId ]
+	);
 
 	return {
 		isLoaded,