@wordpress/editor 14.2.0 → 14.4.0

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

@@ -6,10 +6,7 @@ import {
 	store as blockEditorStore,
 	privateApis as blockEditorPrivateApis,
 } from '@wordpress/block-editor';
-import {
-	useViewportMatch,
-	__experimentalUseDialog as useDialog,
-} from '@wordpress/compose';
+import { useViewportMatch } from '@wordpress/compose';
 import { useCallback, useRef } from '@wordpress/element';
 import { store as preferencesStore } from '@wordpress/preferences';
 import { ESCAPE } from '@wordpress/keycodes';
@@ -63,10 +60,6 @@ export default function InserterSidebar() {
 	const { disableComplementaryArea } = useDispatch( interfaceStore );
 
 	const isMobileViewport = useViewportMatch( 'medium', '<' );
-	const [ inserterDialogRef, inserterDialogProps ] = useDialog( {
-		onClose: () => setIsInserterOpened( false ),
-		focusOnMount: true,
-	} );
 	const libraryRef = useRef();
 
 	// When closing the inserter, focus should return to the toggle button.
@@ -95,6 +88,7 @@ export default function InserterSidebar() {
 					blockSectionRootClientId ?? insertionPoint.rootClientId
 				}
 				__experimentalInsertionIndex={ insertionPoint.insertionIndex }
+				onSelect={ insertionPoint.onSelect }
 				__experimentalInitialTab={ insertionPoint.tab }
 				__experimentalInitialCategory={ insertionPoint.category }
 				__experimentalFilterValue={ insertionPoint.filterValue }
@@ -109,23 +103,9 @@ export default function InserterSidebar() {
 		</div>
 	);
 
-	if ( window.__experimentalEnableZoomedOutPatternsTab ) {
-		return (
-			// eslint-disable-next-line jsx-a11y/no-static-element-interactions
-			<div
-				onKeyDown={ closeOnEscape }
-				className="editor-inserter-sidebar"
-			>
-				{ inserterContents }
-			</div>
-		);
-	}
 	return (
-		<div
-			ref={ inserterDialogRef }
-			{ ...inserterDialogProps }
-			className="editor-inserter-sidebar"
-		>
+		// eslint-disable-next-line jsx-a11y/no-static-element-interactions
+		<div onKeyDown={ closeOnEscape } className="editor-inserter-sidebar">
 			{ inserterContents }
 		</div>
 	);

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

@@ -1,17 +1,15 @@
 /**
  * WordPress dependencies
  */
-import { __experimentalListView as ListView } from '@wordpress/block-editor';
 import {
-	Button,
-	privateApis as componentsPrivateApis,
-} from '@wordpress/components';
+	__experimentalListView as ListView,
+	privateApis as blockEditorPrivateApis,
+} from '@wordpress/block-editor';
 import { useFocusOnMount, useMergeRefs } from '@wordpress/compose';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { focus } from '@wordpress/dom';
 import { useCallback, useRef, useState } from '@wordpress/element';
 import { __, _x } from '@wordpress/i18n';
-import { closeSmall } from '@wordpress/icons';
 import { useShortcut } from '@wordpress/keyboard-shortcuts';
 import { ESCAPE } from '@wordpress/keycodes';
 
@@ -22,7 +20,7 @@ import ListViewOutline from './list-view-outline';
 import { unlock } from '../../lock-unlock';
 import { store as editorStore } from '../../store';
 
