@wordpress/edit-post 6.17.0 → 6.19.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/edit-post",
-	"version": "6.17.0",
+	"version": "6.19.0",
 	"description": "Edit Post module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -27,31 +27,31 @@
 	"react-native": "src/index",
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
-		"@wordpress/a11y": "^3.20.0",
-		"@wordpress/api-fetch": "^6.17.0",
-		"@wordpress/block-editor": "^10.3.0",
-		"@wordpress/block-library": "^7.17.0",
-		"@wordpress/blocks": "^11.19.0",
-		"@wordpress/components": "^21.3.0",
-		"@wordpress/compose": "^5.18.0",
-		"@wordpress/core-data": "^5.3.0",
-		"@wordpress/data": "^7.4.0",
-		"@wordpress/deprecated": "^3.20.0",
-		"@wordpress/editor": "^12.19.0",
-		"@wordpress/element": "^4.18.0",
-		"@wordpress/hooks": "^3.20.0",
-		"@wordpress/i18n": "^4.20.0",
-		"@wordpress/icons": "^9.11.0",
-		"@wordpress/interface": "^4.19.0",
-		"@wordpress/keyboard-shortcuts": "^3.18.0",
-		"@wordpress/keycodes": "^3.20.0",
-		"@wordpress/media-utils": "^4.11.0",
-		"@wordpress/notices": "^3.20.0",
-		"@wordpress/plugins": "^4.18.0",
-		"@wordpress/preferences": "^2.12.0",
-		"@wordpress/url": "^3.21.0",
-		"@wordpress/viewport": "^4.18.0",
-		"@wordpress/warning": "^2.20.0",
+		"@wordpress/a11y": "^3.22.0",
+		"@wordpress/api-fetch": "^6.19.0",
+		"@wordpress/block-editor": "^10.5.0",
+		"@wordpress/block-library": "^7.19.0",
+		"@wordpress/blocks": "^11.21.0",
+		"@wordpress/components": "^22.1.0",
+		"@wordpress/compose": "^5.20.0",
+		"@wordpress/core-data": "^5.5.0",
+		"@wordpress/data": "^7.6.0",
+		"@wordpress/deprecated": "^3.22.0",
+		"@wordpress/editor": "^12.21.0",
+		"@wordpress/element": "^4.20.0",
+		"@wordpress/hooks": "^3.22.0",
+		"@wordpress/i18n": "^4.22.0",
+		"@wordpress/icons": "^9.13.0",
+		"@wordpress/interface": "^4.21.0",
+		"@wordpress/keyboard-shortcuts": "^3.20.0",
+		"@wordpress/keycodes": "^3.22.0",
+		"@wordpress/media-utils": "^4.13.0",
+		"@wordpress/notices": "^3.22.0",
+		"@wordpress/plugins": "^4.20.0",
+		"@wordpress/preferences": "^2.14.0",
+		"@wordpress/url": "^3.23.0",
+		"@wordpress/viewport": "^4.20.0",
+		"@wordpress/warning": "^2.22.0",
 		"classnames": "^2.3.1",
 		"lodash": "^4.17.21",
 		"memize": "^1.1.0",
@@ -64,5 +64,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "a2ff0e6471c88436dad0287beb88d1729aa6f5dd"
+	"gitHead": "7ac04f446242452d3cb24372f9ca58f0cae97715"
 }

package/src/components/block-manager/category.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { includes, map } from 'lodash';
+import { map } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -37,7 +37,7 @@ function BlockManagerCategory( { title, blockTypes } ) {
 			return blockTypes;
 		}
 		return blockTypes.filter( ( { name } ) => {
-			return includes( defaultAllowedBlockTypes || [], name );
+			return defaultAllowedBlockTypes?.includes( name );
 		} );
 	}, [ defaultAllowedBlockTypes, blockTypes ] );
 	const { showBlockTypes, hideBlockTypes } = useDispatch( editPostStore );
