@wordpress/editor 13.31.0 → 13.32.0

package/build-style/style-rtl.css

@@ -226,16 +226,22 @@
   min-width: 0;
   background: #f0f0f0;
   border-radius: 4px;
-  width: min(100%, 450px);
+  width: min(100%, 416px);
 }
 .editor-document-bar:hover {
   background-color: #e0e0e0;
 }
 .editor-document-bar .components-button {
   border-radius: 4px;
+  transition: all 0.1s ease-out;
+}
+@media (prefers-reduced-motion: reduce) {
+  .editor-document-bar .components-button {
+    transition-duration: 0s;
+    transition-delay: 0s;
+  }
 }
 .editor-document-bar .components-button:hover {
-  color: var(--wp-block-synced-color);
   background: #e0e0e0;
 }
 @media (min-width: 960px) {
@@ -253,20 +259,17 @@
 .editor-document-bar__title {
   flex-grow: 1;
   overflow: hidden;
-  color: #2f2f2f;
+  color: #1e1e1e;
   gap: 4px;
   display: flex;
   justify-content: center;
   align-items: center;
 }
-@media (min-width: 600px) {
+@media (min-width: 782px) {
   .editor-document-bar__title {
-    padding-right: 32px;
+    padding-right: 24px;
   }
 }
-.editor-document-bar__title:hover {
-  color: var(--wp-block-synced-color);
-}
 .editor-document-bar.is-global .editor-document-bar__title {
   color: var(--wp-block-synced-color);
 }
@@ -278,13 +281,13 @@
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  max-width: 50%;
+  max-width: 70%;
   color: currentColor;
 }
 
 .editor-document-bar__shortcut {
   color: #2f2f2f;
-  min-width: 32px;
+  min-width: 24px;
   display: none;
 }
 @media (min-width: 782px) {
@@ -302,7 +305,7 @@
   position: absolute;
 }
 .editor-document-bar__back.components-button.has-icon.has-text:hover {
-  color: var(--wp-block-synced-color);
+  color: #1e1e1e;
   background-color: transparent;
 }
 
@@ -393,11 +396,13 @@
   display: inline-flex;
   align-items: center;
 }
