@wordpress/editor 13.33.0 → 13.35.0

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 { useEffect, 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,55 +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: null,
-	} );
-
 	const libraryRef = useRef();
-	useEffect( () => {
-		libraryRef.current.focusSearch();
-	}, [] );
+
+	// 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/config.js

@@ -37,7 +37,16 @@ export const textFormattingShortcuts = [
 		description: __( 'Make the selected text inline code.' ),
 	},
 	{
-		keyCombination: { modifier: 'access', character: '0' },
+		keyCombination: {
+			modifier: 'access',
+			character: '0',
+		},
+		aliases: [
+			{
+				modifier: 'access',
+				character: '7',
+			},
+		],
 		description: __( 'Convert the current heading to a paragraph.' ),
 	},
 	{

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

@@ -129,7 +129,7 @@ export default function ListViewSidebar() {
 				// can be rendered internally.
 				defaultTabId="list-view"
 			>
-				<div className="edit-post-editor__document-overview-panel__header">
+				<div className="editor-list-view-sidebar__header">
 					<Button
 						className="editor-list-view-sidebar__close-button"
 						icon={ closeSmall }

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

@@ -8,12 +8,13 @@
 		// @see packages/block-editor/src/components/inserter/style.scss
 		width: 350px;
 	}
-	.edit-post-editor__document-overview-panel__header {
+	.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;
@@ -49,7 +50,7 @@
 	scrollbar-gutter: auto;
 
 	// The table cells use an extra pixels of space left and right. We compensate for that here.
-	padding: $grid-unit-10 ($grid-unit-10 - $border-width - $border-width);
+	padding: $grid-unit-05;
 }
 
 .editor-list-view-sidebar__list-view-container {

package/src/components/more-menu/copy-content-menu-item.js

@@ -0,0 +1,51 @@
+/**
+ * WordPress dependencies
+ */
+import { MenuItem } from '@wordpress/components';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { __ } from '@wordpress/i18n';
+import { useCopyToClipboard } from '@wordpress/compose';
+import { store as noticesStore } from '@wordpress/notices';
+import { store as coreStore } from '@wordpress/core-data';
+import { __unstableSerializeAndClean } from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import { store as editorStore } from '../../store';
+
+export default function CopyContentMenuItem() {
+	const { createNotice } = useDispatch( noticesStore );
+	const { getCurrentPostId, getCurrentPostType } = useSelect( editorStore );
+	const { getEditedEntityRecord } = useSelect( coreStore );
+
+	function getText() {
+		const record = getEditedEntityRecord(
+			'postType',
+			getCurrentPostType(),
+			getCurrentPostId()
+		);
+		if ( ! record ) {
+			return '';
+		}
+
+		if ( typeof record.content === 'function' ) {
+			return record.content( record );
+		} else if ( record.blocks ) {
+			return __unstableSerializeAndClean( record.blocks );
+		} else if ( record.content ) {
+			return record.content;
+		}
+	}
+
+	function onSuccess() {
+		createNotice( 'info', __( 'All content copied.' ), {
+			isDismissible: true,
+			type: 'snackbar',
+		} );
+	}
+
+	const ref = useCopyToClipboard( getText, onSuccess );
+
+	return <MenuItem ref={ ref }>{ __( 'Copy all blocks' ) }</MenuItem>;
+}

package/src/components/more-menu/index.js

@@ -0,0 +1,158 @@
+/**
+ * WordPress dependencies
+ */
+import { __, _x } from '@wordpress/i18n';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { displayShortcut } from '@wordpress/keycodes';
+import { external, moreVertical } from '@wordpress/icons';
+import {
+	MenuGroup,
+	MenuItem,
+	VisuallyHidden,
+	DropdownMenu,
+} from '@wordpress/components';
+import {
+	PreferenceToggleMenuItem,
+	store as preferencesStore,
+} from '@wordpress/preferences';
+import { store as interfaceStore, ActionItem } from '@wordpress/interface';
+
+/**
+ * Internal dependencies
+ */
+import CopyContentMenuItem from './copy-content-menu-item';
+import ModeSwitcher from '../mode-switcher';
+import ToolsMoreMenuGroup from './tools-more-menu-group';
+import ViewMoreMenuGroup from './view-more-menu-group';
+import { store as editorStore } from '../../store';
+
+export default function MoreMenu() {
+	const { openModal } = useDispatch( interfaceStore );
+	const { set: setPreference } = useDispatch( preferencesStore );
+	const { toggleDistractionFree } = useDispatch( editorStore );
+	const showIconLabels = useSelect(
+		( select ) =>
+			select( preferencesStore ).get( 'core', 'showIconLabels' ),
+		[]
+	);
+	const turnOffDistractionFree = () => {
+		setPreference( 'core', 'distractionFree', false );
+	};
+
+	return (
+		<>
+			<DropdownMenu
+				icon={ moreVertical }
+				label={ __( 'Options' ) }
+				popoverProps={ {
+					placement: 'bottom-end',
+					className: 'more-menu-dropdown__content',
+				} }
+				toggleProps={ {
+					showTooltip: ! showIconLabels,
+					...( showIconLabels && { variant: 'tertiary' } ),
+					tooltipPosition: 'bottom',
+					size: 'compact',
+				} }
+			>
+				{ ( { onClose } ) => (
+					<>
+						<MenuGroup label={ _x( 'View', 'noun' ) }>
+							<PreferenceToggleMenuItem
+								scope="core"
+								name="fixedToolbar"
+								onToggle={ turnOffDistractionFree }
+								label={ __( 'Top toolbar' ) }
+								info={ __(
+									'Access all block and document tools in a single place'
+								) }
+								messageActivated={ __(
+									'Top toolbar activated'
+								) }
+								messageDeactivated={ __(
+									'Top toolbar deactivated'
+								) }
+							/>
+							<PreferenceToggleMenuItem
+								scope="core"
+								name="distractionFree"
+								label={ __( 'Distraction free' ) }
+								info={ __( 'Write with calmness' ) }
+								handleToggling={ false }
+								onToggle={ toggleDistractionFree }
+								messageActivated={ __(
+									'Distraction free mode activated'
+								) }
+								messageDeactivated={ __(
+									'Distraction free mode deactivated'
+								) }
+								shortcut={ displayShortcut.primaryShift(
+									'\\'
+								) }
+							/>
+							<PreferenceToggleMenuItem
+								scope="core"
+								name="focusMode"
+								label={ __( 'Spotlight mode' ) }
+								info={ __( 'Focus on one block at a time' ) }
+								messageActivated={ __(
+									'Spotlight mode activated'
+								) }
+								messageDeactivated={ __(
+									'Spotlight mode deactivated'
+								) }
+							/>
+							<ViewMoreMenuGroup.Slot fillProps={ { onClose } } />
+						</MenuGroup>
+						<ModeSwitcher />
+						<ActionItem.Slot
+							name="core/plugin-more-menu"
+							label={ __( 'Plugins' ) }
+							as={ MenuGroup }
+							fillProps={ { onClick: onClose } }
+						/>
+						<MenuGroup label={ __( 'Tools' ) }>
+							<MenuItem
+								onClick={ () =>
+									openModal( 'editor/keyboard-shortcut-help' )
+								}
+								shortcut={ displayShortcut.access( 'h' ) }
+							>
+								{ __( 'Keyboard shortcuts' ) }
+							</MenuItem>
+							<CopyContentMenuItem />
+							<MenuItem
+								icon={ external }
+								href={ __(
+									'https://wordpress.org/documentation/article/wordpress-block-editor/'
+								) }
+								target="_blank"
+								rel="noopener noreferrer"
+							>
+								{ __( 'Help' ) }
+								<VisuallyHidden as="span">
+									{
+										/* translators: accessibility text */
+										__( '(opens in a new tab)' )
+									}
+								</VisuallyHidden>
+							</MenuItem>
+							<ToolsMoreMenuGroup.Slot
+								fillProps={ { onClose } }
+							/>
+						</MenuGroup>
+						<MenuGroup>
+							<MenuItem
+								onClick={ () =>
+									openModal( 'editor/preferences' )
+								}
+							>
+								{ __( 'Preferences' ) }
+							</MenuItem>
+						</MenuGroup>
+					</>
+				) }
+			</DropdownMenu>
+		</>
+	);
+}

package/src/components/more-menu/tools-more-menu-group.js

@@ -0,0 +1,11 @@
+/**
+ * WordPress dependencies
+ */
+import { createSlotFill } from '@wordpress/components';
+
+const { Fill: ToolsMoreMenuGroup, Slot } =
+	createSlotFill( 'ToolsMoreMenuGroup' );
+
+ToolsMoreMenuGroup.Slot = ( { fillProps } ) => <Slot fillProps={ fillProps } />;
+
+export default ToolsMoreMenuGroup;

package/src/components/more-menu/view-more-menu-group.js

@@ -0,0 +1,13 @@
+/**
+ * WordPress dependencies
+ */
+import { createSlotFill } from '@wordpress/components';
+import { Platform } from '@wordpress/element';
+
+const { Fill: ViewMoreMenuGroup, Slot } = createSlotFill(
+	Platform.OS === 'web' ? Symbol( 'ViewMoreMenuGroup' ) : 'ViewMoreMenuGroup'
+);
+
+ViewMoreMenuGroup.Slot = ( { fillProps } ) => <Slot fillProps={ fillProps } />;
+
+export default ViewMoreMenuGroup;