@wordpress/editor 14.3.0 → 14.4.0

package/src/bindings/post-meta.js

@@ -2,7 +2,6 @@
  * WordPress dependencies
  */
 import { store as coreDataStore } from '@wordpress/core-data';
-import { _x } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -11,26 +10,32 @@ import { store as editorStore } from '../store';
 
 export default {
 	name: 'core/post-meta',
-	label: _x( 'Post Meta', 'block bindings source' ),
 	getPlaceholder( { args } ) {
 		return args.key;
 	},
-	getValue( { registry, context, args } ) {
-		return registry
+	getValues( { registry, context, bindings } ) {
+		const meta = registry
 			.select( coreDataStore )
 			.getEditedEntityRecord(
 				'postType',
 				context?.postType,
 				context?.postId
-			).meta?.[ args.key ];
+			)?.meta;
+		const newValues = {};
+		for ( const [ attributeName, source ] of Object.entries( bindings ) ) {
+			newValues[ attributeName ] = meta?.[ source.args.key ];
+		}
+		return newValues;
 	},
-	setValue( { registry, context, args, value } ) {
+	setValues( { registry, context, bindings } ) {
+		const newMeta = {};
+		Object.values( bindings ).forEach( ( { args, newValue } ) => {
+			newMeta[ args.key ] = newValue;
+		} );
 		registry
 			.dispatch( coreDataStore )
 			.editEntityRecord( 'postType', context?.postType, context?.postId, {
-				meta: {
-					[ args.key ]: value,
-				},
+				meta: newMeta,
 			} );
 	},
 	canUserEditValue( { select, context, args } ) {
@@ -59,11 +64,11 @@ export default {
 		}
 
 		// Check that the user has the capability to edit post meta.
-		const canUserEdit = select( coreDataStore ).canUserEditEntityRecord(
-			'postType',
-			context?.postType,
-			context?.postId
-		);
+		const canUserEdit = select( coreDataStore ).canUser( 'update', {
+			kind: 'postType',
+			name: context?.postType,
+			id: context?.postId,
+		} );
 		if ( ! canUserEdit ) {
 			return false;
 		}

package/src/components/block-settings-menu/content-only-settings-menu.js

@@ -59,10 +59,10 @@ function ContentOnlySettingsMenuItems( { clientId, onClose } ) {
 					);
 				}
 			}
-			const _canEditTemplates = select( coreStore ).canUser(
-				'create',
-				'templates'
-			);
+			const _canEditTemplates = select( coreStore ).canUser( 'create', {
+				kind: 'postType',
+				name: 'wp_template',
+			} );
 			return {
 				canEditTemplates: _canEditTemplates,
 				entity: record,

package/src/components/blog-title/index.js

@@ -27,9 +27,14 @@ export default function BlogTitle() {
 	const { editEntityRecord } = useDispatch( coreStore );
 	const { postsPageTitle, postsPageId, isTemplate, postSlug } = useSelect(
 		( select ) => {
-			const { getEntityRecord, getEditedEntityRecord } =
+			const { getEntityRecord, getEditedEntityRecord, canUser } =
 				select( coreStore );
-			const siteSettings = getEntityRecord( 'root', 'site' );
+			const siteSettings = canUser( 'read', {
+				kind: 'root',
+				name: 'site',
+			} )
+				? getEntityRecord( 'root', 'site' )
+				: undefined;
 			const _postsPageRecord = siteSettings?.page_for_posts
 				? getEditedEntityRecord(
 						'postType',

package/src/components/collapsible-block-toolbar/index.js

@@ -24,7 +24,7 @@ import { unlock } from '../../lock-unlock';
 
 const { useHasBlockToolbar } = unlock( blockEditorPrivateApis );
 
-function CollapsableBlockToolbar( { isCollapsed, onToggle } ) {
+export default function CollapsibleBlockToolbar( { isCollapsed, onToggle } ) {
 	const { blockSelectionStart } = useSelect( ( select ) => {
 		return {
 			blockSelectionStart:
@@ -73,5 +73,3 @@ function CollapsableBlockToolbar( { isCollapsed, onToggle } ) {
 		</>
 	);
 }
-
-export default CollapsableBlockToolbar;

package/src/components/collapsible-block-toolbar/style.scss

@@ -77,6 +77,3 @@
 	}
 }
 
-.editor-collapsible-block-toolbar__toggle {
-	margin-left: 2px; // Allow focus ring to be fully visible
-}

package/src/components/document-bar/style.scss

@@ -10,7 +10,7 @@
 	min-width: 0;
 	background: $gray-100;
 	border-radius: $grid-unit-05;
-	width: min(100%, 416px);
+	width: min(100%, 450px);
 
 	&:hover {
 		background-color: $gray-200;
@@ -25,10 +25,6 @@
 			background: $gray-200;
 		}
 	}
-
-	@include break-large() {
-		width: min(100%, 450px);
-	}
 }
 
 .editor-document-bar__command {

package/src/components/document-tools/style.scss

@@ -65,12 +65,12 @@
 .editor-document-tools__left {
 	display: inline-flex;
 	align-items: center;
-	padding-left: $grid-unit-20;
 	gap: $grid-unit-10;
 
-	// Some plugins add buttons here despite best practices.
-	// Push them a bit rightwards to fit the top toolbar.
-	margin-right: $grid-unit-10;
+	// Some plugins add buttons here despite best practices — accommodate them with a gap.
+	&:not(:last-child) {
+		margin-inline-end: $grid-unit-10;
+	}
 }
 
 .editor-document-tools .editor-document-tools__left > .editor-document-tools__inserter-toggle.has-icon {

package/src/components/editor-interface/style.scss

@@ -1,3 +1,7 @@
 .editor-editor-interface .entities-saved-states__panel-header {
 	height: $header-height + $border-width;
 }
+
+.editor-visual-editor {
+	flex: 1 0 auto;
+}

package/src/components/global-styles-provider/index.js

@@ -33,17 +33,24 @@ export function mergeBaseAndUserConfigs( base, user ) {
 function useGlobalStylesUserConfig() {
 	const { globalStylesId, isReady, settings, styles, _links } = useSelect(
 		( select ) => {
-			const { getEditedEntityRecord, hasFinishedResolution } =
+			const { getEditedEntityRecord, hasFinishedResolution, canUser } =
 				select( coreStore );
 			const _globalStylesId =
 				select( coreStore ).__experimentalGetCurrentGlobalStylesId();
-			const record = _globalStylesId
-				? getEditedEntityRecord(
-						'root',
-						'globalStyles',
-						_globalStylesId
-				  )
-				: undefined;
+
+			const record =
+				_globalStylesId &&
+				canUser( 'read', {
+					kind: 'root',
+					name: 'globalStyles',
+					id: _globalStylesId,
+				} )
+					? getEditedEntityRecord(
+							'root',
+							'globalStyles',
+							_globalStylesId
+					  )
+					: undefined;
 
 			let hasResolved = false;
 			if (
@@ -126,9 +133,13 @@ function useGlobalStylesUserConfig() {
 
 function useGlobalStylesBaseConfig() {
 	const baseConfig = useSelect( ( select ) => {
-		return select(
-			coreStore
-		).__experimentalGetCurrentThemeBaseGlobalStyles();
+		const { __experimentalGetCurrentThemeBaseGlobalStyles, canUser } =
+			select( coreStore );
+
+		return (
+			canUser( 'read', { kind: 'root', name: 'theme' } ) &&
+			__experimentalGetCurrentThemeBaseGlobalStyles()
+		);
 	}, [] );
 
 	return [ !! baseConfig, baseConfig ];

package/src/components/header/back-button.js

@@ -9,16 +9,16 @@ import {
 // Keeping an old name for backward compatibility.
 const slotName = '__experimentalMainDashboardButton';
 
+export const useHasBackButton = () => {
+	const fills = useSlotFills( slotName );
+	return Boolean( fills && fills.length );
+};
+
 const { Fill, Slot } = createSlotFill( slotName );
 
 const BackButton = Fill;
-const BackButtonSlot = ( { children } ) => {
+const BackButtonSlot = () => {
 	const fills = useSlotFills( slotName );
-	const hasFills = Boolean( fills && fills.length );
-
-	if ( ! hasFills ) {
-		return children;
-	}
 
 	return (
 		<Slot

package/src/components/header/index.js

@@ -1,13 +1,8 @@
-/**
- * External dependencies
- */
-import clsx from 'clsx';
-
 /**
  * WordPress dependencies
  */
 import { useSelect } from '@wordpress/data';
-import { useViewportMatch } from '@wordpress/compose';
+import { useMediaQuery, useViewportMatch } from '@wordpress/compose';
 import { __unstableMotion as motion } from '@wordpress/components';
 import { store as preferencesStore } from '@wordpress/preferences';
 import { useState } from '@wordpress/element';
@@ -17,8 +12,8 @@ import { store as blockEditorStore } from '@wordpress/block-editor';
 /**
  * Internal dependencies
  */
-import BackButton from './back-button';
-import CollapsableBlockToolbar from '../collapsible-block-toolbar';
+import BackButton, { useHasBackButton } from './back-button';
+import CollapsibleBlockToolbar from '../collapsible-block-toolbar';
 import DocumentBar from '../document-bar';
 import DocumentTools from '../document-tools';
 import MoreMenu from '../more-menu';
@@ -55,6 +50,7 @@ function Header( {
 } ) {
 	const isWideViewport = useViewportMatch( 'large' );
 	const isLargeViewport = useViewportMatch( 'medium' );
+	const isTooNarrowForDocumentBar = useMediaQuery( '(max-width: 403px)' );
 	const {
 		isTextEditor,
 		isPublishSidebarOpened,
@@ -82,21 +78,25 @@ function Header( {
 		};
 	}, [] );
 
-	const hasTopToolbar = isLargeViewport && hasFixedToolbar;
-
 	const [ isBlockToolsCollapsed, setIsBlockToolsCollapsed ] =
 		useState( true );
 
+	const hasCenter = isBlockToolsCollapsed && ! isTooNarrowForDocumentBar;
+	const hasBackButton = useHasBackButton();
+
 	// The edit-post-header classname is only kept for backward compatibilty
 	// as some plugins might be relying on its presence.
 	return (
 		<div className="editor-header edit-post-header">
-			<motion.div
-				variants={ backButtonVariations }
-				transition={ { type: 'tween' } }
-			>
-				<BackButton.Slot />
-			</motion.div>
+			{ hasBackButton && (
+				<motion.div
+					className="editor-header__back-button"
+					variants={ backButtonVariations }
+					transition={ { type: 'tween' } }
+				>
+					<BackButton.Slot />
+				</motion.div>
+			) }
 			<motion.div
 				variants={ toolbarVariations }
 				className="editor-header__toolbar"
@@ -105,21 +105,22 @@ function Header( {
 				<DocumentTools
 					disableBlockTools={ forceDisableBlockTools || isTextEditor }
 				/>
-				{ hasTopToolbar && (
-					<CollapsableBlockToolbar
+				{ hasFixedToolbar && isLargeViewport && (
+					<CollapsibleBlockToolbar
 						isCollapsed={ isBlockToolsCollapsed }
 						onToggle={ setIsBlockToolsCollapsed }
 					/>
 				) }
-				<div
-					className={ clsx( 'editor-header__center', {
-						'is-collapsed':
-							! isBlockToolsCollapsed && hasTopToolbar,
-					} ) }
+			</motion.div>
+			{ hasCenter && (
+				<motion.div
+					className="editor-header__center"
+					variants={ toolbarVariations }
+					transition={ { type: 'tween' } }
 				>
 					<DocumentBar title={ title } icon={ icon } />
-				</div>
-			</motion.div>
+				</motion.div>
+			) }
 			<motion.div
 				variants={ toolbarVariations }
 				transition={ { type: 'tween' } }

package/src/components/header/style.scss

@@ -1,8 +1,18 @@
 .editor-header {
 	height: $header-height;
 	background: $white;
-	display: flex;
-	flex-wrap: wrap;
+	display: grid;
+	grid-auto-flow: row;
+	grid-template: auto / $header-height minmax(0, max-content) minmax(min-content, 1fr) $header-height;
+	&:has(> .editor-header__center) {
+		grid-template: auto / $header-height min-content 1fr min-content $header-height;
+		@include break-medium {
+			grid-template: auto / $header-height minmax(min-content, 1fr) 2fr minmax(min-content, 1fr) $header-height;
+		}
+	}
+	@include break-mobile {
+		gap: $grid-unit-20;
+	}
 	align-items: center;
 	// The header should never be wider than the viewport, or buttons might be hidden. Especially relevant at high zoom levels. Related to https://core.trac.wordpress.org/ticket/47603#ticket.
 	max-width: 100vw;
@@ -15,19 +25,32 @@
 }
 
 .editor-header__toolbar {
+	grid-column: 1 / 3;
+	// When there is no back button or the viewport is <= mobile the margin keeps the content off
+	// the starting edge.
+	> :first-child {
+		margin-inline: $grid-unit-20 0;
+	}
+
+	// This is the typical case, the back button takes up the first column.
+	.editor-header__back-button + & {
+		grid-column: 2 / 3;
+
+		@include break-mobile {
+			// Clears the margin; at this breakpoint the parent’s `gap` takes its place.
+			> :first-child {
+				margin-inline: 0;
+			}
+		}
+	}
 	display: flex;
-	// Allow this area to shrink to fit the toolbar buttons.
-	flex-shrink: 8;
-	// Take up the space of the toolbar so it can be justified to the left side of the toolbar.
-	flex-grow: 3;
-	// Hide the overflow so flex will limit its width. Block toolbar will allow scrolling on fixed toolbar.
-	overflow: hidden;
-	// Leave enough room for the focus ring to show.
-	padding: 2px 0;
+	// Make narrowing to less than content width possible. Block toolbar will hide overflow and allow scrolling on fixed toolbar.
+	min-width: 0;
 	align-items: center;
-	// Allow focus ring to be fully visible on furthest right button.
-	@include break-medium() {
-		padding-right: var(--wp-admin-border-width-focus);
+	// Clip the box while leaving room for focus rings.
+	clip-path: inset(-2px);
+	@include break-mobile {
+		clip-path: none;
 	}
 
 	.table-of-contents {
@@ -37,20 +60,35 @@
 			display: block;
 		}
 	}
+
+	// Add a gap before the block toolbar or its toggle button when collapsed.
+	.editor-collapsible-block-toolbar {
+		margin-inline: $grid-unit 0;
+
+		&.is-collapsed ~ .editor-collapsible-block-toolbar__toggle {
+			margin-inline: $grid-unit 0;
+		}
+	}
 }
 
 .editor-header__center {
-	flex-grow: 1;
+	grid-column: 3 / 4;
 	display: flex;
 	justify-content: center;
-	// Flex items will, by default, refuse to shrink below a minimum
-	// intrinsic width. In order to shrink this flexbox item, and
-	// subsequently truncate child text, we set an explicit min-width.
-	// See https://dev.w3.org/csswg/css-flexbox/#min-size-auto
+	align-items: center;
+	// To enable shrinking and truncating of child text, apply an explicit min-width.
 	min-width: 0;
-
-	&.is-collapsed {
-		display: none;
+	// Clip the box while leaving room for focus rings.
+	clip-path: inset(-2px);
+	// At less than mobile the header’s `gap` is zero so margins are added to create a smaller
+	// gap around the center’s contents.
+	@media (max-width: #{$break-mobile - 1}) {
+		> :first-child {
+			margin-inline-start: $grid-unit;
+		}
+		> :last-child {
+			margin-inline-end: $grid-unit;
+		}
 	}
 }
 
@@ -59,6 +97,11 @@
  */
 
 .editor-header__settings {
+	grid-column: 3 / -1;
+	.editor-header:has(> .editor-header__center) & {
+		grid-column: 4 / -1;
+	}
+	justify-self: end;
 	display: inline-flex;
 	align-items: center;
 	flex-wrap: nowrap;

package/src/components/inserter-sidebar/style.scss

@@ -7,10 +7,5 @@
 }
 
 .editor-inserter-sidebar__content {
-	// Leave space for the close button
-	height: calc(100% - #{$button-size} - #{$grid-unit-10});
-
-	@include break-medium() {
-		height: 100%;
-	}
+	height: 100%;
 }

package/src/components/page-attributes/order.js

@@ -1,22 +1,18 @@
 /**
  * WordPress dependencies
  */
-import { __, sprintf } from '@wordpress/i18n';
+import { __ } from '@wordpress/i18n';
 import {
-	Button,
-	Dropdown,
 	Flex,
 	FlexBlock,
 	__experimentalNumberControl as NumberControl,
 } from '@wordpress/components';
 import { useSelect, useDispatch } from '@wordpress/data';
-import { useState, useMemo } from '@wordpress/element';
-import { __experimentalInspectorPopoverHeader as InspectorPopoverHeader } from '@wordpress/block-editor';
+import { useState } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
-import PostPanelRow from '../post-panel-row';
 import PostTypeSupportCheck from '../post-type-support-check';
 import { store as editorStore } from '../../store';
 
@@ -61,6 +57,7 @@ function PageAttributesOrder() {
 /**
  * Renders the Page Attributes Order component. A number input in an editor interface
  * for setting the order of a given page.
+ * The component is now not used in core but was kept for backward compatibility.
  *
  * @return {Component} The component to be rendered.
  */
@@ -71,74 +68,3 @@ export default function PageAttributesOrderWithChecks() {
 		</PostTypeSupportCheck>
 	);
 }
-
-function PostOrderToggle( { isOpen, onClick } ) {
-	const order = useSelect(
-		( select ) =>
-			select( editorStore ).getEditedPostAttribute( 'menu_order' ) ?? 0,
-		[]
-	);
-	return (
-		<Button
-			size="compact"
-			className="editor-post-order__panel-toggle"
-			variant="tertiary"
-			aria-expanded={ isOpen }
-			// translators: %s: Current post parent.
-			aria-label={ sprintf( __( 'Change order: %s' ), order ) }
-			onClick={ onClick }
-		>
-			{ order }
-		</Button>
-	);
-}
-
-export function OrderRow() {
-	// Use internal state instead of a ref to make sure that the component
-	// re-renders when the popover's anchor updates.
-	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,
-			placement: 'left-start',
-			offset: 36,
-			shift: true,
-		} ),
-		[ popoverAnchor ]
-	);
-	return (
-		<PostPanelRow label={ __( 'Order' ) } ref={ setPopoverAnchor }>
-			<Dropdown
-				popoverProps={ popoverProps }
-				className="editor-post-order__panel-dropdown"
-				contentClassName="editor-post-order__panel-dialog"
-				focusOnMount
-				renderToggle={ ( { isOpen, onToggle } ) => (
-					<PostOrderToggle isOpen={ isOpen } onClick={ onToggle } />
-				) }
-				renderContent={ ( { onClose } ) => (
-					<div className="editor-post-order">
-						<InspectorPopoverHeader
-							title={ __( 'Order' ) }
-							onClose={ onClose }
-						/>
-						<div>
-							{ __(
-								'This attribute determines the order of pages in the Pages List block.'
-							) }
-							<p>
-								{ __(
-									'Pages with the same order value will sorted alphabetically. Negative order values are also supported.'
-								) }
-							</p>
-						</div>
-						<PageAttributesOrder />
-					</div>
-				) }
-			/>
-		</PostPanelRow>
-	);
-}

package/src/components/page-attributes/panel.js

@@ -8,7 +8,6 @@ import { store as coreStore } from '@wordpress/core-data';
  */
 import { store as editorStore } from '../../store';
 import PageAttributesCheck from './check';
-import { OrderRow } from './order';
 import { ParentRow } from './parent';
 
 const PANEL_NAME = 'page-attributes';
@@ -28,12 +27,7 @@ function AttributesPanel() {
 		return null;
 	}
 
-	return (
-		<>
-			<ParentRow />
-			<OrderRow />
-		</>
-	);
+	return <ParentRow />;
 }
 
 /**