@wordpress/edit-site 5.23.0 → 5.24.1

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

@@ -7,13 +7,10 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import {
-	__unstableComposite as Composite,
-	__unstableUseCompositeState as useCompositeState,
-	__unstableCompositeItem as CompositeItem,
 	Disabled,
 	TabPanel,
+	privateApis as componentsPrivateApis,
 } from '@wordpress/components';
-
 import { __, sprintf } from '@wordpress/i18n';
 import {
 	getCategories,
@@ -43,6 +40,12 @@ const { ExperimentalBlockEditorProvider, useGlobalStyle } = unlock(
 	blockEditorPrivateApis
 );
 
+const {
+	CompositeV2: Composite,
+	CompositeItemV2: CompositeItem,
+	useCompositeStoreV2: useCompositeStore,
+} = unlock( componentsPrivateApis );
+
 // 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,
@@ -66,6 +69,8 @@ const STYLE_BOOK_IFRAME_STYLES = `
 		padding: 16px;
 		width: 100%;
 		box-sizing: border-box;
+		scroll-margin-top: 32px;
+		scroll-margin-bottom: 32px;
 	}
 
 	.edit-site-style-book__example.is-selected {
@@ -332,6 +337,7 @@ const StyleBookBody = ( {
 				}
 				isSelected={ isSelected }
 				onSelect={ onSelect }
+				key={ category }
 			/>
 		</Iframe>
 	);
@@ -339,12 +345,14 @@ const StyleBookBody = ( {
 
 const Examples = memo(
 	( { className, examples, category, label, isSelected, onSelect } ) => {
-		const composite = useCompositeState( { orientation: 'vertical' } );
+		const compositeStore = useCompositeStore( { orientation: 'vertical' } );
+
 		return (
 			<Composite
-				{ ...composite }
+				store={ compositeStore }
 				className={ className }
 				aria-label={ label }
+				role="grid"
 			>
 				{ examples
 					.filter( ( example ) =>
@@ -354,7 +362,6 @@ const Examples = memo(
 						<Example
 							key={ example.name }
 							id={ `example-${ example.name }` }
-							composite={ composite }
 							title={ example.title }
 							blocks={ example.blocks }
 							isSelected={ isSelected( example.name ) }
@@ -368,7 +375,7 @@ const Examples = memo(
 	}
 );
 
-const Example = ( { composite, id, title, blocks, isSelected, onClick } ) => {
+const Example = ( { id, title, blocks, isSelected, onClick } ) => {
 	const originalSettings = useSelect(
 		( select ) => select( blockEditorStore ).getSettings(),
 		[]
@@ -385,35 +392,41 @@ const Example = ( { composite, id, title, blocks, isSelected, onClick } ) => {
 	);
 
 	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 }
+		<div role="row">
+			<div role="gridcell">
+				<CompositeItem
+					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
+					) }
+					render={ <div /> }
+					role="button"
+					onClick={ onClick }
+				>
+					<span className="edit-site-style-book__example-title">
+						{ title }
+					</span>
+					<div
+						className="edit-site-style-book__example-preview"
+						aria-hidden
 					>
-						<BlockList renderAppender={ false } />
-					</ExperimentalBlockEditorProvider>
-				</Disabled>
+						<Disabled className="edit-site-style-book__example-preview__content">
+							<ExperimentalBlockEditorProvider
+								value={ renderedBlocks }
+								settings={ settings }
+							>
+								<BlockList renderAppender={ false } />
+							</ExperimentalBlockEditorProvider>
+						</Disabled>
+					</div>
+				</CompositeItem>
 			</div>
-		</CompositeItem>
+		</div>
 	);
 };
 

package/src/components/sync-state-with-url/use-init-edited-entity-from-url.js

@@ -28,21 +28,46 @@ const postTypesWithoutParentTemplate = [
 ];
 
 function useResolveEditedEntityAndContext( { postId, postType } ) {
-	const { isRequestingSite, homepageId, url } = useSelect( ( select ) => {
-		const { getSite, getUnstableBase } = select( coreDataStore );
-		const siteData = getSite();
-		const base = getUnstableBase();
-
-		return {
-			isRequestingSite: ! base,
-			homepageId:
-				siteData?.show_on_front === 'page'
-					? siteData.page_on_front
-					: null,
-			url: base?.home,
-		};
-	}, [] );
+	const { hasLoadedAllDependencies, homepageId, url, frontPageTemplateId } =
+		useSelect( ( select ) => {
+			const { getSite, getUnstableBase, getEntityRecords } =
+				select( coreDataStore );
+			const siteData = getSite();
+			const base = getUnstableBase();
+			const templates = getEntityRecords(
+				'postType',
+				TEMPLATE_POST_TYPE,
+				{
+					per_page: -1,
+				}
+			);
+			let _frontPateTemplateId;
+			if ( templates ) {
+				const frontPageTemplate = templates.find(
+					( t ) => t.slug === 'front-page'
+				);
+				_frontPateTemplateId = frontPageTemplate
+					? frontPageTemplate.id
+					: false;
+			}
 
+			return {
+				hasLoadedAllDependencies: !! base && !! siteData,
+				homepageId:
+					siteData?.show_on_front === 'page'
+						? siteData.page_on_front.toString()
+						: null,
+				url: base?.home,
+				frontPageTemplateId: _frontPateTemplateId,
+			};
+		}, [] );
+
+	/**
+	 * This is a hook that recreates the logic to resolve a template for a given WordPress postID postTypeId
+	 * in order to match the frontend as closely as possible in the site editor.
+	 *
+	 * It is not possible to rely on the server logic because there maybe unsaved changes that impact the template resolution.
+	 */
 	const resolvedTemplateId = useSelect(
 		( select ) => {
 			// If we're rendering a post type that doesn't have a template
@@ -62,6 +87,22 @@ function useResolveEditedEntityAndContext( { postId, postType } ) {
 				postTypeToResolve,
 				postIdToResolve
 			) {
+				// For the front page, we always use the front page template if existing.
+				if (
+					postTypeToResolve === 'page' &&
+					homepageId === postIdToResolve
+				) {
+					// We're still checking whether the front page template exists.
+					// Don't resolve the template yet.
+					if ( frontPageTemplateId === undefined ) {
+						return undefined;
+					}
+
+					if ( !! frontPageTemplateId ) {
+						return frontPageTemplateId;
+					}
+				}
+
 				const editedEntity = getEditedEntityRecord(
 					'postType',
 					postTypeToResolve,
@@ -91,6 +132,10 @@ function useResolveEditedEntityAndContext( { postId, postType } ) {
 				} );
 			}
 
+			if ( ! hasLoadedAllDependencies ) {
+				return undefined;
+			}
+
 			// If we're rendering a specific page, post... we need to resolve its template.
 			if ( postType && postId ) {
 				return resolveTemplateForPostTypeAndId( postType, postId );
@@ -102,12 +147,19 @@ function useResolveEditedEntityAndContext( { postId, postType } ) {
 			}
 
 			// If we're not rendering a specific page, use the front page template.
-			if ( ! isRequestingSite && url ) {
+			if ( url ) {
 				const template = __experimentalGetTemplateForLink( url );
 				return template?.id;
 			}
 		},
-		[ homepageId, isRequestingSite, url, postId, postType ]
+		[
+			homepageId,
+			hasLoadedAllDependencies,
+			url,
+			postId,
+			postType,
+			frontPageTemplateId,
+		]
 	);
 
 	const context = useMemo( () => {
@@ -130,7 +182,7 @@ function useResolveEditedEntityAndContext( { postId, postType } ) {
 		return { isReady: true, postType, postId, context };
 	}
 
-	if ( ( postType && postId ) || homepageId || ! isRequestingSite ) {
+	if ( hasLoadedAllDependencies ) {
 		return {
 			isReady: resolvedTemplateId !== undefined,
 			postType: TEMPLATE_POST_TYPE,

package/src/components/welcome-guide/page.js

@@ -23,8 +23,8 @@ export default function WelcomeGuidePage() {
 			'core/edit-site',
 			'welcomeGuide'
 		);
-		const { hasPageContentFocus } = select( editSiteStore );
-		return isPageActive && ! isEditorActive && hasPageContentFocus();
+		const { isPage } = select( editSiteStore );
+		return isPageActive && ! isEditorActive && isPage();
 	}, [] );
 
 	if ( ! isVisible ) {

package/src/components/welcome-guide/template.js

@@ -5,6 +5,7 @@ import { useDispatch, useSelect } from '@wordpress/data';
 import { Guide } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { store as preferencesStore } from '@wordpress/preferences';
+import { store as editorStore } from '@wordpress/editor';
 
 /**
  * Internal dependencies
@@ -23,12 +24,13 @@ export default function WelcomeGuideTemplate() {
 			'core/edit-site',
 			'welcomeGuide'
 		);
-		const { isPage, hasPageContentFocus } = select( editSiteStore );
+		const { isPage } = select( editSiteStore );
+		const { getRenderingMode } = select( editorStore );
 		return (
 			isTemplateActive &&
 			! isEditorActive &&
 			isPage() &&
-			! hasPageContentFocus()
+			getRenderingMode() === 'template-only'
 		);
 	}, [] );
 

package/src/hooks/commands/use-edit-mode-commands.js

@@ -24,6 +24,7 @@ import { privateApis as routerPrivateApis } from '@wordpress/router';
 import { store as preferencesStore } from '@wordpress/preferences';
 import { store as interfaceStore } from '@wordpress/interface';
 import { store as noticesStore } from '@wordpress/notices';
+import { store as editorStore } from '@wordpress/editor';
 
 /**
  * Internal dependencies
@@ -42,15 +43,18 @@ const { useHistory } = unlock( routerPrivateApis );
 
 function usePageContentFocusCommands() {
 	const { record: template } = useEditedEntityRecord();
-	const { isPage, canvasMode, hasPageContentFocus } = useSelect(
-		( select ) => ( {
-			isPage: select( editSiteStore ).isPage(),
-			canvasMode: unlock( select( editSiteStore ) ).getCanvasMode(),
-			hasPageContentFocus: select( editSiteStore ).hasPageContentFocus(),
-		} ),
-		[]
-	);
-	const { setHasPageContentFocus } = useDispatch( editSiteStore );
+	const { isPage, canvasMode, renderingMode } = useSelect( ( select ) => {
+		const { isPage: _isPage, getCanvasMode } = unlock(
+			select( editSiteStore )
+		);
+		const { getRenderingMode } = select( editorStore );
+		return {
+			isPage: _isPage(),
+			canvasMode: getCanvasMode(),
+			renderingMode: getRenderingMode(),
+		};
+	}, [] );
+	const { setRenderingMode } = useDispatch( editorStore );
 
 	if ( ! isPage || canvasMode !== 'edit' ) {
 		return { isLoading: false, commands: [] };
@@ -58,7 +62,7 @@ function usePageContentFocusCommands() {
 
 	const commands = [];
 
-	if ( hasPageContentFocus ) {
+	if ( renderingMode !== 'template-only' ) {
 		commands.push( {
 			name: 'core/switch-to-template-focus',
 			/* translators: %1$s: template title */
@@ -68,7 +72,7 @@ function usePageContentFocusCommands() {
 			),
 			icon: layout,
 			callback: ( { close } ) => {
-				setHasPageContentFocus( false );
+				setRenderingMode( 'template-only' );
 				close();
 			},
 		} );
@@ -78,7 +82,7 @@ function usePageContentFocusCommands() {
 			label: __( 'Back to page' ),
 			icon: page,
 			callback: ( { close } ) => {
-				setHasPageContentFocus( true );
+				setRenderingMode( 'template-locked' );
 				close();
 			},
 		} );
@@ -122,8 +126,10 @@ function useManipulateDocumentCommands() {
 	const { isLoaded, record: template } = useEditedEntityRecord();
 	const { removeTemplate, revertTemplate } = useDispatch( editSiteStore );
 	const history = useHistory();
-	const hasPageContentFocus = useSelect(
-		( select ) => select( editSiteStore ).hasPageContentFocus(),
+	const isEditingPage = useSelect(
+		( select ) =>
+			select( editSiteStore ).isPage() &&
+			select( editorStore ).getRenderingMode() !== 'template-only',
 		[]
 	);
 
@@ -133,7 +139,7 @@ function useManipulateDocumentCommands() {
 
 	const commands = [];
 
-	if ( isTemplateRevertable( template ) && ! hasPageContentFocus ) {
+	if ( isTemplateRevertable( template ) && ! isEditingPage ) {
 		const label =
 			template.type === TEMPLATE_POST_TYPE
 				? /* translators: %1$s: template title */
@@ -157,7 +163,7 @@ function useManipulateDocumentCommands() {
 		} );
 	}
 
-	if ( isTemplateRemovable( template ) && ! hasPageContentFocus ) {
+	if ( isTemplateRemovable( template ) && ! isEditingPage ) {
 		const label =
 			template.type === TEMPLATE_POST_TYPE
 				? /* translators: %1$s: template title */

package/src/store/actions.js

@@ -575,6 +575,10 @@ export const switchEditorMode =
 export const setHasPageContentFocus =
 	( hasPageContentFocus ) =>
 	( { dispatch, registry } ) => {
+		deprecated( `dispatch( 'core/edit-site' ).setHasPageContentFocus`, {
+			since: '6.5',
+		} );
+
 		if ( hasPageContentFocus ) {
 			registry.dispatch( blockEditorStore ).clearSelectedBlock();
 		}
@@ -599,7 +603,7 @@ export const toggleDistractionFree =
 			registry.batch( () => {
 				registry
 					.dispatch( preferencesStore )
-					.set( 'core/edit-site', 'fixedToolbar', false );
+					.set( 'core/edit-site', 'fixedToolbar', true );
 				dispatch.setIsInserterOpened( false );
 				dispatch.setIsListViewOpened( false );
 				dispatch.closeGeneralSidebar();

package/src/store/private-actions.js

@@ -11,7 +11,7 @@ import { store as preferencesStore } from '@wordpress/preferences';
  */
 export const setCanvasMode =
 	( mode ) =>
-	( { registry, dispatch, select } ) => {
+	( { registry, dispatch } ) => {
 		registry.dispatch( blockEditorStore ).__unstableSetEditorMode( 'edit' );
 		dispatch( {
 			type: 'SET_CANVAS_MODE',
@@ -30,10 +30,6 @@ export const setCanvasMode =
 		) {
 			dispatch.setIsListViewOpened( true );
 		}
-		// Switch focus away from editing the template when switching to view mode.
-		if ( mode === 'view' && select.isPage() ) {
-			dispatch.setHasPageContentFocus( true );
-		}
 	};
 
 /**
@@ -49,22 +45,3 @@ export const setEditorCanvasContainerView =
 			view,
 		} );
 	};
-
-/**
- * Sets the type of page content focus. Can be one of:
- *
- * - `'disableTemplate'`: Disable the blocks belonging to the page's template.
- * - `'hideTemplate'`: Hide the blocks belonging to the page's template.
- *
- * @param {'disableTemplate'|'hideTemplate'} pageContentFocusType The type of page content focus.
- *
- * @return {Object} Action object.
- */
-export const setPageContentFocusType =
-	( pageContentFocusType ) =>
-	( { dispatch } ) => {
-		dispatch( {
-			type: 'SET_PAGE_CONTENT_FOCUS_TYPE',
-			pageContentFocusType,
-		} );
-	};

package/src/store/private-selectors.js

@@ -1,8 +1,3 @@
-/**
- * Internal dependencies
- */
-import { hasPageContentFocus } from './selectors';
-
 /**
  * Returns the current canvas mode.
  *
@@ -24,20 +19,3 @@ export function getCanvasMode( state ) {
 export function getEditorCanvasContainerView( state ) {
 	return state.editorCanvasContainerView;
 }
-
-/**
- * Returns the type of the current page content focus, or null if there is no
- * page content focus.
- *
- * Possible values are:
- *
- * - `'disableTemplate'`: Disable the blocks belonging to the page's template.
- * - `'hideTemplate'`: Hide the blocks belonging to the page's template.
- *
- * @param {Object} state Global application state.
- *
- * @return {'disableTemplate'|'hideTemplate'|null} Type of the current page content focus.
- */
-export function getPageContentFocusType( state ) {
-	return hasPageContentFocus( state ) ? state.pageContentFocusType : null;
-}

package/src/store/reducer.js

@@ -157,43 +157,6 @@ function editorCanvasContainerView( state = undefined, action ) {
 	return state;
 }
 
-/**
- * Reducer used to track whether the editor allows only page content to be
- * edited.
- *
- * @param {boolean} state  Current state.
- * @param {Object}  action Dispatched action.
- *
- * @return {boolean} Updated state.
- */
-export function hasPageContentFocus( state = false, action ) {
-	switch ( action.type ) {
-		case 'SET_EDITED_POST':
-			return !! action.context?.postId;
-		case 'SET_HAS_PAGE_CONTENT_FOCUS':
-			return action.hasPageContentFocus;
-	}
-
-	return state;
-}
-
-/**
- * Reducer used to track the type of page content focus.
- *
- * @param {string} state  Current state.
- * @param {Object} action Dispatched action.
- *
- * @return {string} Updated state.
- */
-export function pageContentFocusType( state = 'disableTemplate', action ) {
-	switch ( action.type ) {
-		case 'SET_PAGE_CONTENT_FOCUS_TYPE':
-			return action.pageContentFocusType;
-	}
-
-	return state;
-}
-
 export default combineReducers( {
 	deviceType,
 	settings,
@@ -203,6 +166,4 @@ export default combineReducers( {
 	saveViewPanel,
 	canvasMode,
 	editorCanvasContainerView,
-	hasPageContentFocus,
-	pageContentFocusType,
 } );

package/src/store/selectors.js

@@ -7,6 +7,7 @@ import deprecated from '@wordpress/deprecated';
 import { Platform } from '@wordpress/element';
 import { store as preferencesStore } from '@wordpress/preferences';
 import { store as blockEditorStore } from '@wordpress/block-editor';
+import { store as editorStore } from '@wordpress/editor';
 
 /**
  * Internal dependencies
@@ -181,7 +182,10 @@ export const __experimentalGetInsertionPoint = createRegistrySelector(
 			return { rootClientId, insertionIndex, filterValue };
 		}
 
-		if ( hasPageContentFocus( state ) ) {
+		if (
+			isPage( state ) &&
+			select( editorStore ).getRenderingMode() !== 'template-only'
+		) {
 			const [ postContentClientId ] =
 				select( blockEditorStore ).__experimentalGetGlobalBlocksByName(
 					'core/post-content'
@@ -310,10 +314,14 @@ export function isPage( state ) {
 /**
  * Whether or not the editor allows only page content to be edited.
  *
- * @param {Object} state Global application state.
+ * @deprecated
  *
  * @return {boolean} Whether or not focus is on editing page content.
  */
-export function hasPageContentFocus( state ) {
-	return isPage( state ) ? state.hasPageContentFocus : false;
+export function hasPageContentFocus() {
+	deprecated( `select( 'core/edit-site' ).hasPageContentFocus`, {
+		since: '6.5',
+	} );
+
+	return false;
 }

package/src/store/test/actions.js

@@ -7,18 +7,19 @@ import { createRegistry } from '@wordpress/data';
 import { store as interfaceStore } from '@wordpress/interface';
 import { store as noticesStore } from '@wordpress/notices';
 import { store as preferencesStore } from '@wordpress/preferences';
+import { store as editorStore } from '@wordpress/editor';
 
 /**
  * Internal dependencies
  */
 import { store as editSiteStore } from '..';
-import { setHasPageContentFocus } from '../actions';
 
 function createRegistryWithStores() {
 	// create a registry
 	const registry = createRegistry();
 
 	// register stores
+	registry.register( editorStore );
 	registry.register( blockEditorStore );
 	registry.register( coreStore );
 	registry.register( editSiteStore );
@@ -158,7 +159,7 @@ describe( 'actions', () => {
 				registry
 					.select( preferencesStore )
 					.get( 'core/edit-site', 'fixedToolbar' )
-			).toBe( false );
+			).toBe( true );
 			expect( registry.select( editSiteStore ).isListViewOpened() ).toBe(
 				false
 			);
@@ -177,34 +178,4 @@ describe( 'actions', () => {
 			).toBe( true );
 		} );
 	} );
-
-	describe( 'setHasPageContentFocus', () => {
-		it( 'toggles the page content lock on', () => {
-			const dispatch = jest.fn();
-			const clearSelectedBlock = jest.fn();
-			const registry = {
-				dispatch: () => ( { clearSelectedBlock } ),
-			};
-			setHasPageContentFocus( true )( { dispatch, registry } );
-			expect( clearSelectedBlock ).toHaveBeenCalled();
-			expect( dispatch ).toHaveBeenCalledWith( {
-				type: 'SET_HAS_PAGE_CONTENT_FOCUS',
-				hasPageContentFocus: true,
-			} );
-		} );
-
-		it( 'toggles the page content lock off', () => {
-			const dispatch = jest.fn();
-			const clearSelectedBlock = jest.fn();
-			const registry = {
-				dispatch: () => ( { clearSelectedBlock } ),
-			};
-			setHasPageContentFocus( false )( { dispatch, registry } );
-			expect( clearSelectedBlock ).not.toHaveBeenCalled();
-			expect( dispatch ).toHaveBeenCalledWith( {
-				type: 'SET_HAS_PAGE_CONTENT_FOCUS',
-				hasPageContentFocus: false,
-			} );
-		} );
-	} );
 } );