@wordpress/editor 13.34.0 → 13.35.0

package/src/components/header/index.js

@@ -0,0 +1,154 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import { useViewportMatch } from '@wordpress/compose';
+import { __unstableMotion as motion } from '@wordpress/components';
+import { store as preferencesStore } from '@wordpress/preferences';
+import { useState } from '@wordpress/element';
+import { PinnedItems } from '@wordpress/interface';
+import { store as blockEditorStore } from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import CollapsableBlockToolbar from '../collapsible-block-toolbar';
+import DocumentBar from '../document-bar';
+import DocumentTools from '../document-tools';
+import MoreMenu from '../more-menu';
+import PostPreviewButton from '../post-preview-button';
+import PostPublishButtonOrToggle from '../post-publish-button/post-publish-button-or-toggle';
+import PostSavedState from '../post-saved-state';
+import PostTypeSupportCheck from '../post-type-support-check';
+import PostViewLink from '../post-view-link';
+import PreviewDropdown from '../preview-dropdown';
+import { store as editorStore } from '../../store';
+
+const slideY = {
+	hidden: { y: '-50px' },
+	distractionFreeInactive: { y: 0 },
+	hover: { y: 0, transition: { type: 'tween', delay: 0.2 } },
+};
+
+function Header( {
+	customSaveButton,
+	forceIsDirty,
+	forceDisableBlockTools,
+	setEntitiesSavedStatesCallback,
+	title,
+	children,
+} ) {
+	const isWideViewport = useViewportMatch( 'large' );
+	const isLargeViewport = useViewportMatch( 'medium' );
+	const {
+		isTextEditor,
+		isPublishSidebarOpened,
+		showIconLabels,
+		hasFixedToolbar,
+		isNestedEntity,
+		isZoomedOutView,
+	} = useSelect( ( select ) => {
+		const { get: getPreference } = select( preferencesStore );
+		const {
+			getEditorMode,
+			getEditorSettings,
+			isPublishSidebarOpened: _isPublishSidebarOpened,
+		} = select( editorStore );
+		const { __unstableGetEditorMode } = select( blockEditorStore );
+
+		return {
+			isTextEditor: getEditorMode() === 'text',
+			isPublishSidebarOpened: _isPublishSidebarOpened(),
+			showIconLabels: getPreference( 'core', 'showIconLabels' ),
+			hasFixedToolbar: getPreference( 'core', 'fixedToolbar' ),
+			isNestedEntity:
+				!! getEditorSettings().onNavigateToPreviousEntityRecord,
+			isZoomedOutView: __unstableGetEditorMode() === 'zoom-out',
+		};
+	}, [] );
+
+	const hasTopToolbar = isLargeViewport && hasFixedToolbar;
+
+	const [ isBlockToolsCollapsed, setIsBlockToolsCollapsed ] =
+		useState( true );
+
+	// 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">
+			{ children }
+			<motion.div
+				variants={ slideY }
+				transition={ { type: 'tween', delay: 0.8 } }
+				className="editor-header__toolbar"
+			>
+				<DocumentTools
+					disableBlockTools={ forceDisableBlockTools || isTextEditor }
+				/>
+				{ hasTopToolbar && (
+					<CollapsableBlockToolbar
+						isCollapsed={ isBlockToolsCollapsed }
+						onToggle={ setIsBlockToolsCollapsed }
+					/>
+				) }
+				<div
+					className={ clsx( 'editor-header__center', {
+						'is-collapsed':
+							! isBlockToolsCollapsed && hasTopToolbar,
+					} ) }
+				>
+					{ ! title ? (
+						<PostTypeSupportCheck supportKeys="title">
+							<DocumentBar />
+						</PostTypeSupportCheck>
+					) : (
+						title
+					) }
+				</div>
+			</motion.div>
+			<motion.div
+				variants={ slideY }
+				transition={ { type: 'tween', delay: 0.8 } }
+				className="editor-header__settings"
+			>
+				{ ! customSaveButton && ! isPublishSidebarOpened && (
+					// This button isn't completely hidden by the publish sidebar.
+					// We can't hide the whole toolbar when the publish sidebar is open because
+					// we want to prevent mounting/unmounting the PostPublishButtonOrToggle DOM node.
+					// We track that DOM node to return focus to the PostPublishButtonOrToggle
+					// when the publish sidebar has been closed.
+					<PostSavedState forceIsDirty={ forceIsDirty } />
+				) }
+				<PreviewDropdown
+					forceIsAutosaveable={ forceIsDirty }
+					disabled={ isNestedEntity || isZoomedOutView }
+				/>
+				<PostPreviewButton
+					className="editor-header__post-preview-button"
+					forceIsAutosaveable={ forceIsDirty }
+				/>
+				<PostViewLink />
+				{ ! customSaveButton && (
+					<PostPublishButtonOrToggle
+						forceIsDirty={ forceIsDirty }
+						setEntitiesSavedStatesCallback={
+							setEntitiesSavedStatesCallback
+						}
+					/>
+				) }
+				{ customSaveButton }
+				{ ( isWideViewport || ! showIconLabels ) && (
+					<PinnedItems.Slot scope="core" />
+				) }
+				<MoreMenu />
+			</motion.div>
+		</div>
+	);
+}
+
+export default Header;