-.editor-document-tools .editor-document-tools__left > .components-button {
+.editor-document-tools .editor-document-tools__left > .editor-history__redo,
+.editor-document-tools .editor-document-tools__left > .editor-history__undo {
   display: none;
 }
-@media (min-width: 600px) {
-  .editor-document-tools .editor-document-tools__left > .components-button {
+@media (min-width: 782px) {
+  .editor-document-tools .editor-document-tools__left > .editor-history__redo,
+.editor-document-tools .editor-document-tools__left > .editor-history__undo {
     display: inline-flex;
   }
 }
@@ -451,16 +456,6 @@
   gap: 8px;
   margin-left: 8px;
 }
-@media (min-width: 782px) {
-  .editor-document-tools__left {
-    padding-right: 20px;
-  }
-}
-@media (min-width: 1280px) {
-  .editor-document-tools__left {
-    padding-left: 8px;
-  }
-}
 
 .editor-document-tools .editor-document-tools__left > .editor-document-tools__inserter-toggle.has-icon {
   min-width: 32px;
@@ -584,7 +579,7 @@
   background: #fff;
   order: 1;
   align-self: center;
-  margin-left: 8px;
+  margin-left: 12px;
 }
 
 .editor-list-view-sidebar__tabs-tablist {
@@ -682,6 +677,32 @@
   width: 100%;
 }
 
+.editor-post-card-panel__content {
+  flex-grow: 1;
+}
+.editor-post-card-panel__title {
+  width: 100%;
+}
+.editor-post-card-panel__title.editor-post-card-panel__title {
+  margin: 3px 0 0 0;
+}
+.editor-post-card-panel__icon {
+  flex: 0 0 24px;
+  width: 24px;
+  height: 24px;
+}
+.editor-post-card-panel__header {
+  display: flex;
+  justify-content: space-between;
+  margin: 0 0 8px;
+}
+.editor-post-card-panel__description {
+  color: #757575;
+}
+.editor-post-card-panel__description .components-text {
+  color: inherit;
+}
+
 .editor-post-excerpt__textarea {
   width: 100%;
   margin-bottom: 10px;
@@ -700,7 +721,6 @@
 
 .editor-post-featured-image__container {
   position: relative;
-  aspect-ratio: 2/1;
 }
 .editor-post-featured-image__container:hover .editor-post-featured-image__actions, .editor-post-featured-image__container:focus .editor-post-featured-image__actions, .editor-post-featured-image__container:focus-within .editor-post-featured-image__actions {
   opacity: 1;
@@ -713,8 +733,9 @@
   transition: all 0.1s ease-out;
   box-shadow: 0 0 0 0 var(--wp-admin-theme-color);
   overflow: hidden;
-  outline: 1px solid rgba(0, 0, 0, 0.1);
   outline-offset: -1px;
+  min-height: 80px;
+  margin-bottom: 16px;
   display: flex;
   justify-content: center;
 }
@@ -728,6 +749,7 @@
 
 .editor-post-featured-image__preview {
   height: auto;
+  outline: 1px solid rgba(0, 0, 0, 0.1);
 }
 .editor-post-featured-image__preview .editor-post-featured-image__preview-image {
   object-fit: cover;
@@ -1449,6 +1471,27 @@
   font-weight: 600;
 }
 
+.editor-template-areas {
+  margin-top: 16px;
+}
+.editor-template-areas__list {
+  margin: 0;
+}
+.editor-template-areas__list > li {
+  margin: 0;
+}
+.editor-template-areas__item {
+  width: 100%;
+}
+.editor-template-areas__item.components-button.has-icon {
+  padding: 0;
+}
+
+h3.components-heading.editor-template-areas__title {
+  font-weight: 500;
+  margin: 0 0 8px;
+}
+
 .editor-template-validation-notice {
   display: flex;
   justify-content: space-between;

package/build-style/style.css

@@ -226,16 +226,22 @@
   min-width: 0;
   background: #f0f0f0;
   border-radius: 4px;
-  width: min(100%, 450px);
+  width: min(100%, 416px);
 }
 .editor-document-bar:hover {
   background-color: #e0e0e0;
 }
 .editor-document-bar .components-button {
   border-radius: 4px;
+  transition: all 0.1s ease-out;
+}
+@media (prefers-reduced-motion: reduce) {
+  .editor-document-bar .components-button {
+    transition-duration: 0s;
+    transition-delay: 0s;
+  }
 }
 .editor-document-bar .components-button:hover {
-  color: var(--wp-block-synced-color);
   background: #e0e0e0;
 }
 @media (min-width: 960px) {
@@ -253,20 +259,17 @@
 .editor-document-bar__title {
   flex-grow: 1;
   overflow: hidden;
-  color: #2f2f2f;
+  color: #1e1e1e;
   gap: 4px;
   display: flex;
   justify-content: center;
   align-items: center;
 }
-@media (min-width: 600px) {
+@media (min-width: 782px) {
   .editor-document-bar__title {
-    padding-left: 32px;
+    padding-left: 24px;
   }
 }
-.editor-document-bar__title:hover {
-  color: var(--wp-block-synced-color);
-}
 .editor-document-bar.is-global .editor-document-bar__title {
   color: var(--wp-block-synced-color);
 }
@@ -278,13 +281,13 @@
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  max-width: 50%;
+  max-width: 70%;
   color: currentColor;
 }
 
 .editor-document-bar__shortcut {
   color: #2f2f2f;
-  min-width: 32px;
+  min-width: 24px;
   display: none;
 }
 @media (min-width: 782px) {
@@ -302,7 +305,7 @@
   position: absolute;
 }
 .editor-document-bar__back.components-button.has-icon.has-text:hover {
-  color: var(--wp-block-synced-color);
+  color: #1e1e1e;
   background-color: transparent;
 }
 
@@ -393,11 +396,13 @@
   display: inline-flex;
   align-items: center;
 }
-.editor-document-tools .editor-document-tools__left > .components-button {
+.editor-document-tools .editor-document-tools__left > .editor-history__redo,
+.editor-document-tools .editor-document-tools__left > .editor-history__undo {
   display: none;
 }
-@media (min-width: 600px) {
-  .editor-document-tools .editor-document-tools__left > .components-button {
+@media (min-width: 782px) {
+  .editor-document-tools .editor-document-tools__left > .editor-history__redo,
+.editor-document-tools .editor-document-tools__left > .editor-history__undo {
     display: inline-flex;
   }
 }
@@ -451,16 +456,6 @@
   gap: 8px;
   margin-right: 8px;
 }
-@media (min-width: 782px) {
-  .editor-document-tools__left {
-    padding-left: 20px;
-  }
-}
-@media (min-width: 1280px) {
-  .editor-document-tools__left {
-    padding-right: 8px;
-  }
-}
 
 .editor-document-tools .editor-document-tools__left > .editor-document-tools__inserter-toggle.has-icon {
   min-width: 32px;
@@ -584,7 +579,7 @@
   background: #fff;
   order: 1;
   align-self: center;
-  margin-right: 8px;
+  margin-right: 12px;
 }
 
 .editor-list-view-sidebar__tabs-tablist {
@@ -682,6 +677,32 @@
   width: 100%;
 }
 
+.editor-post-card-panel__content {
+  flex-grow: 1;
+}
+.editor-post-card-panel__title {
+  width: 100%;
+}
+.editor-post-card-panel__title.editor-post-card-panel__title {
+  margin: 3px 0 0 0;
+}
+.editor-post-card-panel__icon {
+  flex: 0 0 24px;
+  width: 24px;
+  height: 24px;
+}
+.editor-post-card-panel__header {
+  display: flex;
+  justify-content: space-between;
+  margin: 0 0 8px;
+}
+.editor-post-card-panel__description {
+  color: #757575;
+}
+.editor-post-card-panel__description .components-text {
+  color: inherit;
+}
+
 .editor-post-excerpt__textarea {
   width: 100%;
   margin-bottom: 10px;
@@ -700,7 +721,6 @@
 
 .editor-post-featured-image__container {
   position: relative;
-  aspect-ratio: 2/1;
 }
 .editor-post-featured-image__container:hover .editor-post-featured-image__actions, .editor-post-featured-image__container:focus .editor-post-featured-image__actions, .editor-post-featured-image__container:focus-within .editor-post-featured-image__actions {
   opacity: 1;
@@ -713,8 +733,9 @@
   transition: all 0.1s ease-out;
   box-shadow: 0 0 0 0 var(--wp-admin-theme-color);
   overflow: hidden;
-  outline: 1px solid rgba(0, 0, 0, 0.1);
   outline-offset: -1px;
+  min-height: 80px;
+  margin-bottom: 16px;
   display: flex;
   justify-content: center;
 }
@@ -728,6 +749,7 @@
 
 .editor-post-featured-image__preview {
   height: auto;
+  outline: 1px solid rgba(0, 0, 0, 0.1);
 }
 .editor-post-featured-image__preview .editor-post-featured-image__preview-image {
   object-fit: cover;
@@ -1453,6 +1475,27 @@
   font-weight: 600;
 }
 
+.editor-template-areas {
+  margin-top: 16px;
+}
+.editor-template-areas__list {
+  margin: 0;
+}
+.editor-template-areas__list > li {
+  margin: 0;
+}
+.editor-template-areas__item {
+  width: 100%;
+}
+.editor-template-areas__item.components-button.has-icon {
+  padding: 0;
+}
+
+h3.components-heading.editor-template-areas__title {
+  font-weight: 500;
+  margin: 0 0 8px;
+}
+
 .editor-template-validation-notice {
   display: flex;
   justify-content: space-between;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/editor",
-	"version": "13.31.0",
+	"version": "13.32.0",
 	"description": "Enhanced block editor for WordPress posts.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -31,40 +31,40 @@
 	],
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
-		"@wordpress/a11y": "^3.54.0",
-		"@wordpress/api-fetch": "^6.51.0",
-		"@wordpress/blob": "^3.54.0",
-		"@wordpress/block-editor": "^12.22.0",
-		"@wordpress/blocks": "^12.31.0",
-		"@wordpress/commands": "^0.25.0",
-		"@wordpress/components": "^27.2.0",
-		"@wordpress/compose": "^6.31.0",
-		"@wordpress/core-data": "^6.31.0",
-		"@wordpress/data": "^9.24.0",
-		"@wordpress/date": "^4.54.0",
-		"@wordpress/deprecated": "^3.54.0",
-		"@wordpress/dom": "^3.54.0",
-		"@wordpress/element": "^5.31.0",
-		"@wordpress/hooks": "^3.54.0",
-		"@wordpress/html-entities": "^3.54.0",
-		"@wordpress/i18n": "^4.54.0",
-		"@wordpress/icons": "^9.45.0",
-		"@wordpress/keyboard-shortcuts": "^4.31.0",
-		"@wordpress/keycodes": "^3.54.0",
-		"@wordpress/media-utils": "^4.45.0",
-		"@wordpress/notices": "^4.22.0",
-		"@wordpress/patterns": "^1.15.0",
-		"@wordpress/plugins": "^6.22.0",
-		"@wordpress/preferences": "^3.31.0",
-		"@wordpress/private-apis": "^0.36.0",
-		"@wordpress/reusable-blocks": "^4.31.0",
-		"@wordpress/rich-text": "^6.31.0",
-		"@wordpress/server-side-render": "^4.31.0",
-		"@wordpress/url": "^3.55.0",
-		"@wordpress/warning": "^2.54.0",
-		"@wordpress/wordcount": "^3.54.0",
+		"@wordpress/a11y": "^3.55.0",
+		"@wordpress/api-fetch": "^6.52.0",
+		"@wordpress/blob": "^3.55.0",
+		"@wordpress/block-editor": "^12.23.0",
+		"@wordpress/blocks": "^12.32.0",
+		"@wordpress/commands": "^0.26.0",
+		"@wordpress/components": "^27.3.0",
+		"@wordpress/compose": "^6.32.0",
+		"@wordpress/core-data": "^6.32.0",
+		"@wordpress/data": "^9.25.0",
+		"@wordpress/date": "^4.55.0",
+		"@wordpress/deprecated": "^3.55.0",
+		"@wordpress/dom": "^3.55.0",
+		"@wordpress/element": "^5.32.0",
+		"@wordpress/hooks": "^3.55.0",
+		"@wordpress/html-entities": "^3.55.0",
+		"@wordpress/i18n": "^4.55.0",
+		"@wordpress/icons": "^9.46.0",
+		"@wordpress/keyboard-shortcuts": "^4.32.0",
+		"@wordpress/keycodes": "^3.55.0",
+		"@wordpress/media-utils": "^4.46.0",
+		"@wordpress/notices": "^4.23.0",
+		"@wordpress/patterns": "^1.16.0",
+		"@wordpress/plugins": "^6.23.0",
+		"@wordpress/preferences": "^3.32.0",
+		"@wordpress/private-apis": "^0.37.0",
+		"@wordpress/reusable-blocks": "^4.32.0",
+		"@wordpress/rich-text": "^6.32.0",
+		"@wordpress/server-side-render": "^4.32.0",
+		"@wordpress/url": "^3.56.0",
+		"@wordpress/warning": "^2.55.0",
+		"@wordpress/wordcount": "^3.55.0",
 		"classnames": "^2.3.1",
-		"date-fns": "^2.28.0",
+		"date-fns": "^3.6.0",
 		"memize": "^2.1.0",
 		"react-autosize-textarea": "^7.1.0",
 		"rememo": "^4.0.2",
@@ -77,5 +77,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "ffc07735d0abfb3f69e91d48f25b7fe8d1ef92d2"
+	"gitHead": "ac2b13783c28f959770cf029a797a712f59e1958"
 }

package/src/components/block-settings-menu/plugin-block-settings-menu-item.js

@@ -0,0 +1,108 @@
+/**
+ * WordPress dependencies
+ */
+import { BlockSettingsMenuControls } from '@wordpress/block-editor';
+import { MenuItem } from '@wordpress/components';
+import { compose } from '@wordpress/compose';
+
+const isEverySelectedBlockAllowed = ( selected, allowed ) =>
+	selected.filter( ( id ) => ! allowed.includes( id ) ).length === 0;
+
+/**
+ * Plugins may want to add an item to the menu either for every block
+ * or only for the specific ones provided in the `allowedBlocks` component property.
+ *
+ * If there are multiple blocks selected the item will be rendered if every block
+ * is of one allowed type (not necessarily the same).
+ *
+ * @param {string[]} selectedBlocks Array containing the names of the blocks selected
+ * @param {string[]} allowedBlocks  Array containing the names of the blocks allowed
+ * @return {boolean} Whether the item will be rendered or not.
+ */
+const shouldRenderItem = ( selectedBlocks, allowedBlocks ) =>
+	! Array.isArray( allowedBlocks ) ||
+	isEverySelectedBlockAllowed( selectedBlocks, allowedBlocks );
+
+/**
+ * Renders a new item in the block settings menu.
+ *
+ * @param {Object}                props                 Component props.
+ * @param {Array}                 [props.allowedBlocks] An array containing a list of block names for which the item should be shown. If not present, it'll be rendered for any block. If multiple blocks are selected, it'll be shown if and only if all of them are in the allowed list.
+ * @param {WPBlockTypeIconRender} [props.icon]          The [Dashicon](https://developer.wordpress.org/resource/dashicons/) icon slug string, or an SVG WP element.
+ * @param {string}                props.label           The menu item text.
+ * @param {Function}              props.onClick         Callback function to be executed when the user click the menu item.
+ * @param {boolean}               [props.small]         Whether to render the label or not.
+ * @param {string}                [props.role]          The ARIA role for the menu item.
+ *
+ * @example
+ * ```js
+ * // Using ES5 syntax
+ * var __ = wp.i18n.__;
+ * var PluginBlockSettingsMenuItem = wp.editor.PluginBlockSettingsMenuItem;
+ *
+ * function doOnClick(){
+ * 	// To be called when the user clicks the menu item.
+ * }
+ *
+ * function MyPluginBlockSettingsMenuItem() {
+ * 	return React.createElement(
+ * 		PluginBlockSettingsMenuItem,
+ * 		{
+ * 			allowedBlocks: [ 'core/paragraph' ],
+ * 			icon: 'dashicon-name',
+ * 			label: __( 'Menu item text' ),
+ * 			onClick: doOnClick,
+ * 		}
+ * 	);
+ * }
+ * ```
+ *
+ * @example
+ * ```jsx
+ * // Using ESNext syntax
+ * import { __ } from '@wordpress/i18n';
+ * import { PluginBlockSettingsMenuItem } from '@wordpress/editor';
+ *
+ * const doOnClick = ( ) => {
+ *     // To be called when the user clicks the menu item.
+ * };
+ *
+ * const MyPluginBlockSettingsMenuItem = () => (
+ *     <PluginBlockSettingsMenuItem
+ * 		allowedBlocks={ [ 'core/paragraph' ] }
+ * 		icon='dashicon-name'
+ * 		label={ __( 'Menu item text' ) }
+ * 		onClick={ doOnClick } />
+ * );
+ * ```
+ *
+ * @return {Component} The component to be rendered.
+ */
+const PluginBlockSettingsMenuItem = ( {
+	allowedBlocks,
+	icon,
+	label,
+	onClick,
+	small,
+	role,
+} ) => (
+	<BlockSettingsMenuControls>
+		{ ( { selectedBlocks, onClose } ) => {
+			if ( ! shouldRenderItem( selectedBlocks, allowedBlocks ) ) {
+				return null;
+			}
+			return (
+				<MenuItem
+					onClick={ compose( onClick, onClose ) }
+					icon={ icon }
+					label={ small ? label : undefined }
+					role={ role }
+				>
+					{ ! small && label }
+				</MenuItem>
+			);
+		} }
+	</BlockSettingsMenuControls>
+);
+
+export default PluginBlockSettingsMenuItem;

package/src/components/commands/index.js

@@ -68,7 +68,7 @@ function useEditorCommandLoader() {
 		name: 'core/toggle-distraction-free',
 		label: isDistractionFree
 			? __( 'Exit Distraction Free' )
-			: __( 'Enter Distraction Free ' ),
+			: __( 'Enter Distraction Free' ),
 		callback: ( { close } ) => {
 			toggleDistractionFree();
 			close();