@wordpress/editor 13.33.0 → 13.34.0

package/build-style/style.css

@@ -151,6 +151,8 @@
 .interface-complementary-area {
   background: #fff;
   color: #1e1e1e;
+  height: 100%;
+  overflow: auto;
 }
 @media (min-width: 600px) {
   .interface-complementary-area {
@@ -216,6 +218,10 @@
   left: auto;
 }
 
+.interface-complementary-area__fill {
+  height: 100%;
+}
+
 @media (min-width: 782px) {
   body.js.is-fullscreen-mode {
     margin-top: -32px;
@@ -308,6 +314,7 @@ body.is-fullscreen-mode .interface-interface-skeleton {
 }
 
 .interface-interface-skeleton__body {
+  position: relative;
   flex-grow: 1;
   display: flex;
   overflow: auto;
@@ -356,7 +363,7 @@ body.is-fullscreen-mode .interface-interface-skeleton {
 }
 
 .interface-interface-skeleton__sidebar {
-  overflow: auto;
+  overflow: hidden;
 }
 @media (min-width: 782px) {
   .interface-interface-skeleton__sidebar {
@@ -576,6 +583,67 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   border-top-width: 0;
 }
 
+.editor-collapsible-block-toolbar {
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  height: 60px;
+}
+.editor-collapsible-block-toolbar .block-editor-block-contextual-toolbar {
+  border-bottom: 0;
+  height: 100%;
+}
+.editor-collapsible-block-toolbar .block-editor-block-toolbar {
+  height: 100%;
+  padding-top: 15px;
+}
+.editor-collapsible-block-toolbar .block-editor-block-toolbar .components-button:not(.block-editor-block-mover-button) {
+  height: 32px;
+}
+.editor-collapsible-block-toolbar::after {
+  content: "";
+  width: 1px;
+  height: 24px;
+  background-color: #ddd;
+  margin-right: 7px;
+}
+.editor-collapsible-block-toolbar .components-toolbar-group,
+.editor-collapsible-block-toolbar .components-toolbar {
+  border-right: none;
+  position: relative;
+}
+.editor-collapsible-block-toolbar .components-toolbar-group::after,
+.editor-collapsible-block-toolbar .components-toolbar::after {
+  content: "";
+  width: 1px;
+  height: 24px;
+  background-color: #ddd;
+  top: 4px;
+  position: absolute;
+  right: -1px;
+}
+.editor-collapsible-block-toolbar .components-toolbar-group .components-toolbar-group.components-toolbar-group::after,
+.editor-collapsible-block-toolbar .components-toolbar .components-toolbar-group.components-toolbar-group::after {
+  display: none;
+}
+.editor-collapsible-block-toolbar .block-editor-block-mover.is-horizontal .block-editor-block-mover-button {
+  height: 32px;
+  overflow: visible;
+}
+@media (min-width: 600px) {
+  .editor-collapsible-block-toolbar .block-editor-block-mover:not(.is-horizontal) .block-editor-block-mover__move-button-container {
+    position: relative;
+    top: -10px;
+  }
+}
+.editor-collapsible-block-toolbar.is-collapsed {
+  display: none;
+}
+
+.editor-collapsible-block-toolbar__toggle {
+  margin-left: 2px;
+}
+
 .editor-document-bar {
   display: flex;
   align-items: center;
@@ -883,6 +951,11 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   margin-bottom: 4px;
 }
 
+.edit-post-layout .entities-saved-states__panel-header,
+.edit-site-editor__interface-skeleton .entities-saved-states__panel-header {
+  height: 61px;
+}
+
 .editor-error-boundary {
   margin: auto;
   max-width: 780px;
@@ -977,7 +1050,7 @@ body.is-fullscreen-mode .interface-interface-skeleton {
     width: 350px;
   }
 }
-.editor-list-view-sidebar .edit-post-editor__document-overview-panel__header {
+.editor-list-view-sidebar .editor-list-view-sidebar__header {
   display: flex;
   border-bottom: 1px solid #ddd;
 }
@@ -1011,7 +1084,7 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   will-change: transform;
   overflow: auto;
   scrollbar-gutter: auto;
-  padding: 8px 6px;
+  padding: 4px;
 }
 .editor-list-view-sidebar__list-view-panel-content::-webkit-scrollbar,
 .editor-list-view-sidebar__list-view-container > .document-outline::-webkit-scrollbar {
@@ -1104,12 +1177,15 @@ body.is-fullscreen-mode .interface-interface-skeleton {
 .editor-post-card-panel__header {
   display: flex;
   justify-content: space-between;
-  margin: 0 0 8px;
 }
-.editor-post-card-panel__description {
+.editor-post-card-panel.has-description .editor-post-card-panel__header {
+  margin-bottom: 8px;
+}
+
+.editor-post-content-information {
   color: #757575;
 }
-.editor-post-card-panel__description .components-text {
+.editor-post-content-information .components-text {
   color: inherit;
 }
 
@@ -1118,6 +1194,26 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   margin-bottom: 10px;
 }
 
+.editor-post-excerpt__dropdown__trigger {
+  height: auto;
+  padding: 0;
+}
+.editor-post-excerpt__dropdown__trigger:not(.has-excerpt) {
+  color: #757575;
+}
+.editor-post-excerpt__dropdown__trigger:hover {
+  color: #1e1e1e;
+}
+
+.editor-post-excerpt__dropdown {
+  display: block;
+}
+
+.editor-post-excerpt__dropdown__content .components-popover__content {
+  min-width: 320px;
+  padding: 16px;
+}
+
 .editor-post-featured-image {
   padding: 0;
 }
@@ -1144,8 +1240,7 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   box-shadow: 0 0 0 0 var(--wp-admin-theme-color);
   overflow: hidden;
   outline-offset: -1px;
-  min-height: 80px;
-  margin-bottom: 16px;
+  min-height: 40px;
   display: flex;
   justify-content: center;
 }
@@ -1170,15 +1265,11 @@ body.is-fullscreen-mode .interface-interface-skeleton {
 
 .editor-post-featured-image__toggle {
   border-radius: 2px;
-  background-color: #f0f0f0;
   height: 100%;
   line-height: 20px;
   padding: 8px 0;
   text-align: center;
-}
-.editor-post-featured-image__toggle:hover {
-  background: #ddd;
-  color: #1e1e1e;
+  box-shadow: inset 0 0 0 1px #ccc;
 }
 
 .editor-post-featured-image__actions {
@@ -1207,6 +1298,13 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   margin: 4px 0 0 0;
 }
 
+.editor-post-last-edited-panel {
+  color: #757575;
+}
+.editor-post-last-edited-panel .components-text {
+  color: inherit;
+}
+
 .editor-post-last-revision__title {
   width: 100%;
   font-weight: 500;
@@ -1244,7 +1342,7 @@ body.is-fullscreen-mode .interface-interface-skeleton {
 
 .editor-post-panel__row {
   width: 100%;
-  min-height: 40px;
+  min-height: 32px;
   justify-content: flex-start !important;
   align-items: flex-start !important;
 }
@@ -1252,14 +1350,14 @@ body.is-fullscreen-mode .interface-interface-skeleton {
 .editor-post-panel__row-label {
   width: 30%;
   flex-shrink: 0;
-  min-height: 40px;
+  min-height: 32px;
   display: flex;
   align-items: center;
 }
 
 .editor-post-panel__row-control {
   flex-grow: 1;
-  min-height: 40px;
+  min-height: 32px;
   display: flex;
   align-items: center;
 }
@@ -1436,6 +1534,57 @@ body.is-fullscreen-mode .interface-interface-skeleton {
     height: 40px;
   }
 }
+.edit-post-layout .editor-post-publish-panel,
+.edit-site-editor__interface-skeleton .editor-post-publish-panel {
+  position: fixed;
+  z-index: 100001;
+  top: 46px;
+  bottom: 0;
+  right: 0;
+  left: 0;
+  overflow: auto;
+}
+@media (min-width: 782px) {
+  .edit-post-layout .editor-post-publish-panel,
+.edit-site-editor__interface-skeleton .editor-post-publish-panel {
+    z-index: 99998;
+    top: 32px;
+    left: auto;
+    width: 281px;
+    border-left: 1px solid #ddd;
+    transform: translateX(100%);
+    animation: editor-post-publish-panel__slide-in-animation 0.1s forwards;
+  }
+}
+@media (min-width: 782px) and (prefers-reduced-motion: reduce) {
+  .edit-post-layout .editor-post-publish-panel,
+.edit-site-editor__interface-skeleton .editor-post-publish-panel {
+    animation-duration: 1ms;
+    animation-delay: 0s;
+  }
+}
+@media (min-width: 782px) {
+  body.is-fullscreen-mode .edit-post-layout .editor-post-publish-panel,
+body.is-fullscreen-mode .edit-site-editor__interface-skeleton .editor-post-publish-panel {
+    top: 0;
+  }
+}
+@media (min-width: 782px) {
+  [role=region]:focus .edit-post-layout .editor-post-publish-panel,
+[role=region]:focus .edit-site-editor__interface-skeleton .editor-post-publish-panel {
+    transform: translateX(0%);
+  }
+}
+.edit-post-layout .editor-post-publish-panel__header-publish-button,
+.edit-site-editor__interface-skeleton .editor-post-publish-panel__header-publish-button {
+  justify-content: center;
+}
+
+@keyframes editor-post-publish-panel__slide-in-animation {
+  100% {
+    transform: translateX(0%);
+  }
+}
 .editor-post-saved-state {
   display: flex;
   align-items: center;
@@ -1480,19 +1629,16 @@ body.is-fullscreen-mode .interface-interface-skeleton {
 }
 
 .editor-post-schedule__dialog-toggle.components-button {
-  display: block;
-  max-width: 100%;
   overflow: hidden;
   text-align: left;
   white-space: unset;
   height: auto;
-  padding: 10px 12px;
-  line-height: 16px;
+  min-height: 32px;
+  line-height: inherit;
 }
 
 .editor-post-status {
   max-width: 100%;
-  margin-bottom: 16px;
 }
 .editor-post-status .editor-post-status-trigger {
   padding: 1px;
@@ -1631,7 +1777,7 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   padding: 8px;
 }
 
-.edit-post-text-editor__body textarea.editor-post-text-editor {
+textarea.editor-post-text-editor {
   border: 1px solid #949494;
   border-radius: 0;
   display: block;
@@ -1649,38 +1795,38 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   font-size: 16px !important;
 }
 @media (prefers-reduced-motion: reduce) {
-  .edit-post-text-editor__body textarea.editor-post-text-editor {
+  textarea.editor-post-text-editor {
     transition-duration: 0s;
     transition-delay: 0s;
   }
 }
 @media (min-width: 600px) {
-  .edit-post-text-editor__body textarea.editor-post-text-editor {
+  textarea.editor-post-text-editor {
     padding: 24px;
   }
 }
 @media (min-width: 600px) {
-  .edit-post-text-editor__body textarea.editor-post-text-editor {
+  textarea.editor-post-text-editor {
     font-size: 15px !important;
   }
 }
-.edit-post-text-editor__body textarea.editor-post-text-editor:focus {
+textarea.editor-post-text-editor:focus {
   border-color: var(--wp-admin-theme-color);
   box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
   position: relative;
 }
-.edit-post-text-editor__body textarea.editor-post-text-editor::-webkit-input-placeholder {
+textarea.editor-post-text-editor::-webkit-input-placeholder {
   color: rgba(30, 30, 30, 0.62);
 }
-.edit-post-text-editor__body textarea.editor-post-text-editor::-moz-placeholder {
+textarea.editor-post-text-editor::-moz-placeholder {
   color: rgba(30, 30, 30, 0.62);
   opacity: 1;
 }
-.edit-post-text-editor__body textarea.editor-post-text-editor:-ms-input-placeholder {
+textarea.editor-post-text-editor:-ms-input-placeholder {
   color: rgba(30, 30, 30, 0.62);
 }
 
-.edit-post-text-editor__body .editor-post-title.is-raw-text {
+.editor-post-title.is-raw-text {
   margin-bottom: 24px;
   margin-top: 2px;
   max-width: none;
@@ -1863,6 +2009,37 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   justify-content: space-between;
 }
 
+.editor-layout__toggle-publish-panel,
+.editor-layout__toggle-sidebar-panel,
+.editor-layout__toggle-entities-saved-states-panel {
+  z-index: 100000;
+  position: fixed !important;
+  top: -9999em;
+  bottom: auto;
+  left: auto;
+  right: 0;
+  box-sizing: border-box;
+  width: 280px;
+  background-color: #fff;
+  border: 1px dotted #ddd;
+  height: auto !important;
+  padding: 24px;
+  display: flex;
+  justify-content: center;
+}
+
+.interface-interface-skeleton__actions:focus .editor-layout__toggle-entities-saved-states-panel, .interface-interface-skeleton__actions:focus-within .editor-layout__toggle-entities-saved-states-panel,
+.interface-interface-skeleton__actions:focus .editor-layout__toggle-publish-panel,
+.interface-interface-skeleton__actions:focus-within .editor-layout__toggle-publish-panel {
+  top: auto;
+  bottom: 0;
+}
+
+.interface-interface-skeleton__sidebar:focus .edit-post-layout__toggle-sidebar-panel, .interface-interface-skeleton__sidebar:focus-within .edit-post-layout__toggle-sidebar-panel {
+  top: auto;
+  bottom: 0;
+}
+
 .editor-start-page-options__modal-content .block-editor-block-patterns-list {
   column-count: 2;
   column-gap: 24px;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/editor",
-	"version": "13.33.0",
+	"version": "13.34.0",
 	"description": "Enhanced block editor for WordPress posts.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -31,39 +31,39 @@
 	],
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
-		"@wordpress/a11y": "^3.56.0",
-		"@wordpress/api-fetch": "^6.53.0",
-		"@wordpress/blob": "^3.56.0",
-		"@wordpress/block-editor": "^12.24.0",
-		"@wordpress/blocks": "^12.33.0",
-		"@wordpress/commands": "^0.27.0",
-		"@wordpress/components": "^27.4.0",
-		"@wordpress/compose": "^6.33.0",
-		"@wordpress/core-data": "^6.33.0",
-		"@wordpress/data": "^9.26.0",
-		"@wordpress/date": "^4.56.0",
-		"@wordpress/deprecated": "^3.56.0",
-		"@wordpress/dom": "^3.56.0",
-		"@wordpress/element": "^5.33.0",
-		"@wordpress/hooks": "^3.56.0",
-		"@wordpress/html-entities": "^3.56.0",
-		"@wordpress/i18n": "^4.56.0",
-		"@wordpress/icons": "^9.47.0",
-		"@wordpress/interface": "^5.33.0",
-		"@wordpress/keyboard-shortcuts": "^4.33.0",
-		"@wordpress/keycodes": "^3.56.0",
-		"@wordpress/media-utils": "^4.47.0",
-		"@wordpress/notices": "^4.24.0",
-		"@wordpress/patterns": "^1.17.0",
-		"@wordpress/plugins": "^6.24.0",
-		"@wordpress/preferences": "^3.33.0",
-		"@wordpress/private-apis": "^0.38.0",
-		"@wordpress/reusable-blocks": "^4.33.0",
-		"@wordpress/rich-text": "^6.33.0",
-		"@wordpress/server-side-render": "^4.33.0",
-		"@wordpress/url": "^3.57.0",
-		"@wordpress/warning": "^2.56.0",
-		"@wordpress/wordcount": "^3.56.0",
+		"@wordpress/a11y": "^3.57.0",
+		"@wordpress/api-fetch": "^6.54.0",
+		"@wordpress/blob": "^3.57.0",
+		"@wordpress/block-editor": "^12.25.0",
+		"@wordpress/blocks": "^12.34.0",
+		"@wordpress/commands": "^0.28.0",
+		"@wordpress/components": "^27.5.0",
+		"@wordpress/compose": "^6.34.0",
+		"@wordpress/core-data": "^6.34.0",
+		"@wordpress/data": "^9.27.0",
+		"@wordpress/date": "^4.57.0",
+		"@wordpress/deprecated": "^3.57.0",
+		"@wordpress/dom": "^3.57.0",
+		"@wordpress/element": "^5.34.0",
+		"@wordpress/hooks": "^3.57.0",
+		"@wordpress/html-entities": "^3.57.0",
+		"@wordpress/i18n": "^4.57.0",
+		"@wordpress/icons": "^9.48.0",
+		"@wordpress/interface": "^5.34.0",
+		"@wordpress/keyboard-shortcuts": "^4.34.0",
+		"@wordpress/keycodes": "^3.57.0",
+		"@wordpress/media-utils": "^4.48.0",
+		"@wordpress/notices": "^4.25.0",
+		"@wordpress/patterns": "^1.18.0",
+		"@wordpress/plugins": "^6.25.0",
+		"@wordpress/preferences": "^3.34.0",
+		"@wordpress/private-apis": "^0.39.0",
+		"@wordpress/reusable-blocks": "^4.34.0",
+		"@wordpress/rich-text": "^6.34.0",
+		"@wordpress/server-side-render": "^4.34.0",
+		"@wordpress/url": "^3.58.0",
+		"@wordpress/warning": "^2.57.0",
+		"@wordpress/wordcount": "^3.57.0",
 		"classnames": "^2.3.1",
 		"date-fns": "^3.6.0",
 		"memize": "^2.1.0",
@@ -77,5 +77,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "280403b4c1cf6cc2c55a6c4d56f9ef91145e4191"
+	"gitHead": "581d8a5580dba8f600b7268d51eb554771ae482c"
 }

package/src/components/autosave-monitor/index.js

@@ -11,17 +11,6 @@ import { store as coreStore } from '@wordpress/core-data';
  */
 import { store as editorStore } from '../../store';
 
-/**
- * AutosaveMonitor invokes `props.autosave()` within at most `interval` seconds after an unsaved change is detected.
- *
- * The logic is straightforward: a check is performed every `props.interval` seconds. If any changes are detected, `props.autosave()` is called.
- * The time between the change and the autosave varies but is no larger than `props.interval` seconds. Refer to the code below for more details, such as
- * the specific way of detecting changes.
- *
- * There are two caveats:
- * * If `props.isAutosaveable` happens to be false at a time of checking for changes, the check is retried every second.
- * * The timer may be disabled by setting `props.disableIntervalChecks` to `true`. In that mode, any change will immediately trigger `props.autosave()`.
- */
 export class AutosaveMonitor extends Component {
 	constructor( props ) {
 		super( props );
@@ -92,9 +81,23 @@ export class AutosaveMonitor extends Component {
 }
 
 /**
- * AutosaveMonitor component.
  * Monitors the changes made to the edited post and triggers autosave if necessary.
  *
+ * The logic is straightforward: a check is performed every `props.interval` seconds. If any changes are detected, `props.autosave()` is called.
+ * The time between the change and the autosave varies but is no larger than `props.interval` seconds. Refer to the code below for more details, such as
+ * the specific way of detecting changes.
+ *
+ * There are two caveats:
+ * * If `props.isAutosaveable` happens to be false at a time of checking for changes, the check is retried every second.
+ * * The timer may be disabled by setting `props.disableIntervalChecks` to `true`. In that mode, any change will immediately trigger `props.autosave()`.
+ *
+ * @param {Object}   props                       - The properties passed to the component.
+ * @param {Function} props.autosave              - The function to call when changes need to be saved.
+ * @param {number}   props.interval              - The maximum time in seconds between an unsaved change and an autosave.
+ * @param {boolean}  props.isAutosaveable        - If false, the check for changes is retried every second.
+ * @param {boolean}  props.disableIntervalChecks - If true, disables the timer and any change will immediately trigger `props.autosave()`.
+ * @param {boolean}  props.isDirty               - Indicates if there are unsaved changes.
+ *
  * @example
  * ```jsx
  * <AutosaveMonitor interval={30000} />

package/src/components/character-count/index.js

@@ -9,6 +9,11 @@ import { count as characterCount } from '@wordpress/wordcount';
  */
 import { store as editorStore } from '../../store';
 
+/**
+ * Renders the character count of the post content.
+ *
+ * @return {number} The character count.
+ */
 export default function CharacterCount() {
 	const content = useSelect(
 		( select ) => select( editorStore ).getEditedPostAttribute( 'content' ),

package/src/components/collapsible-block-toolbar/index.js

@@ -0,0 +1,77 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import {
+	BlockToolbar,
+	store as blockEditorStore,
+	privateApis as blockEditorPrivateApis,
+} from '@wordpress/block-editor';
+import { useEffect } from '@wordpress/element';
+import { Button, Popover } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { next, previous } from '@wordpress/icons';
+import { useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+
+const { useHasBlockToolbar } = unlock( blockEditorPrivateApis );
+
+function CollapsableBlockToolbar( { isCollapsed, onToggle } ) {
+	const { blockSelectionStart } = useSelect( ( select ) => {
+		return {
+			blockSelectionStart:
+				select( blockEditorStore ).getBlockSelectionStart(),
+		};
+	}, [] );
+	const hasBlockToolbar = useHasBlockToolbar();
+
+	const hasBlockSelection = !! blockSelectionStart;
+
+	useEffect( () => {
+		// If we have a new block selection, show the block tools
+		if ( blockSelectionStart ) {
+			onToggle( false );
+		}
+	}, [ blockSelectionStart, onToggle ] );
+
+	if ( ! hasBlockToolbar ) {
+		return null;
+	}
+
+	return (
+		<>
+			<div
+				className={ classnames( 'editor-collapsible-block-toolbar', {
+					'is-collapsed': isCollapsed || ! hasBlockSelection,
+				} ) }
+			>
+				<BlockToolbar hideDragHandle />
+			</div>
+			<Popover.Slot name="block-toolbar" />
+
+			<Button
+				className="editor-collapsible-block-toolbar__toggle"
+				icon={ isCollapsed ? next : previous }
+				onClick={ () => {
+					onToggle( ! isCollapsed );
+				} }
+				label={
+					isCollapsed
+						? __( 'Show block tools' )
+						: __( 'Hide block tools' )
+				}
+				size="compact"
+			/>
+		</>
+	);
+}
+
+export default CollapsableBlockToolbar;