@wordpress/edit-post 6.7.0 → 6.10.0

package/build-style/style.css

@@ -468,9 +468,6 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   .interface-preferences-modal .components-modal__content {
     padding: 0;
   }
-  .interface-preferences-modal .components-modal__content::before {
-    content: none;
-  }
 }
 
 .interface-preferences__tabs .components-tab-panel__tabs {
@@ -806,8 +803,7 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   width: 36px;
   height: 36px;
   border-radius: 2px;
-  -o-object-fit: cover;
-     object-fit: cover;
+  object-fit: cover;
   margin-top: -1px;
 }
 
@@ -1009,9 +1005,6 @@ body.is-fullscreen-mode .interface-interface-skeleton {
 .edit-post-keyboard-shortcut-help-modal__section {
   margin: 0 0 2rem 0;
 }
-.edit-post-keyboard-shortcut-help-modal__main-shortcuts .edit-post-keyboard-shortcut-help-modal__shortcut-list {
-  margin-top: -25px;
-}
 .edit-post-keyboard-shortcut-help-modal__section-title {
   font-size: 0.9rem;
   font-weight: 600;
@@ -1431,77 +1424,123 @@ body.is-fullscreen-mode .edit-post-layout .components-editor-notices__snackbar {
   padding: 16px;
 }
 
-.editor-post-author__select {
-  margin: -5px 0;
+.edit-post-post-author {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+}
+
+.edit-post-post-format {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+}
+
+.edit-post-post-schedule {
   width: 100%;
+  position: relative;
+  justify-content: flex-start;
 }
-@supports (position: sticky) {
-  .editor-post-author__select {
-    width: auto;
-  }
+.edit-post-post-schedule span {
+  display: block;
+  width: 45%;
+  flex-shrink: 0;
 }
 
-.edit-post-post-link__link-post-name {
-  font-weight: 600;
+.components-button.edit-post-post-schedule__toggle {
+  text-align: left;
+  white-space: normal;
+  height: auto;
+}
+.components-button.edit-post-post-schedule__toggle span {
+  width: 0;
 }
 
-.edit-post-post-link__preview-label {
-  font-weight: 400;
-  margin: 0;
+.edit-post-post-schedule__dialog .block-editor-publish-date-time-picker {
+  margin: 8px;
 }
 
-.edit-post-post-link__link {
-  text-align: left;
-  word-wrap: break-word;
-  display: block;
+.edit-post-post-slug {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
 }
 
-/* rtl:begin:ignore */
-.edit-post-post-link__preview-link-container {
-  direction: ltr;
+.edit-post-post-status .edit-post-post-publish-dropdown__switch-to-draft {
+  margin-top: 15px;
+  width: 100%;
+  text-align: center;
 }
 
-/* rtl:end:ignore */
-.edit-post-post-schedule {
+.edit-post-post-template {
   width: 100%;
-  position: relative;
-  justify-content: left;
+  justify-content: flex-start;
 }
-.edit-post-post-schedule span {
+.edit-post-post-template span {
   display: block;
   width: 45%;
 }
 
-.components-button.edit-post-post-schedule__toggle {
-  text-align: right;
+.edit-post-post-template__dropdown {
+  max-width: 55%;
 }
 
-.edit-post-post-schedule__dialog .components-popover__content {
-  padding: 16px;
+.components-button.edit-post-post-template__toggle {
+  display: inline-block;
+  width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
-.editor-post-slug__input {
-  margin: -5px 0;
-  padding: 2px;
+.edit-post-post-template__dialog {
+  z-index: 99999;
 }
 
-.edit-post-post-status .edit-post-post-publish-dropdown__switch-to-draft {
-  margin-top: 15px;
+.edit-post-post-template__form {
+  min-width: 248px;
+  margin: 8px;
+}
+
+@media (min-width: 782px) {
+  .edit-post-post-template__create-form {
+    width: 320px;
+  }
+}
+
+.edit-post-post-url {
   width: 100%;
-  text-align: center;
+  justify-content: flex-start;
+}
+.edit-post-post-url span {
+  display: block;
+  width: 45%;
+  flex-shrink: 0;
+}
+
+.components-button.edit-post-post-url__toggle {
+  text-align: left;
+  white-space: normal;
+  height: auto;
+  word-break: break-word;
+}
+
+.edit-post-post-url__dialog .editor-post-url {
+  min-width: 248px;
+  margin: 8px;
 }
 
 .edit-post-post-visibility {
   width: 100%;
-  justify-content: left;
+  justify-content: flex-start;
 }
 .edit-post-post-visibility span {
   display: block;
   width: 45%;
 }
 
-.edit-post-post-visibility__dialog .components-popover__content {
-  width: 262px;
+.edit-post-post-visibility__dialog .editor-post-visibility {
+  min-width: 248px;
+  margin: 8px;
 }
 
 .components-button.edit-post-sidebar__panel-tab {
@@ -1548,44 +1587,6 @@ body.is-fullscreen-mode .edit-post-layout .components-editor-notices__snackbar {
   box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color), inset 0 -3px 0 0 var(--wp-admin-theme-color);
 }
 
-@media (min-width: 782px) {
-  .edit-post-template__modal .components-base-control {
-    width: 320px;
-  }
-}
-.edit-post-template__modal .components-modal__header {
-  border-bottom: none;
-}
-.edit-post-template__modal .components-modal__content::before {
-  margin-bottom: 4px;
-}
-
-.edit-post-template__modal-actions {
-  margin-top: 12px;
-}
-
-.edit-post-template-modal__tip {
-  padding: 16px 24px;
-  background: #f0f0f0;
-  border-radius: 2px;
-}
-@media (min-width: 782px) {
-  .edit-post-template-modal__tip {
-    width: 240px;
-  }
-}
-
-.edit-post-template__notice {
-  margin: 0 0 8px 0;
-}
-.edit-post-template__notice .components-notice__content {
-  margin: 0;
-}
-
-.edit-post-template__actions button:not(:last-child) {
-  margin-right: 8px;
-}
-
 h2.edit-post-template-summary__title {
   line-height: 24px;
   margin: 0 0 4px;
@@ -1718,8 +1719,7 @@ h2.edit-post-template-summary__title {
 .edit-template-welcome-guide__image > img {
   display: block;
   max-width: 100%;
-  -o-object-fit: cover;
-     object-fit: cover;
+  object-fit: cover;
 }
 .edit-post-welcome-guide__heading,
 .edit-template-welcome-guide__heading {
@@ -1762,12 +1762,6 @@ h2.edit-post-template-summary__title {
     height: 70%;
   }
 }
-.edit-post-start-page-options__modal .components-modal__header {
-  border-bottom: none;
-}
-.edit-post-start-page-options__modal .components-modal__content::before {
-  content: none;
-}
 
 .edit-post-start-page-options__modal-content .block-editor-block-patterns-list {
   column-count: 2;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/edit-post",
-	"version": "6.7.0",
+	"version": "6.10.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.10.0",
-		"@wordpress/api-fetch": "^6.7.0",
-		"@wordpress/block-editor": "^9.2.0",
-		"@wordpress/block-library": "^7.7.0",
-		"@wordpress/blocks": "^11.9.0",
-		"@wordpress/components": "^19.12.0",
-		"@wordpress/compose": "^5.8.0",
-		"@wordpress/core-data": "^4.8.0",
-		"@wordpress/data": "^6.10.0",
-		"@wordpress/deprecated": "^3.10.0",
-		"@wordpress/editor": "^12.9.0",
-		"@wordpress/element": "^4.8.0",
-		"@wordpress/hooks": "^3.10.0",
-		"@wordpress/i18n": "^4.10.0",
-		"@wordpress/icons": "^9.1.0",
-		"@wordpress/interface": "^4.9.0",
-		"@wordpress/keyboard-shortcuts": "^3.8.0",
-		"@wordpress/keycodes": "^3.10.0",
-		"@wordpress/media-utils": "^4.1.0",
-		"@wordpress/notices": "^3.10.0",
-		"@wordpress/plugins": "^4.8.0",
-		"@wordpress/preferences": "^2.2.0",
-		"@wordpress/url": "^3.11.0",
-		"@wordpress/viewport": "^4.8.0",
-		"@wordpress/warning": "^2.10.0",
+		"@wordpress/a11y": "^3.13.0",
+		"@wordpress/api-fetch": "^6.10.0",
+		"@wordpress/block-editor": "^9.5.0",
+		"@wordpress/block-library": "^7.10.0",
+		"@wordpress/blocks": "^11.12.0",
+		"@wordpress/components": "^19.15.0",
+		"@wordpress/compose": "^5.11.0",
+		"@wordpress/core-data": "^4.11.0",
+		"@wordpress/data": "^6.13.0",
+		"@wordpress/deprecated": "^3.13.0",
+		"@wordpress/editor": "^12.12.0",
+		"@wordpress/element": "^4.11.0",
+		"@wordpress/hooks": "^3.13.0",
+		"@wordpress/i18n": "^4.13.0",
+		"@wordpress/icons": "^9.4.0",
+		"@wordpress/interface": "^4.12.0",
+		"@wordpress/keyboard-shortcuts": "^3.11.0",
+		"@wordpress/keycodes": "^3.13.0",
+		"@wordpress/media-utils": "^4.4.0",
+		"@wordpress/notices": "^3.13.0",
+		"@wordpress/plugins": "^4.11.0",
+		"@wordpress/preferences": "^2.5.0",
+		"@wordpress/url": "^3.14.0",
+		"@wordpress/viewport": "^4.11.0",
+		"@wordpress/warning": "^2.13.0",
 		"classnames": "^2.3.1",
 		"lodash": "^4.17.21",
 		"memize": "^1.1.0",
@@ -64,5 +64,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "a3e0b62091e8a8bdf5e2518e42d60d7098af48cc"
+	"gitHead": "9d9d33bbdf317a4381b8ca1713e43bb50df653b3"
 }

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

@@ -25,8 +25,8 @@ function BlockManagerCategory( { title, blockTypes } ) {
 			const { getEditorSettings } = select( editorStore );
 			const { getHiddenBlockTypes } = select( editPostStore );
 			return {
-				defaultAllowedBlockTypes: getEditorSettings()
-					.defaultAllowedBlockTypes,
+				defaultAllowedBlockTypes:
+					getEditorSettings().defaultAllowedBlockTypes,
 				hiddenBlockTypes: getHiddenBlockTypes(),
 			};
 		},

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { filter, includes, isArray } from 'lodash';
+import { filter, includes } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -117,12 +117,23 @@ export default withSelect( ( select ) => {
 		isMatchingSearchTerm,
 	} = select( blocksStore );
 	const { getHiddenBlockTypes } = select( editPostStore );
-	const hiddenBlockTypes = getHiddenBlockTypes();
+
+	// Some hidden blocks become unregistered
+	// by removing for instance the plugin that registered them, yet
+	// they're still remain as hidden by the user's action.
+	// We consider "hidden", blocks which were hidden and
+	// are still registered.
+	const blockTypes = getBlockTypes();
+	const hiddenBlockTypes = getHiddenBlockTypes().filter( ( hiddenBlock ) => {
+		return blockTypes.some(
+			( registeredBlock ) => registeredBlock.name === hiddenBlock
+		);
+	} );
 	const numberOfHiddenBlocks =
-		isArray( hiddenBlockTypes ) && hiddenBlockTypes.length;
+		Array.isArray( hiddenBlockTypes ) && hiddenBlockTypes.length;
 
 	return {
-		blockTypes: getBlockTypes(),
+		blockTypes,
 		categories: getCategories(),
 		hasBlockSupport,
 		isMatchingSearchTerm,

package/src/components/device-preview/index.js

@@ -36,14 +36,12 @@ export default function DevicePreview() {
 			isSaving: select( editPostStore ).isSavingMetaBoxes(),
 			isPostSaveable: select( editorStore ).isEditedPostSaveable(),
 			isViewable: get( postType, [ 'viewable' ], false ),
-			deviceType: select(
-				editPostStore
-			).__experimentalGetPreviewDeviceType(),
+			deviceType:
+				select( editPostStore ).__experimentalGetPreviewDeviceType(),
 		};
 	}, [] );
-	const {
-		__experimentalSetPreviewDeviceType: setPreviewDeviceType,
-	} = useDispatch( editPostStore );
+	const { __experimentalSetPreviewDeviceType: setPreviewDeviceType } =
+		useDispatch( editPostStore );
 
 	return (
 		<PreviewOptions

package/src/components/editor-initialization/listener-hooks.js

@@ -24,9 +24,8 @@ import {
 export const useBlockSelectionListener = ( postId ) => {
 	const { hasBlockSelection, isEditorSidebarOpened } = useSelect(
 		( select ) => ( {
-			hasBlockSelection: !! select(
-				blockEditorStore
-			).getBlockSelectionStart(),
+			hasBlockSelection:
+				!! select( blockEditorStore ).getBlockSelectionStart(),
 			isEditorSidebarOpened: select( STORE_NAME ).isEditorSidebarOpened(),
 		} ),
 		[ postId ]

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

@@ -30,9 +30,8 @@ function FullscreenModeClose( { showTooltip, icon, href } ) {
 		( select ) => {
 			const { getCurrentPostType } = select( editorStore );
 			const { isFeatureActive } = select( editPostStore );
-			const { getEntityRecord, getPostType, isResolving } = select(
-				coreStore
-			);
+			const { getEntityRecord, getPostType, isResolving } =
+				select( coreStore );
 			const siteData =
 				getEntityRecord( 'root', '__unstableBase', undefined ) || {};
 

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

@@ -31,9 +31,8 @@ const preventDefault = ( event ) => {
 
 function HeaderToolbar() {
 	const inserterButton = useRef();
-	const { setIsInserterOpened, setIsListViewOpened } = useDispatch(
-		editPostStore
-	);
+	const { setIsInserterOpened, setIsListViewOpened } =
+		useDispatch( editPostStore );
 	const {
 		isInserterEnabled,
 		isInserterOpened,
@@ -42,15 +41,11 @@ function HeaderToolbar() {
 		isListViewOpen,
 		listViewShortcut,
 	} = useSelect( ( select ) => {
-		const {
-			hasInserterItems,
-			getBlockRootClientId,
-			getBlockSelectionEnd,
-		} = select( blockEditorStore );
+		const { hasInserterItems, getBlockRootClientId, getBlockSelectionEnd } =
+			select( blockEditorStore );
 		const { getEditorSettings } = select( editorStore );
-		const { getEditorMode, isFeatureActive, isListViewOpened } = select(
-			editPostStore
-		);
+		const { getEditorMode, isFeatureActive, isListViewOpened } =
+			select( editPostStore );
 		const { getShortcutRepresentation } = select( keyboardShortcutsStore );
 
 		return {

package/src/components/header/index.js

@@ -33,16 +33,13 @@ function Header( { setEntitiesSavedStatesCallback } ) {
 	} = useSelect(
 		( select ) => ( {
 			hasActiveMetaboxes: select( editPostStore ).hasMetaBoxes(),
-			isPublishSidebarOpened: select(
-				editPostStore
-			).isPublishSidebarOpened(),
+			isPublishSidebarOpened:
+				select( editPostStore ).isPublishSidebarOpened(),
 			isSaving: select( editPostStore ).isSavingMetaBoxes(),
-			showIconLabels: select( editPostStore ).isFeatureActive(
-				'showIconLabels'
-			),
-			hasReducedUI: select( editPostStore ).isFeatureActive(
-				'reducedUI'
-			),
+			showIconLabels:
+				select( editPostStore ).isFeatureActive( 'showIconLabels' ),
+			hasReducedUI:
+				select( editPostStore ).isFeatureActive( 'reducedUI' ),
 		} ),
 		[]
 	);

package/src/components/header/mode-switcher/index.js

@@ -40,10 +40,10 @@ function ModeSwitcher() {
 			shortcut: select(
 				keyboardShortcutsStore
 			).getShortcutRepresentation( 'core/edit-post/toggle-mode' ),
-			isRichEditingEnabled: select( editorStore ).getEditorSettings()
-				.richEditingEnabled,
-			isCodeEditingEnabled: select( editorStore ).getEditorSettings()
-				.codeEditingEnabled,
+			isRichEditingEnabled:
+				select( editorStore ).getEditorSettings().richEditingEnabled,
+			isCodeEditingEnabled:
+				select( editorStore ).getEditorSettings().codeEditingEnabled,
 			isEditingTemplate: select( editPostStore ).isEditingTemplate(),
 			mode: select( editPostStore ).getEditorMode(),
 		} ),

package/src/components/header/post-publish-button-or-toggle.js

@@ -91,12 +91,10 @@ export default compose(
 		isBeingScheduled: select( editorStore ).isEditedPostBeingScheduled(),
 		isPending: select( editorStore ).isCurrentPostPending(),
 		isPublished: select( editorStore ).isCurrentPostPublished(),
-		isPublishSidebarEnabled: select(
-			editorStore
-		).isPublishSidebarEnabled(),
-		isPublishSidebarOpened: select(
-			editPostStore
-		).isPublishSidebarOpened(),
+		isPublishSidebarEnabled:
+			select( editorStore ).isPublishSidebarEnabled(),
+		isPublishSidebarOpened:
+			select( editPostStore ).isPublishSidebarOpened(),
 		isScheduled: select( editorStore ).isCurrentPostScheduled(),
 	} ) ),
 	withDispatch( ( dispatch ) => {

package/src/components/header/template-title/delete-template.js

@@ -30,9 +30,8 @@ export default function DeleteTemplate() {
 	const { updateEditorSettings, editPost } = useDispatch( editorStore );
 	const { deleteEntityRecord } = useDispatch( coreStore );
 	const { template } = useSelect( ( select ) => {
-		const { isEditingTemplate, getEditedPostTemplate } = select(
-			editPostStore
-		);
+		const { isEditingTemplate, getEditedPostTemplate } =
+			select( editPostStore );
 		const _isEditing = isEditingTemplate();
 		return {
 			template: _isEditing ? getEditedPostTemplate() : null,

package/src/components/header/template-title/edit-template-title.js

@@ -9,6 +9,7 @@ import { mapValues } from 'lodash';
 import { __ } from '@wordpress/i18n';
 import { TextControl } from '@wordpress/components';
 import { useDispatch, useSelect } from '@wordpress/data';
+import { useState } from '@wordpress/element';
 import { store as editorStore } from '@wordpress/editor';
 import { store as coreStore } from '@wordpress/core-data';
 
@@ -18,6 +19,7 @@ import { store as coreStore } from '@wordpress/core-data';
 import { store as editPostStore } from '../../../store';
 
 export default function EditTemplateTitle() {
+	const [ forceEmpty, setForceEmpty ] = useState( false );
 	const { template } = useSelect( ( select ) => {
 		const { getEditedPostTemplate } = select( editPostStore );
 		return {
@@ -45,11 +47,18 @@ export default function EditTemplateTitle() {
 		<div className="edit-site-template-details__group">
 			<TextControl
 				label={ __( 'Title' ) }
-				value={ templateTitle }
+				value={ forceEmpty ? '' : templateTitle }
 				help={ __(
 					'Give the template a title that indicates its purpose, e.g. "Full Width".'
 				) }
 				onChange={ ( newTitle ) => {
+					// Allow having the field temporarily empty while typing.
+					if ( ! newTitle && ! forceEmpty ) {
+						setForceEmpty( true );
+						return;
+					}
+					setForceEmpty( false );
+
 					const settings = getEditorSettings();
 					const newAvailableTemplates = mapValues(
 						settings.availableTemplates,
@@ -68,6 +77,7 @@ export default function EditTemplateTitle() {
 						title: newTitle,
 					} );
 				} }
+				onBlur={ () => setForceEmpty( false ) }
 			/>
 		</div>
 	);

package/src/components/header/template-title/index.js

@@ -22,9 +22,8 @@ import TemplateDescription from './template-description';
 
 function TemplateTitle() {
 	const { template, isEditing, title } = useSelect( ( select ) => {
-		const { isEditingTemplate, getEditedPostTemplate } = select(
-			editPostStore
-		);
+		const { isEditingTemplate, getEditedPostTemplate } =
+			select( editPostStore );
 		const { getEditedPostAttribute } = select( editorStore );
 
 		const _isEditing = isEditingTemplate();

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

@@ -9,9 +9,8 @@ import { isEmpty } from 'lodash';
 import { createSlotFill, MenuGroup } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
-const { Fill: ToolsMoreMenuGroup, Slot } = createSlotFill(
-	'ToolsMoreMenuGroup'
-);
+const { Fill: ToolsMoreMenuGroup, Slot } =
+	createSlotFill( 'ToolsMoreMenuGroup' );
 
 ToolsMoreMenuGroup.Slot = ( { fillProps } ) => (
 	<Slot fillProps={ fillProps }>

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

@@ -28,4 +28,12 @@ export const textFormattingShortcuts = [
 		keyCombination: { modifier: 'primary', character: 'u' },
 		description: __( 'Underline the selected text.' ),
 	},
+	{
+		keyCombination: { modifier: 'access', character: 'd' },
+		description: __( 'Strikethrough the selected text.' ),
+	},
+	{
+		keyCombination: { modifier: 'access', character: 'x' },
+		description: __( 'Make the selected text inline code.' ),
+	},
 ];

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

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { isString } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -41,7 +40,7 @@ const ShortcutList = ( { shortcuts } ) => (
 				className="edit-post-keyboard-shortcut-help-modal__shortcut"
 				key={ index }
 			>
-				{ isString( shortcut ) ? (
+				{ typeof shortcut === 'string' ? (
 					<DynamicShortcut name={ shortcut } />
 				) : (
 					<Shortcut { ...shortcut } />

package/src/components/keyboard-shortcut-help-modal/style.scss

@@ -3,11 +3,6 @@
 		margin: 0 0 2rem 0;
 	}
 
-	&__main-shortcuts .edit-post-keyboard-shortcut-help-modal__shortcut-list {
-		// Push the shortcut to be flush with top modal header.
-		margin-top: -$grid-unit-30 -$border-width;
-	}
-
 	&__section-title {
 		font-size: 0.9rem;
 		font-weight: 600;

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

@@ -82,6 +82,20 @@ exports[`KeyboardShortcutHelpModal should match snapshot when the modal is activ
             "modifier": "primary",
           },
         },
+        Object {
+          "description": "Strikethrough the selected text.",
+          "keyCombination": Object {
+            "character": "d",
+            "modifier": "access",
+          },
+        },
+        Object {
+          "description": "Make the selected text inline code.",
+          "keyCombination": Object {
+            "character": "x",
+            "modifier": "access",
+          },
+        },
       ]
     }
     title="Text formatting"