@@ -71,15 +71,7 @@ function BlockManagerCategory( { title, blockTypes } ) {
 	const titleId = 'edit-post-block-manager__category-title-' + instanceId;
 
 	const isAllChecked = checkedBlockNames.length === filteredBlockTypes.length;
-
-	let ariaChecked;
-	if ( isAllChecked ) {
-		ariaChecked = 'true';
-	} else if ( checkedBlockNames.length > 0 ) {
-		ariaChecked = 'mixed';
-	} else {
-		ariaChecked = 'false';
-	}
+	const isIndeterminate = ! isAllChecked && checkedBlockNames.length > 0;
 
 	return (
 		<div
@@ -88,10 +80,11 @@ function BlockManagerCategory( { title, blockTypes } ) {
 			className="edit-post-block-manager__category"
 		>
 			<CheckboxControl
+				__nextHasNoMarginBottom
 				checked={ isAllChecked }
 				onChange={ toggleAllVisible }
 				className="edit-post-block-manager__category-title"
-				aria-checked={ ariaChecked }
+				indeterminate={ isIndeterminate }
 				label={ <span id={ titleId }>{ title }</span> }
 			/>
 			<BlockTypesChecklist

package/src/components/block-manager/checklist.js

@@ -13,17 +13,14 @@ function BlockTypesChecklist( { blockTypes, value, onItemChange } ) {
 					className="edit-post-block-manager__checklist-item"
 				>
 					<CheckboxControl
-						label={
-							<>
-								{ blockType.title }
-								<BlockIcon icon={ blockType.icon } />
-							</>
-						}
+						__nextHasNoMarginBottom
+						label={ blockType.title }
 						checked={ value.includes( blockType.name ) }
 						onChange={ ( ...args ) =>
 							onItemChange( blockType.name, ...args )
 						}
 					/>
+					<BlockIcon icon={ blockType.icon } />
 				</li>
 			) ) }
 		</ul>

package/src/components/block-manager/index.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { filter, includes } from 'lodash';
+import { filter } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -38,7 +38,7 @@ function BlockManager( {
 			hasBlockSupport( blockType, 'inserter', true ) &&
 			( ! search || isMatchingSearchTerm( blockType, search ) ) &&
 			( ! blockType.parent ||
-				includes( blockType.parent, 'core/post-content' ) )
+				blockType.parent.includes( 'core/post-content' ) )
 	);
 
 	// Announce search results on change

package/src/components/block-manager/style.scss

@@ -51,30 +51,19 @@
 .edit-post-block-manager__category-title,
 .edit-post-block-manager__checklist-item {
 	border-bottom: 1px solid $gray-300;
-
-	.components-base-control__field {
-		align-items: center;
-		display: flex;
-		margin: 0;
-	}
 }
 
 .edit-post-block-manager__checklist-item {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
 	margin-bottom: 0;
-	padding-left: $grid-unit-20;
+	padding: $grid-unit-10 0 $grid-unit-10 $grid-unit-20;
 
 	.components-modal__content &.components-checkbox-control__input-container {
 		margin: 0 $grid-unit-10;
 	}
 
-	.components-checkbox-control__label {
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		flex-grow: 1;
-		padding: $grid-unit-10 0;
-	}
-
 	.block-editor-block-icon {
 		margin-right: 10px;
 		fill: $gray-900;

package/src/components/header/fullscreen-mode-close/test/__snapshots__/index.js.snap

@@ -0,0 +1,26 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`FullscreenModeClose when in full screen mode should display a default site icon if no user uploaded site icon exists 1`] = `
+<div>
+  <div>
+    <a
+      aria-label="Back"
+      class="components-button edit-post-fullscreen-mode-close"
+      href="edit.php?"
+    >
+      <svg
+        aria-hidden="true"
+        focusable="false"
+        height="36px"
+        viewBox="-2 -2 24 24"
+        width="36px"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M20 10c0-5.51-4.49-10-10-10C4.48 0 0 4.49 0 10c0 5.52 4.48 10 10 10 5.51 0 10-4.48 10-10zM7.78 15.37L4.37 6.22c.55-.02 1.17-.08 1.17-.08.5-.06.44-1.13-.06-1.11 0 0-1.45.11-2.37.11-.18 0-.37 0-.58-.01C4.12 2.69 6.87 1.11 10 1.11c2.33 0 4.45.87 6.05 2.34-.68-.11-1.65.39-1.65 1.58 0 .74.45 1.36.9 2.1.35.61.55 1.36.55 2.46 0 1.49-1.4 5-1.4 5l-3.03-8.37c.54-.02.82-.17.82-.17.5-.05.44-1.25-.06-1.22 0 0-1.44.12-2.38.12-.87 0-2.33-.12-2.33-.12-.5-.03-.56 1.2-.06 1.22l.92.08 1.26 3.41zM17.41 10c.24-.64.74-1.87.43-4.25.7 1.29 1.05 2.71 1.05 4.25 0 3.29-1.73 6.24-4.4 7.78.97-2.59 1.94-5.2 2.92-7.78zM6.1 18.09C3.12 16.65 1.11 13.53 1.11 10c0-1.3.23-2.48.72-3.59C3.25 10.3 4.67 14.2 6.1 18.09zm4.03-6.63l2.58 6.98c-.86.29-1.76.45-2.71.45-.79 0-1.57-.11-2.29-.33.81-2.38 1.62-4.74 2.42-7.1z"
+        />
+      </svg>
+    </a>
+  </div>
+</div>
+`;

package/src/components/header/fullscreen-mode-close/test/index.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 
 /**
  * WordPress dependencies
@@ -36,12 +36,11 @@ describe( 'FullscreenModeClose', () => {
 				} ) );
 			} );
 
-			const { container } = render( <FullscreenModeClose /> );
-			const siteIcon = container.querySelector(
-				'.edit-post-fullscreen-mode-close_site-icon'
-			);
+			render( <FullscreenModeClose /> );
+
+			const siteIcon = screen.getByAltText( 'Site Icon' );
 
-			expect( siteIcon ).toBeTruthy();
+			expect( siteIcon ).toBeVisible();
 		} );
 
 		it( 'should display a default site icon if no user uploaded site icon exists', () => {
@@ -58,13 +57,12 @@ describe( 'FullscreenModeClose', () => {
 			} );
 
 			const { container } = render( <FullscreenModeClose /> );
-			const siteIcon = container.querySelector(
-				'.edit-post-fullscreen-mode-close_site-icon'
-			);
-			const defaultIcon = container.querySelector( 'svg' );
 
-			expect( siteIcon ).toBeFalsy();
-			expect( defaultIcon ).toBeTruthy();
+			expect(
+				screen.queryByAltText( 'Site Icon' )
+			).not.toBeInTheDocument();
+
+			expect( container ).toMatchSnapshot();
 		} );
 	} );
 } );

package/src/components/header/header-toolbar/index.js

@@ -10,7 +10,6 @@ import {
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import {
-	TableOfContents,
 	EditorHistoryRedo,
 	EditorHistoryUndo,
 	store as editorStore,
@@ -77,21 +76,14 @@ function HeaderToolbar() {
 	);
 	const overflowItems = (
 		<>
-			<ToolbarItem
-				as={ TableOfContents }
-				hasOutlineItemsDisabled={ isTextModeEnabled }
-				repositionDropdown={ showIconLabels && ! isWideViewport }
-				showTooltip={ ! showIconLabels }
-				variant={ showIconLabels ? 'tertiary' : undefined }
-			/>
 			<ToolbarItem
 				as={ Button }
-				className="edit-post-header-toolbar__list-view-toggle"
+				className="edit-post-header-toolbar__document-overview-toggle"
 				icon={ listView }
 				disabled={ isTextModeEnabled }
 				isPressed={ isListViewOpen }
 				/* translators: button label text should, if possible, be under 16 characters. */
-				label={ __( 'List View' ) }
+				label={ __( 'Document Overview' ) }
 				onClick={ toggleListView }
 				shortcut={ listViewShortcut }
 				showTooltip={ ! showIconLabels }

package/src/components/header/index.js

@@ -24,12 +24,13 @@ import MainDashboardButton from './main-dashboard-button';
 import { store as editPostStore } from '../../store';
 import TemplateTitle from './template-title';
 
-function Header( { setEntitiesSavedStatesCallback, isDistractionFree } ) {
+function Header( { setEntitiesSavedStatesCallback } ) {
 	const {
 		hasActiveMetaboxes,
 		isPublishSidebarOpened,
 		isSaving,
 		showIconLabels,
+		isDistractionFree,
 	} = useSelect(
 		( select ) => ( {
 			hasActiveMetaboxes: select( editPostStore ).hasMetaBoxes(),
@@ -38,6 +39,8 @@ function Header( { setEntitiesSavedStatesCallback, isDistractionFree } ) {
 			isSaving: select( editPostStore ).isSavingMetaBoxes(),
 			showIconLabels:
 				select( editPostStore ).isFeatureActive( 'showIconLabels' ),
+			isDistractionFree:
+				select( editPostStore ).isFeatureActive( 'distractionFree' ),
 		} ),
 		[]
 	);

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

@@ -36,7 +36,7 @@ const MoreMenu = ( { showIconLabels } ) => {
 							scope="core/edit-post"
 						/>
 					) }
-					<WritingMenu onClose={ onClose } />
+					<WritingMenu />
 					<ModeSwitcher />
 					<ActionItem.Slot
 						name="core/edit-post/plugin-more-menu"

package/src/components/header/style.scss

@@ -146,16 +146,11 @@
 		}
 	}
 
-	// The post saved state button has a custom label only on small breakpoint
-	.editor-post-save-draft.editor-post-save-draft {
+	.editor-post-save-draft.editor-post-save-draft,
+	.editor-post-saved-state.editor-post-saved-state {
 		&::after {
 			content: none;
 		}
-		@include break-small {
-			&::after {
-				content: attr(aria-label);
-			}
-		}
 	}
 }
 
@@ -220,7 +215,7 @@
 		}
 
 		& > .edit-post-header__toolbar .edit-post-header-toolbar__inserter-toggle,
-		& > .edit-post-header__toolbar .edit-post-header-toolbar__list-view-toggle,
+		& > .edit-post-header__toolbar .edit-post-header-toolbar__document-overview-toggle,
 		& > .edit-post-header__settings > .block-editor-post-preview__dropdown,
 		& > .edit-post-header__settings > .interface-pinned-items {
 			display: none;
@@ -242,5 +237,4 @@
 		position: absolute;
 		z-index: 35;
 	}
-
 }