package/src/components/header/style.scss

@@ -0,0 +1,231 @@
+.editor-header {
+	height: $header-height;
+	background: $white;
+	display: flex;
+	flex-wrap: wrap;
+	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;
+	justify-content: space-between;
+
+	// Make toolbar sticky on larger breakpoints
+	@include break-zoomed-in {
+		flex-wrap: nowrap;
+	}
+}
+
+.editor-header__toolbar {
+	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;
+	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);
+	}
+
+	.table-of-contents {
+		display: none;
+
+		@include break-small() {
+			display: block;
+		}
+	}
+}
+
+.editor-header__center {
+	flex-grow: 1;
+	display: flex;
+	justify-content: center;
+
+	&.is-collapsed {
+		display: none;
+	}
+}
+
+/**
+ * Buttons on the right side
+ */
+
+.editor-header__settings {
+	display: inline-flex;
+	align-items: center;
+	flex-wrap: nowrap;
+	padding-right: $grid-unit-05;
+
+	@include break-small () {
+		padding-right: $grid-unit-10;
+	}
+
+	gap: $grid-unit-10;
+}
+
+/**
+ * Show icon labels.
+ */
+
+.show-icon-labels.interface-pinned-items,
+.show-icon-labels .editor-header {
+	.components-button.has-icon {
+		width: auto;
+
+		// Hide the button icons when labels are set to display...
+		svg {
+			display: none;
+		}
+		// ... and display labels.
+		&::after {
+			content: attr(aria-label);
+		}
+		&[aria-disabled="true"] {
+			background-color: transparent;
+		}
+	}
+	.is-tertiary {
+		&:active {
+			box-shadow: 0 0 0 1.5px var(--wp-admin-theme-color);
+			background-color: transparent;
+		}
+	}
+	// Exception for drodpdown toggle buttons.
+	.components-button.has-icon.button-toggle {
+		svg {
+			display: block;
+		}
+		&::after {
+			content: none;
+		}
+	}
+
+	// Don't hide MenuItemsChoice check icons
+	.components-menu-items-choice .components-menu-items__item-icon.components-menu-items__item-icon {
+		display: block;
+	}
+	.editor-document-tools__inserter-toggle.editor-document-tools__inserter-toggle,
+	.interface-pinned-items .components-button {
+		padding-left: $grid-unit;
+		padding-right: $grid-unit;
+
+		@include break-small {
+			padding-left: $grid-unit-15;
+			padding-right: $grid-unit-15;
+		}
+	}
+
+	.editor-post-save-draft.editor-post-save-draft,
+	.editor-post-saved-state.editor-post-saved-state {
+		&::after {
+			content: none;
+		}
+	}
+}
+
+.show-icon-labels {
+	.editor-header__toolbar .block-editor-block-mover {
+		// Modified group borders.
+		border-left: none;
+
+		&::before {
+			content: "";
+			width: $border-width;
+			height: $grid-unit-30;
+			background-color: $gray-300;
+			margin-top: $grid-unit-05;
+			margin-left: $grid-unit;
+		}
+
+		// Modified block movers horizontal separator.
+		.block-editor-block-mover__move-button-container {
+			&::before {
+				width: calc(100% - #{$grid-unit-30});
+				background: $gray-300;
+				left: calc(50% + 1px);
+			}
+		}
+	}
+}
+
+.show-icon-labels.interface-pinned-items {
+	padding: 6px $grid-unit-15 $grid-unit-15;
+	margin-top: 0;
+	margin-bottom: 0;
+	margin-left: -$grid-unit-15;
+	margin-right: -$grid-unit-15;
+	border-bottom: 1px solid $gray-400;
+	display: block;
+
+	> .components-button.has-icon {
+		margin: 0;
+		padding: 6px 6px 6px $grid-unit;
+		width: 14.625rem;
+		justify-content: flex-start;
+
+		&[aria-expanded="true"] svg {
+			display: block;
+			max-width: $grid-unit-30;
+		}
+		&[aria-expanded="false"] {
+			padding-left: $grid-unit-50;
+		}
+		svg {
+			margin-right: 8px;
+		}
+	}
+}
+
+.editor-header__post-preview-button {
+	@include break-small {
+		display: none;
+	}
+}
+
+.is-distraction-free {
+	.interface-interface-skeleton__header {
+		border-bottom: none;
+	}
+
+	.editor-header {
+		background-color: $white;
+		border-bottom: 1px solid #e0e0e0;
+		position: absolute;
+		width: 100%;
+
+
+		// hide some parts
+		& > .edit-post-header__settings > .edit-post-header__post-preview-button {
+			visibility: hidden;
+		}
+
+		& > .editor-header__toolbar .editor-document-tools__document-overview-toggle,
+		& > .editor-header__settings > .editor-preview-dropdown,
+		& > .editor-header__settings > .interface-pinned-items {
+			display: none;
+		}
+
+	}
+
+	// We need ! important because we override inline styles
+	// set by the motion component.
+	.interface-interface-skeleton__header:focus-within {
+		opacity: 1 !important;
+		div {
+			transform: translateX(0) translateZ(0) !important;
+		}
+
+	}
+
+	.components-editor-notices__dismissible {
+		position: absolute;
+		z-index: 35;
+	}
+}
+
+.components-popover.more-menu-dropdown__content {
+	z-index: z-index(".components-popover.more-menu__content");
+}

package/src/components/inserter-sidebar/index.js

@@ -2,16 +2,14 @@
  * WordPress dependencies
  */
 import { useDispatch, useSelect } from '@wordpress/data';
-import { Button, VisuallyHidden } from '@wordpress/components';
-import { __experimentalLibrary as Library } from '@wordpress/block-editor';
-import { close } from '@wordpress/icons';
 import {
-	useViewportMatch,
-	__experimentalUseDialog as useDialog,
-} from '@wordpress/compose';
-import { __ } from '@wordpress/i18n';
-import { useRef } from '@wordpress/element';
+	__experimentalLibrary as Library,
+	store as blockEditorStore,
+} from '@wordpress/block-editor';
+import { useViewportMatch } from '@wordpress/compose';
+import { useCallback, useRef } from '@wordpress/element';
 import { store as preferencesStore } from '@wordpress/preferences';