-const { Tabs } = unlock( componentsPrivateApis );
+const { TabbedSidebar } = unlock( blockEditorPrivateApis );
 
 export default function ListViewSidebar() {
 	const { setIsListViewOpened } = useDispatch( editorStore );
@@ -120,64 +118,38 @@ export default function ListViewSidebar() {
 			onKeyDown={ closeOnEscape }
 			ref={ sidebarRef }
 		>
-			<Tabs
+			<TabbedSidebar
+				tabs={ [
+					{
+						name: 'list-view',
+						title: _x( 'List View', 'Post overview' ),
+						panel: (
+							<div className="editor-list-view-sidebar__list-view-container">
+								<div className="editor-list-view-sidebar__list-view-panel-content">
+									<ListView
+										dropZoneElement={ dropZoneElement }
+									/>
+								</div>
+							</div>
+						),
+						panelRef: listViewContainerRef,
+					},
+					{
+						name: 'outline',
+						title: _x( 'Outline', 'Post overview' ),
+						panel: (
+							<div className="editor-list-view-sidebar__list-view-container">
+								<ListViewOutline />
+							</div>
+						),
+					},
+				] }
+				onClose={ closeListView }
 				onSelect={ ( tabName ) => setTab( tabName ) }
-				selectOnMove={ false }
-				// The initial tab value is set explicitly to avoid an initial
-				// render where no tab is selected. This ensures that the
-				// tabpanel height is correct so the relevant scroll container
-				// can be rendered internally.
 				defaultTabId="list-view"
-			>
-				<div className="editor-list-view-sidebar__header">
-					<Button
-						className="editor-list-view-sidebar__close-button"
-						icon={ closeSmall }
-						label={ __( 'Close' ) }
-						onClick={ closeListView }
-						size="small"
-					/>
-					<Tabs.TabList
-						className="editor-list-view-sidebar__tabs-tablist"
-						ref={ tabsRef }
-					>
-						<Tabs.Tab
-							className="editor-list-view-sidebar__tabs-tab"
-							tabId="list-view"
-						>
-							{ _x( 'List View', 'Post overview' ) }
-						</Tabs.Tab>
-						<Tabs.Tab
-							className="editor-list-view-sidebar__tabs-tab"
-							tabId="outline"
-						>
-							{ _x( 'Outline', 'Post overview' ) }
-						</Tabs.Tab>
-					</Tabs.TabList>
-				</div>
-
-				<Tabs.TabPanel
-					ref={ listViewContainerRef }
-					className="editor-list-view-sidebar__tabs-tabpanel"
-					tabId="list-view"
-					focusable={ false }
-				>
-					<div className="editor-list-view-sidebar__list-view-container">
-						<div className="editor-list-view-sidebar__list-view-panel-content">
-							<ListView dropZoneElement={ dropZoneElement } />
-						</div>
-					</div>
-				</Tabs.TabPanel>
-				<Tabs.TabPanel
-					className="editor-list-view-sidebar__tabs-tabpanel"
-					tabId="outline"
-					focusable={ false }
-				>
-					<div className="editor-list-view-sidebar__list-view-container">
-						<ListViewOutline />
-					</div>
-				</Tabs.TabPanel>
-			</Tabs>
+				ref={ tabsRef }
+				closeButtonLabel={ __( 'Close' ) }
+			/>
 		</div>
 	);
 }

package/src/components/list-view-sidebar/style.scss

@@ -1,39 +1,5 @@
 .editor-list-view-sidebar {
 	height: 100%;
-	display: flex;
-	flex-direction: column;
-
-	@include break-medium() {
-		// Same width as the Inserter.
-		// @see packages/block-editor/src/components/inserter/style.scss
-		width: 350px;
-	}
-	.editor-list-view-sidebar__header {
-		display: flex;
-		border-bottom: $border-width solid $gray-300;
-	}
-	.editor-list-view-sidebar__close-button {
-		background: $white;
-		/* stylelint-disable-next-line property-disallowed-list -- This should be removed when https://github.com/WordPress/gutenberg/issues/59013 is fixed. */
-		order: 1;
-		align-self: center;
-		margin-right: $grid-unit-15;
-	}
-}
-
-.editor-list-view-sidebar__tabs-tablist {
-	box-sizing: border-box;
-	flex-grow: 1;
-
-}
-
-.editor-list-view-sidebar__tabs-tab {
-	width: 50%;
-	margin-bottom: -$border-width;
-}
-
-.editor-list-view-sidebar__tabs-tabpanel {
-	height: calc(100% - #{$grid-unit-60 - $border-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

@@ -249,9 +249,12 @@ export function ParentRow() {
 							onClose={ onClose }
 						/>
 						<div>
-							{ __(
-								"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 mysite.com/services/web-design."
-							) }
+							{
+								/* 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."
+								)
+							}
 							<p>
 								{ __(
 									'They also show up as sub-items in the default navigation menu. '