package/src/components/header/writing-menu/index.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { useSelect, useDispatch } from '@wordpress/data';
+import { useSelect, useDispatch, useRegistry } from '@wordpress/data';
 import { MenuGroup } from '@wordpress/components';
 import { __, _x } from '@wordpress/i18n';
 import { useViewportMatch } from '@wordpress/compose';
@@ -17,7 +17,8 @@ import { store as blockEditorStore } from '@wordpress/block-editor';
  */
 import { store as postEditorStore } from '../../../store';
 
-function WritingMenu( { onClose } ) {
+function WritingMenu() {
+	const registry = useRegistry();
 	const isDistractionFree = useSelect(
 		( select ) =>
 			select( blockEditorStore ).getSettings().isDistractionFree,
@@ -36,14 +37,15 @@ function WritingMenu( { onClose } ) {
 	const { selectBlock } = useDispatch( blockEditorStore );
 
 	const toggleDistractionFree = () => {
-		setPreference( 'core/edit-post', 'fixedToolbar', false );
-		setIsInserterOpened( false );
-		setIsListViewOpened( false );
-		closeGeneralSidebar();
-		onClose();
-		if ( ! isDistractionFree ) {
-			selectBlock( blocks[ 0 ].clientId );
-		}
+		registry.batch( () => {
+			setPreference( 'core/edit-post', 'fixedToolbar', false );
+			setIsInserterOpened( false );
+			setIsListViewOpened( false );
+			closeGeneralSidebar();
+			if ( ! isDistractionFree && !! blocks.length ) {
+				selectBlock( blocks[ 0 ].clientId );
+			}
+		} );
 	};
 
 	const isLargeViewport = useViewportMatch( 'medium' );
@@ -84,7 +86,7 @@ function WritingMenu( { onClose } ) {
 			<PreferenceToggleMenuItem
 				scope="core/edit-post"
 				name="distractionFree"
-				toggleHandler={ toggleDistractionFree }
+				onToggle={ toggleDistractionFree }
 				label={ __( 'Distraction free' ) }
 				info={ __( 'Write with calmness' ) }
 				messageActivated={ __( 'Distraction free mode activated' ) }

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

@@ -36,4 +36,14 @@ export const textFormattingShortcuts = [
 		keyCombination: { modifier: 'access', character: 'x' },
 		description: __( 'Make the selected text inline code.' ),
 	},
+	{
+		keyCombination: { modifier: 'access', character: '0' },
+		description: __( 'Convert the current heading to a paragraph.' ),
+	},
+	{
+		keyCombination: { modifier: 'access', character: '1-6' },
+		description: __(
+			'Convert the current paragraph or heading to a heading of level 1 to 6.'
+		),
+	},
 ];

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

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { castArray } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -26,20 +21,22 @@ function KeyCombination( { keyCombination, forceAriaLabel } ) {
 			className="edit-post-keyboard-shortcut-help-modal__shortcut-key-combination"
 			aria-label={ forceAriaLabel || ariaLabel }
 		>
-			{ castArray( shortcut ).map( ( character, index ) => {
-				if ( character === '+' ) {
-					return <Fragment key={ index }>{ character }</Fragment>;
-				}
+			{ ( Array.isArray( shortcut ) ? shortcut : [ shortcut ] ).map(
+				( character, index ) => {
+					if ( character === '+' ) {
+						return <Fragment key={ index }>{ character }</Fragment>;
+					}
 
-				return (
-					<kbd
-						key={ index }
-						className="edit-post-keyboard-shortcut-help-modal__shortcut-key"
-					>
-						{ character }
-					</kbd>
-				);
-			} ) }
+					return (
+						<kbd
+							key={ index }
+							className="edit-post-keyboard-shortcut-help-modal__shortcut-key"
+						>
+							{ character }
+						</kbd>
+					);
+				}
+			) }
 		</kbd>
 	);
 }

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

@@ -821,6 +821,76 @@ exports[`KeyboardShortcutHelpModal should match snapshot when the modal is activ
             </kbd>
           </div>
         </li>
+        <li
+          class="edit-post-keyboard-shortcut-help-modal__shortcut"
+        >
+          <div
+            class="edit-post-keyboard-shortcut-help-modal__shortcut-description"
+          >
+            Convert the current heading to a paragraph.
+          </div>
+          <div
+            class="edit-post-keyboard-shortcut-help-modal__shortcut-term"
+          >
+            <kbd
+              aria-label="Shift + Alt + 0"
+              class="edit-post-keyboard-shortcut-help-modal__shortcut-key-combination"
+            >
+              <kbd
+                class="edit-post-keyboard-shortcut-help-modal__shortcut-key"
+              >
+                Shift
+              </kbd>
+              +
+              <kbd
+                class="edit-post-keyboard-shortcut-help-modal__shortcut-key"
+              >
+                Alt
+              </kbd>
+              +
+              <kbd
+                class="edit-post-keyboard-shortcut-help-modal__shortcut-key"
+              >
+                0
+              </kbd>
+            </kbd>
+          </div>
+        </li>
+        <li
+          class="edit-post-keyboard-shortcut-help-modal__shortcut"
+        >
+          <div
+            class="edit-post-keyboard-shortcut-help-modal__shortcut-description"
+          >
+            Convert the current paragraph or heading to a heading of level 1 to 6.
+          </div>
+          <div
+            class="edit-post-keyboard-shortcut-help-modal__shortcut-term"
+          >
+            <kbd
+              aria-label="Shift + Alt + 1 6"
+              class="edit-post-keyboard-shortcut-help-modal__shortcut-key-combination"
+            >
+              <kbd
+                class="edit-post-keyboard-shortcut-help-modal__shortcut-key"
+              >
+                Shift
+              </kbd>
+              +
+              <kbd
+                class="edit-post-keyboard-shortcut-help-modal__shortcut-key"
+              >
+                Alt
+              </kbd>
+              +
+              <kbd
+                class="edit-post-keyboard-shortcut-help-modal__shortcut-key"
+              >
+                1-6
+              </kbd>
+            </kbd>
+          </div>
+        </li>
       </ul>
     </section>
   </div>