+import { ESCAPE } from '@wordpress/keycodes';
 
 /**
  * Internal dependencies
@@ -23,52 +21,77 @@ export default function InserterSidebar( {
 	closeGeneralSidebar,
 	isRightSidebarOpen,
 } ) {
-	const { insertionPoint, showMostUsedBlocks } = useSelect( ( select ) => {
-		const { getInsertionPoint } = unlock( select( editorStore ) );
+	const {
+		blockSectionRootClientId,
+		inserterSidebarToggleRef,
+		insertionPoint,
+		showMostUsedBlocks,
+	} = useSelect( ( select ) => {
+		const { getInserterSidebarToggleRef, getInsertionPoint } = unlock(
+			select( editorStore )
+		);
+		const { getBlockRootClientId, __unstableGetEditorMode, getSettings } =
+			select( blockEditorStore );
 		const { get } = select( preferencesStore );
+		const getBlockSectionRootClientId = () => {
+			if ( __unstableGetEditorMode() === 'zoom-out' ) {
+				const { sectionRootClientId } = unlock( getSettings() );
+				if ( sectionRootClientId ) {
+					return sectionRootClientId;
+				}
+			}
+			return getBlockRootClientId();
+		};
 		return {
+			inserterSidebarToggleRef: getInserterSidebarToggleRef(),
 			insertionPoint: getInsertionPoint(),
 			showMostUsedBlocks: get( 'core', 'mostUsedBlocks' ),
+			blockSectionRootClientId: getBlockSectionRootClientId(),
 		};
 	}, [] );
 	const { setIsInserterOpened } = useDispatch( editorStore );
 
 	const isMobileViewport = useViewportMatch( 'medium', '<' );
-	const TagName = ! isMobileViewport ? VisuallyHidden : 'div';
-	const [ inserterDialogRef, inserterDialogProps ] = useDialog( {
-		onClose: () => setIsInserterOpened( false ),
-		focusOnMount: true,
-	} );
-
 	const libraryRef = useRef();
 
+	// When closing the inserter, focus should return to the toggle button.
+	const closeInserterSidebar = useCallback( () => {
+		setIsInserterOpened( false );
+		inserterSidebarToggleRef.current?.focus();
+	}, [ inserterSidebarToggleRef, setIsInserterOpened ] );
+
+	const closeOnEscape = useCallback(
+		( event ) => {
+			if ( event.keyCode === ESCAPE && ! event.defaultPrevented ) {
+				event.preventDefault();
+				closeInserterSidebar();
+			}
+		},
+		[ closeInserterSidebar ]
+	);
+
 	return (
-		<div
-			ref={ inserterDialogRef }
-			{ ...inserterDialogProps }
-			className="editor-inserter-sidebar"
-		>
-			<TagName className="editor-inserter-sidebar__header">
-				<Button
-					icon={ close }
-					label={ __( 'Close block inserter' ) }
-					onClick={ () => setIsInserterOpened( false ) }
-				/>
-			</TagName>
+		// eslint-disable-next-line jsx-a11y/no-static-element-interactions
+		<div onKeyDown={ closeOnEscape } className="editor-inserter-sidebar">
 			<div className="editor-inserter-sidebar__content">
 				<Library
 					showMostUsedBlocks={ showMostUsedBlocks }
 					showInserterHelpPanel
 					shouldFocusBlock={ isMobileViewport }
-					rootClientId={ insertionPoint.rootClientId }
+					rootClientId={
+						blockSectionRootClientId ?? insertionPoint.rootClientId
+					}
 					__experimentalInsertionIndex={
 						insertionPoint.insertionIndex
 					}
+					__experimentalInitialTab={ insertionPoint.tab }
+					__experimentalInitialCategory={ insertionPoint.category }
 					__experimentalFilterValue={ insertionPoint.filterValue }
 					__experimentalOnPatternCategorySelection={
 						isRightSidebarOpen ? closeGeneralSidebar : undefined
 					}
 					ref={ libraryRef }
+					onClose={ closeInserterSidebar }
 				/>
 			</div>
 		</div>

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

@@ -6,16 +6,23 @@
 	flex-direction: column;
 }
 
-.editor-inserter-sidebar__header {
-	padding-top: $grid-unit-10;
+.block-editor-inserter-sidebar__header {
+	border-bottom: $border-width solid $gray-300;
 	padding-right: $grid-unit-10;
 	display: flex;
-	justify-content: flex-end;
+	justify-content: space-between;
+
+	.block-editor-inserter-sidebar__close-button {
+		/* stylelint-disable-next-line property-disallowed-list -- This should be refactored to avoid order if possible */
+		order: 1;
+		align-self: center;
+	}
 }
 
 .editor-inserter-sidebar__content {
 	// Leave space for the close button
 	height: calc(100% - #{$button-size} - #{$grid-unit-10});
+
 	@include break-medium() {
 		height: 100%;
 	}

package/src/components/keyboard-shortcut-help-modal/index.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -52,7 +52,7 @@ const ShortcutList = ( { shortcuts } ) => (
 
 const ShortcutSection = ( { title, shortcuts, className } ) => (
 	<section
-		className={ classnames(
+		className={ clsx(
 			'editor-keyboard-shortcut-help-modal__section',
 			className
 		) }

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

@@ -14,6 +14,7 @@
 	}
 	.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;

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

@@ -22,7 +22,11 @@ jest.mock( '@wordpress/data/src/components/use-dispatch', () => ( {
 function setupDataMock( order = 0 ) {
 	useSelect.mockImplementation( ( mapSelect ) =>
 		mapSelect( () => ( {
-			getPostType: () => null,
+			getPostType: () => ( {
+				supports: {
+					'page-attributes': true,
+				},
+			} ),
 			getEditedPostAttribute: ( attr ) => {
 				switch ( attr ) {
 					case 'menu_order':