@wordpress/editor 14.3.0 → 14.5.0

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/commands/index.js

@@ -89,7 +89,8 @@ function useEditorCommandLoader() {
 		name: 'core/open-shortcut-help',
 		label: __( 'Keyboard shortcuts' ),
 		icon: keyboard,
-		callback: () => {
+		callback: ( { close } ) => {
+			close();
 			openModal( 'editor/keyboard-shortcut-help' );
 		},
 	} );
@@ -108,7 +109,8 @@ function useEditorCommandLoader() {
 	commands.push( {
 		name: 'core/open-preferences',
 		label: __( 'Editor preferences' ),
-		callback: () => {
+		callback: ( { close } ) => {
+			close();
 			openModal( 'editor/preferences' );
 		},
 	} );

package/src/components/document-bar/index.js

@@ -200,7 +200,7 @@ export default function DocumentBar( props ) {
 						>
 							{ title
 								? decodeEntities( title )
-								: __( 'No Title' ) }
+								: __( 'No title' ) }
 						</Text>
 					</motion.div>
 					<span className="editor-document-bar__shortcut">

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 {
@@ -38,7 +34,7 @@
 }
 
 .editor-document-bar__title {
-	flex-grow: 1;
+	flex: 1;
 	overflow: hidden;
 	color: $gray-900;
 	gap: $grid-unit-05;

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,12 @@
 .editor-editor-interface .entities-saved-states__panel-header {
 	height: $header-height + $border-width;
 }
+
+.editor-editor-interface .interface-interface-skeleton__content {
+	// Make this a stacking context to contain the z-index of children elements.
+	isolation: isolate;
+}
+
+.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,13 +50,13 @@ function Header( {
 } ) {
 	const isWideViewport = useViewportMatch( 'large' );
 	const isLargeViewport = useViewportMatch( 'medium' );
+	const isTooNarrowForDocumentBar = useMediaQuery( '(max-width: 403px)' );
 	const {
 		isTextEditor,
 		isPublishSidebarOpened,
 		showIconLabels,
 		hasFixedToolbar,
 		isNestedEntity,
-		isZoomedOutView,
 	} = useSelect( ( select ) => {
 		const { get: getPreference } = select( preferencesStore );
 		const {
@@ -82,21 +77,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 +104,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' } }
@@ -135,7 +135,7 @@ function Header( {
 				) }
 				<PreviewDropdown
 					forceIsAutosaveable={ forceIsDirty }
-					disabled={ isNestedEntity || isZoomedOutView }
+					disabled={ isNestedEntity }
 				/>
 				<PostPreviewButton
 					className="editor-header__post-preview-button"

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/list-view-sidebar/style.scss

@@ -1,5 +1,9 @@
 .editor-list-view-sidebar {
 	height: 100%;
+
+	@include break-medium {
+		width: $secondary-sidebar-width;
+	}
 }
 
 .editor-list-view-sidebar__list-view-panel-content,

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 />;
 }
 
 /**

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

@@ -14,11 +14,16 @@ import {
 	ExternalLink,
 } from '@wordpress/components';
 import { debounce } from '@wordpress/compose';
-import { useState, useMemo } from '@wordpress/element';
+import {
+	createInterpolateElement,
+	useState,
+	useMemo,
+} from '@wordpress/element';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { decodeEntities } from '@wordpress/html-entities';
 import { store as coreStore } from '@wordpress/core-data';
 import { __experimentalInspectorPopoverHeader as InspectorPopoverHeader } from '@wordpress/block-editor';
+import { filterURLForDisplay } from '@wordpress/url';
 
 /**
  * Internal dependencies
@@ -217,6 +222,10 @@ function PostParentToggle( { isOpen, onClick } ) {
 }
 
 export function ParentRow() {
+	const homeUrl = useSelect(
+		( select ) => select( coreStore ).getUnstableBase()?.home,
+		[]
+	);
 	// 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 );
@@ -249,12 +258,21 @@ export function ParentRow() {
 							onClose={ onClose }
 						/>
 						<div>
-							{
-								/* translators: The domain name should be a reserved domain name to prevent linking to third party sites outside the WordPress project's control. You may also wish to use wordpress.org or a wordpress.org sub-domain. */
-								__(
-									"Child pages inherit characteristics from their parent, such as URL structure. For instance, if 'Web Design' is a child of 'Services', its URL would be example.org/services/web-design."
-								)
-							}
+							{ createInterpolateElement(
+								sprintf(
+									/* translators: %1$s The home URL of the WordPress installation without the scheme. */
+									__(
+										'Child pages inherit characteristics from their parent, such as URL structure. For instance, if "Pricing" is a child of "Services", its URL would be %1$s<wbr />/services<wbr />/pricing.'
+									),
+									filterURLForDisplay( homeUrl ).replace(
+										/([/.])/g,
+										'<wbr />$1'
+									)
+								),
+								{
+									wbr: <wbr />,
+								}
+							) }
 							<p>
 								{ __(
 									'They also show up as sub-items in the default navigation menu. '