@wordpress/editor 14.17.1 → 14.19.0

package/src/components/post-publish-panel/maybe-category-panel.js

@@ -16,8 +16,12 @@ import { store as editorStore } from '../../store';
 function MaybeCategoryPanel() {
 	const hasNoCategory = useSelect( ( select ) => {
 		const postType = select( editorStore ).getCurrentPostType();
-		const { canUser, getEntityRecord, getTaxonomy } = select( coreStore );
-		const categoriesTaxonomy = getTaxonomy( 'category' );
+		const { canUser, getEntityRecord } = select( coreStore );
+		const categoriesTaxonomy = getEntityRecord(
+			'root',
+			'taxonomy',
+			'category'
+		);
 		const defaultCategoryId = canUser( 'read', {
 			kind: 'root',
 			name: 'site',

package/src/components/post-publish-panel/maybe-tags-panel.js

@@ -36,7 +36,11 @@ const TagsPanel = () => {
 const MaybeTagsPanel = () => {
 	const { hasTags, isPostTypeSupported } = useSelect( ( select ) => {
 		const postType = select( editorStore ).getCurrentPostType();
-		const tagsTaxonomy = select( coreStore ).getTaxonomy( 'post_tag' );
+		const tagsTaxonomy = select( coreStore ).getEntityRecord(
+			'root',
+			'taxonomy',
+			'post_tag'
+		);
 		const _isPostTypeSupported = tagsTaxonomy?.types?.includes( postType );
 		const areTagsFetched = tagsTaxonomy !== undefined;
 		const tags =

package/src/components/post-taxonomies/check.js

@@ -20,9 +20,11 @@ import { store as editorStore } from '../../store';
 export default function PostTaxonomiesCheck( { children } ) {
 	const hasTaxonomies = useSelect( ( select ) => {
 		const postType = select( editorStore ).getCurrentPostType();
-		const taxonomies = select( coreStore ).getTaxonomies( {
-			per_page: -1,
-		} );
+		const taxonomies = select( coreStore ).getEntityRecords(
+			'root',
+			'taxonomy',
+			{ per_page: -1 }
+		);
 		return taxonomies?.some( ( taxonomy ) =>
 			taxonomy.types.includes( postType )
 		);

package/src/components/post-taxonomies/flat-term-selector.js

@@ -100,10 +100,10 @@ export function FlatTermSelector( { slug, __nextHasNoMarginBottom } ) {
 		( select ) => {
 			const { getCurrentPost, getEditedPostAttribute } =
 				select( editorStore );
-			const { getEntityRecords, getTaxonomy, hasFinishedResolution } =
+			const { getEntityRecords, getEntityRecord, hasFinishedResolution } =
 				select( coreStore );
 			const post = getCurrentPost();
-			const _taxonomy = getTaxonomy( slug );
+			const _taxonomy = getEntityRecord( 'root', 'taxonomy', slug );
 			const _termIds = _taxonomy
 				? getEditedPostAttribute( _taxonomy.rest_base )
 				: EMPTY_ARRAY;

package/src/components/post-taxonomies/hierarchical-term-selector.js

@@ -175,9 +175,9 @@ export function HierarchicalTermSelector( { slug } ) {
 		( select ) => {
 			const { getCurrentPost, getEditedPostAttribute } =
 				select( editorStore );
-			const { getTaxonomy, getEntityRecords, isResolving } =
+			const { getEntityRecord, getEntityRecords, isResolving } =
 				select( coreStore );
-			const _taxonomy = getTaxonomy( slug );
+			const _taxonomy = getEntityRecord( 'root', 'taxonomy', slug );
 			const post = getCurrentPost();
 
 			return {

package/src/components/post-taxonomies/index.js

@@ -18,7 +18,11 @@ export function PostTaxonomies( { taxonomyWrapper = identity } ) {
 	const { postType, taxonomies } = useSelect( ( select ) => {
 		return {
 			postType: select( editorStore ).getCurrentPostType(),
-			taxonomies: select( coreStore ).getTaxonomies( { per_page: -1 } ),
+			taxonomies: select( coreStore ).getEntityRecords(
+				'root',
+				'taxonomy',
+				{ per_page: -1 }
+			),
 		};
 	}, [] );
 	const visibleTaxonomies = ( taxonomies ?? [] ).filter(

package/src/components/post-taxonomies/test/index.js

@@ -44,6 +44,19 @@ describe( 'PostTaxonomies', () => {
 		},
 	};
 
+	const allTaxonomies = [ genresTaxonomy, categoriesTaxonomy ];
+
+	const hidesUI = [
+		genresTaxonomy,
+		{
+			...categoriesTaxonomy,
+			types: [ 'post', 'page', 'book' ],
+			visibility: {
+				show_ui: false,
+			},
+		},
+	];
+
 	beforeEach( () => {
 		jest.spyOn( select( editorStore ), 'getCurrentPost' ).mockReturnValue( {
 			_links: {
@@ -70,8 +83,8 @@ describe( 'PostTaxonomies', () => {
 			},
 		} );
 
-		jest.spyOn( select( coreStore ), 'getTaxonomy' ).mockImplementation(
-			( slug ) => {
+		jest.spyOn( select( coreStore ), 'getEntityRecord' ).mockImplementation(
+			( kind, name, slug ) => {
 				switch ( slug ) {
 					case 'category': {
 						return categoriesTaxonomy;
@@ -91,8 +104,11 @@ describe( 'PostTaxonomies', () => {
 			select( editorStore ),
 			'getCurrentPostType'
 		).mockReturnValue( 'page' );
-		jest.spyOn( select( coreStore ), 'getTaxonomies' ).mockReturnValue(
-			taxonomies
+		jest.spyOn(
+			select( coreStore ),
+			'getEntityRecords'
+		).mockImplementation( ( kind, name ) =>
+			kind === 'root' && name === 'taxonomy' ? taxonomies : null
 		);
 
 		const { container } = render( <PostTaxonomies /> );
@@ -105,10 +121,12 @@ describe( 'PostTaxonomies', () => {
 			select( editorStore ),
 			'getCurrentPostType'
 		).mockReturnValue( 'book' );
-		jest.spyOn( select( coreStore ), 'getTaxonomies' ).mockReturnValue( [
-			genresTaxonomy,
-			categoriesTaxonomy,
-		] );
+		jest.spyOn(
+			select( coreStore ),
+			'getEntityRecords'
+		).mockImplementation( ( kind, name ) =>
+			kind === 'root' && name === 'taxonomy' ? allTaxonomies : null
+		);
 
 		render( <PostTaxonomies /> );
 
@@ -129,16 +147,12 @@ describe( 'PostTaxonomies', () => {
 			select( editorStore ),
 			'getCurrentPostType'
 		).mockReturnValue( 'book' );
-		jest.spyOn( select( coreStore ), 'getTaxonomies' ).mockReturnValue( [
-			genresTaxonomy,
-			{
-				...categoriesTaxonomy,
-				types: [ 'post', 'page', 'book' ],
-				visibility: {
-					show_ui: false,
-				},
-			},
-		] );
+		jest.spyOn(
+			select( coreStore ),
+			'getEntityRecords'
+		).mockImplementation( ( kind, name ) =>
+			kind === 'root' && name === 'taxonomy' ? hidesUI : null
+		);
 
 		render( <PostTaxonomies /> );
 

package/src/components/post-template/block-theme.js

@@ -4,12 +4,18 @@
 import { useSelect, useDispatch } from '@wordpress/data';
 import { decodeEntities } from '@wordpress/html-entities';
 import { DropdownMenu, MenuGroup, MenuItem } from '@wordpress/components';
+import { useState, useMemo } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { useEntityRecord, store as coreStore } from '@wordpress/core-data';
 import { check } from '@wordpress/icons';
 import { store as noticesStore } from '@wordpress/notices';
 import { store as preferencesStore } from '@wordpress/preferences';
 
+/**
+ * Internal dependencies
+ */
+import PostPanelRow from '../post-panel-row';
+
 /**
  * Internal dependencies
  */
@@ -19,11 +25,6 @@ import ResetDefaultTemplate from './reset-default-template';
 import { unlock } from '../../lock-unlock';
 import CreateNewTemplate from './create-new-template';
 
-const POPOVER_PROPS = {
-	className: 'editor-post-template__dropdown',
-	placement: 'bottom-start',
-};
-
 export default function BlockThemeControl( { id } ) {
 	const {
 		isTemplateHidden,
@@ -52,7 +53,9 @@ export default function BlockThemeControl( { id } ) {
 		id
 	);
 	const { createSuccessNotice } = useDispatch( noticesStore );
-	const { setRenderingMode } = useDispatch( editorStore );
+	const { setRenderingMode, setDefaultRenderingMode } = unlock(
+		useDispatch( editorStore )
+	);
 
 	const canCreateTemplate = useSelect(
 		( select ) =>
@@ -63,6 +66,21 @@ export default function BlockThemeControl( { id } ) {
 		[]
 	);
 
+	const [ popoverAnchor, setPopoverAnchor ] = useState( null );
+	// Memoize popoverProps to avoid returning a new object every time.
+	const popoverProps = useMemo(
+		() => ( {
+			// Anchor the popover to the middle of the entire row so that it doesn't
+			// move around when the label changes.
+			anchor: popoverAnchor,
+			className: 'editor-post-template__dropdown',
+			placement: 'left-start',
+			offset: 36,
+			shift: true,
+		} ),
+		[ popoverAnchor ]
+	);
+
 	if ( ! hasResolved ) {
 		return null;
 	}
@@ -90,60 +108,62 @@ export default function BlockThemeControl( { id } ) {
 		}
 	};
 	return (
-		<DropdownMenu
-			popoverProps={ POPOVER_PROPS }
-			focusOnMount
-			toggleProps={ {
-				size: 'compact',
-				variant: 'tertiary',
-				tooltipPosition: 'middle left',
-			} }
-			label={ __( 'Template options' ) }
-			text={ decodeEntities( template.title ) }
-			icon={ null }
-		>
-			{ ( { onClose } ) => (
-				<>
-					<MenuGroup>
-						{ canCreateTemplate && (
+		<PostPanelRow label={ __( 'Template' ) } ref={ setPopoverAnchor }>
+			<DropdownMenu
+				popoverProps={ popoverProps }
+				focusOnMount
+				toggleProps={ {
+					size: 'compact',
+					variant: 'tertiary',
+					tooltipPosition: 'middle left',
+				} }
+				label={ __( 'Template options' ) }
+				text={ decodeEntities( template.title ) }
+				icon={ null }
+			>
+				{ ( { onClose } ) => (
+					<>
+						<MenuGroup>
+							{ canCreateTemplate && (
+								<MenuItem
+									onClick={ () => {
+										onNavigateToEntityRecord( {
+											postId: template.id,
+											postType: 'wp_template',
+										} );
+										onClose();
+										mayShowTemplateEditNotice();
+									} }
+								>
+									{ __( 'Edit template' ) }
+								</MenuItem>
+							) }
+
+							<SwapTemplateButton onClick={ onClose } />
+							<ResetDefaultTemplate onClick={ onClose } />
+							{ canCreateTemplate && (
+								<CreateNewTemplate onClick={ onClose } />
+							) }
+						</MenuGroup>
+						<MenuGroup>
 							<MenuItem
+								icon={ ! isTemplateHidden ? check : undefined }
+								isSelected={ ! isTemplateHidden }
+								role="menuitemcheckbox"
 								onClick={ () => {
-									onNavigateToEntityRecord( {
-										postId: template.id,
-										postType: 'wp_template',
-									} );
-									onClose();
-									mayShowTemplateEditNotice();
+									const newRenderingMode = isTemplateHidden
+										? 'template-locked'
+										: 'post-only';
+									setRenderingMode( newRenderingMode );
+									setDefaultRenderingMode( newRenderingMode );
 								} }
 							>
-								{ __( 'Edit template' ) }
+								{ __( 'Show template' ) }
 							</MenuItem>
-						) }
-
-						<SwapTemplateButton onClick={ onClose } />
-						<ResetDefaultTemplate onClick={ onClose } />
-						{ canCreateTemplate && (
-							<CreateNewTemplate onClick={ onClose } />
-						) }
-					</MenuGroup>
-					<MenuGroup>
-						<MenuItem
-							icon={ ! isTemplateHidden ? check : undefined }
-							isSelected={ ! isTemplateHidden }
-							role="menuitemcheckbox"
-							onClick={ () => {
-								setRenderingMode(
-									isTemplateHidden
-										? 'template-locked'
-										: 'post-only'
-								);
-							} }
-						>
-							{ __( 'Show template' ) }
-						</MenuItem>
-					</MenuGroup>
-				</>
-			) }
-		</DropdownMenu>
+						</MenuGroup>
+					</>
+				) }
+			</DropdownMenu>
+		</PostPanelRow>
 	);
 }

package/src/components/post-template/classic-theme.js

@@ -16,11 +16,7 @@ import { store as noticesStore } from '@wordpress/notices';
 import { store as editorStore } from '../../store';
 import CreateNewTemplateModal from './create-new-template-modal';
 import { useAllowSwitchingTemplates } from './hooks';
-
-const POPOVER_PROPS = {
-	className: 'editor-post-template__dropdown',
-	placement: 'bottom-start',
-};
+import PostPanelRow from '../post-panel-row';
 
 function PostTemplateToggle( { isOpen, onClick } ) {
 	const templateTitle = useSelect( ( select ) => {
@@ -216,17 +212,37 @@ function PostTemplateDropdownContent( { onClose } ) {
 }
 
 function ClassicThemeControl() {
+	const [ popoverAnchor, setPopoverAnchor ] = useState( null );
+	// Memoize popoverProps to avoid returning a new object every time.
+	const popoverProps = useMemo(
+		() => ( {
+			// Anchor the popover to the middle of the entire row so that it doesn't
+			// move around when the label changes.
+			anchor: popoverAnchor,
+			className: 'editor-post-template__dropdown',
+			placement: 'left-start',
+			offset: 36,
+			shift: true,
+		} ),
+		[ popoverAnchor ]
+	);
+
 	return (
-		<Dropdown
-			popoverProps={ POPOVER_PROPS }
-			focusOnMount
-			renderToggle={ ( { isOpen, onToggle } ) => (
-				<PostTemplateToggle isOpen={ isOpen } onClick={ onToggle } />
-			) }
-			renderContent={ ( { onClose } ) => (
-				<PostTemplateDropdownContent onClose={ onClose } />
-			) }
-		/>
+		<PostPanelRow label={ __( 'Template' ) } ref={ setPopoverAnchor }>
+			<Dropdown
+				popoverProps={ popoverProps }
+				focusOnMount
+				renderToggle={ ( { isOpen, onToggle } ) => (
+					<PostTemplateToggle
+						isOpen={ isOpen }
+						onClick={ onToggle }
+					/>
+				) }
+				renderContent={ ( { onClose } ) => (
+					<PostTemplateDropdownContent onClose={ onClose } />
+				) }
+			/>
+		</PostPanelRow>
 	);
 }
 

package/src/components/post-template/create-new-template-modal.js

@@ -126,6 +126,7 @@ export default function CreateNewTemplateModal( { onClose } ) {
 						placeholder={ DEFAULT_TITLE }
 						disabled={ isBusy }
 						help={ __(
+							// eslint-disable-next-line no-restricted-syntax -- 'sidebar' is a common web design term for layouts
 							'Describe the template, e.g. "Post with sidebar". A custom template can be manually applied to any post or page.'
 						) }
 					/>

package/src/components/post-template/panel.js

@@ -2,7 +2,6 @@
  * WordPress dependencies
  */
 import { useSelect } from '@wordpress/data';
-import { __ } from '@wordpress/i18n';
 import { store as coreStore } from '@wordpress/core-data';
 
 /**
@@ -11,7 +10,6 @@ import { store as coreStore } from '@wordpress/core-data';
 import { store as editorStore } from '../../store';
 import ClassicThemeControl from './classic-theme';
 import BlockThemeControl from './block-theme';
-import PostPanelRow from '../post-panel-row';
 
 /**
  * Displays the template controls based on the current editor settings and user permissions.
@@ -65,19 +63,11 @@ export default function PostTemplatePanel() {
 	}, [] );
 
 	if ( ( ! isBlockTheme || ! canViewTemplates ) && isVisible ) {
-		return (
-			<PostPanelRow label={ __( 'Template' ) }>
-				<ClassicThemeControl />
-			</PostPanelRow>
-		);
+		return <ClassicThemeControl />;
 	}
 
 	if ( isBlockTheme && !! templateId ) {
-		return (
-			<PostPanelRow label={ __( 'Template' ) }>
-				<BlockThemeControl id={ templateId } />
-			</PostPanelRow>
-		);
+		return <BlockThemeControl id={ templateId } />;
 	}
 	return null;
 }

package/src/components/post-text-editor/style.scss

@@ -41,8 +41,6 @@ textarea.editor-post-text-editor {
 
 	&::-moz-placeholder {
 		color: $dark-gray-placeholder;
-		// Override Firefox default.
-		opacity: 1;
 	}
 
 	&:-ms-input-placeholder {

package/src/components/preferences-modal/block-visibility.js

@@ -14,6 +14,7 @@ import { store as editorStore } from '../../store';
 import { unlock } from '../../lock-unlock';
 
 const { BlockManager } = unlock( blockEditorPrivateApis );
+const EMPTY_ARRAY = [];
 
 export default function BlockVisibility() {
 	const { showBlockTypes, hideBlockTypes } = unlock(
@@ -31,7 +32,7 @@ export default function BlockVisibility() {
 				select( editorStore ).getEditorSettings().allowedBlockTypes,
 			hiddenBlockTypes:
 				select( preferencesStore ).get( 'core', 'hiddenBlockTypes' ) ??
-				[],
+				EMPTY_ARRAY,
 		};
 	}, [] );
 

package/src/components/preferences-modal/index.js

@@ -88,7 +88,7 @@ function PreferencesModalContents( { extraSections = {} } ) {
 									scope="core"
 									featureName="showListViewByDefault"
 									help={ __(
-										'Opens the List View sidebar by default.'
+										'Opens the List View panel by default.'
 									) }
 									label={ __( 'Always open List View' ) }
 								/>

package/src/components/preview-dropdown/index.js

@@ -56,7 +56,9 @@ export default function PreviewDropdown( { forceIsAutosaveable, disabled } ) {
 			templateId: getCurrentTemplateId(),
 		};
 	}, [] );
-	const { setDeviceType, setRenderingMode } = useDispatch( editorStore );
+	const { setDeviceType, setRenderingMode, setDefaultRenderingMode } = unlock(
+		useDispatch( editorStore )
+	);
 	const { resetZoomLevel } = unlock( useDispatch( blockEditorStore ) );
 
 	const handleDevicePreviewChange = ( newDeviceType ) => {
@@ -160,11 +162,11 @@ export default function PreviewDropdown( { forceIsAutosaveable, disabled } ) {
 								isSelected={ ! isTemplateHidden }
 								role="menuitemcheckbox"
 								onClick={ () => {
-									setRenderingMode(
-										isTemplateHidden
-											? 'template-locked'
-											: 'post-only'
-									);
+									const newRenderingMode = isTemplateHidden
+										? 'template-locked'
+										: 'post-only';
+									setRenderingMode( newRenderingMode );
+									setDefaultRenderingMode( newRenderingMode );
 								} }
 							>
 								{ __( 'Show template' ) }

package/src/components/provider/index.js

@@ -56,11 +56,6 @@ const NON_CONTEXTUAL_POST_TYPES = [
 	'wp_template_part',
 ];
 
-/**
- * These are rendering modes that the editor supports.
- */
-const RENDERING_MODES = [ 'post-only', 'template-locked' ];
-
 /**
  * Depending on the post, template and template mode,
  * returns the appropriate blocks and change handlers for the block editor provider.
@@ -183,34 +178,28 @@ export const ExperimentalEditorProvider = withRegistryProvider(
 					getEditorSelection,
 					getRenderingMode,
 					__unstableIsEditorReady,
-				} = select( editorStore );
-				const {
-					getEntitiesConfig,
-					getPostType,
-					hasFinishedResolution,
-				} = select( coreStore );
+					getDefaultRenderingMode,
+				} = unlock( select( editorStore ) );
+				const { getEntitiesConfig } = select( coreStore );
 
-				const postTypeSupports = getPostType( post.type )?.supports;
-				const hasLoadedPostObject = hasFinishedResolution(
-					'getPostType',
-					[ post.type ]
-				);
-
-				const _defaultMode = Array.isArray( postTypeSupports?.editor )
-					? postTypeSupports.editor.find(
-							( features ) => 'default-mode' in features
-					  )?.[ 'default-mode' ]
-					: undefined;
-				const hasDefaultMode = RENDERING_MODES.includes( _defaultMode );
+				const _defaultMode = getDefaultRenderingMode( post.type );
+				/**
+				 * To avoid content "flash", wait until rendering mode has been resolved.
+				 * This is important for the initial render of the editor.
+				 *
+				 * - Wait for template to be resolved if the default mode is 'template-locked'.
+				 * - Wait for default mode to be resolved otherwise.
+				 */
+				const hasResolvedMode =
+					_defaultMode === 'template-locked'
+						? hasTemplate
+						: _defaultMode !== undefined;
 
 				return {
 					editorSettings: getEditorSettings(),
-					isReady: __unstableIsEditorReady() && hasLoadedPostObject,
+					isReady: __unstableIsEditorReady() && hasResolvedMode,
 					mode: getRenderingMode(),
-					defaultMode:
-						hasTemplate && hasDefaultMode
-							? _defaultMode
-							: 'post-only',
+					defaultMode: _defaultMode,
 					selection: getEditorSelection(),
 					postTypeEntities:
 						post.type === 'wp_template'
@@ -221,7 +210,7 @@ export const ExperimentalEditorProvider = withRegistryProvider(
 			[ post.type, hasTemplate ]
 		);
 
-		const shouldRenderTemplate = !! template && mode !== 'post-only';
+		const shouldRenderTemplate = hasTemplate && mode !== 'post-only';
 		const rootLevelPost = shouldRenderTemplate ? template : post;
 		const defaultBlockContext = useMemo( () => {
 			const postContext = {};
@@ -338,7 +327,9 @@ export const ExperimentalEditorProvider = withRegistryProvider(
 
 		// Sets the right rendering mode when loading the editor.
 		useEffect( () => {
-			setRenderingMode( defaultMode );
+			if ( defaultMode ) {
+				setRenderingMode( defaultMode );
+			}
 		}, [ defaultMode, setRenderingMode ] );
 
 		useHideBlocksFromInserter( post.type, mode );

package/src/components/sidebar/header.js

@@ -22,7 +22,7 @@ const SidebarHeader = ( _, ref ) => {
 		return {
 			documentLabel:
 				// translators: Default label for the Document sidebar tab, not selected.
-				getPostTypeLabel() || _x( 'Document', 'noun, sidebar' ),
+				getPostTypeLabel() || _x( 'Document', 'noun, panel' ),
 		};
 	}, [] );
 

package/src/components/sidebar/index.js

@@ -103,7 +103,7 @@ const SidebarContent = ( {
 			headerClassName="editor-sidebar__panel-tabs"
 			title={
 				/* translators: button label text should, if possible, be under 16 characters. */
-				_x( 'Settings', 'sidebar button label' )
+				_x( 'Settings', 'panel button label' )
 			}
 			toggleShortcut={ keyboardShortcut }
 			icon={ isRTL() ? drawerLeft : drawerRight }