@wordpress/editor 13.33.0 → 13.35.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/editor",
-	"version": "13.33.0",
+	"version": "13.35.0",
 	"description": "Enhanced block editor for WordPress posts.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -31,41 +31,43 @@
 	],
 	"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",
-		"classnames": "^2.3.1",
+		"@wordpress/a11y": "^3.58.0",
+		"@wordpress/api-fetch": "^6.55.0",
+		"@wordpress/blob": "^3.58.0",
+		"@wordpress/block-editor": "^12.26.0",
+		"@wordpress/blocks": "^12.35.0",
+		"@wordpress/commands": "^0.29.0",
+		"@wordpress/components": "^27.6.0",
+		"@wordpress/compose": "^6.35.0",
+		"@wordpress/core-data": "^6.35.0",
+		"@wordpress/data": "^9.28.0",
+		"@wordpress/date": "^4.58.0",
+		"@wordpress/deprecated": "^3.58.0",
+		"@wordpress/dom": "^3.58.0",
+		"@wordpress/element": "^5.35.0",
+		"@wordpress/hooks": "^3.58.0",
+		"@wordpress/html-entities": "^3.58.0",
+		"@wordpress/i18n": "^4.58.0",
+		"@wordpress/icons": "^9.49.0",
+		"@wordpress/interface": "^5.35.0",
+		"@wordpress/keyboard-shortcuts": "^4.35.0",
+		"@wordpress/keycodes": "^3.58.0",
+		"@wordpress/media-utils": "^4.49.0",
+		"@wordpress/notices": "^4.26.0",
+		"@wordpress/patterns": "^1.19.0",
+		"@wordpress/plugins": "^6.26.0",
+		"@wordpress/preferences": "^3.35.0",
+		"@wordpress/private-apis": "^0.40.0",
+		"@wordpress/reusable-blocks": "^4.35.0",
+		"@wordpress/rich-text": "^6.35.0",
+		"@wordpress/server-side-render": "^4.35.0",
+		"@wordpress/url": "^3.59.0",
+		"@wordpress/warning": "^2.58.0",
+		"@wordpress/wordcount": "^3.58.0",
+		"clsx": "^2.1.1",
 		"date-fns": "^3.6.0",
+		"deepmerge": "^4.3.0",
+		"is-plain-object": "^5.0.0",
 		"memize": "^2.1.0",
 		"react-autosize-textarea": "^7.1.0",
 		"remove-accents": "^0.5.0"
@@ -77,5 +79,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "280403b4c1cf6cc2c55a6c4d56f9ef91145e4191"
+	"gitHead": "42f38f287506a6b3ed8ccba839b18ad066821044"
 }

package/src/bindings/pattern-overrides.js

@@ -2,10 +2,92 @@
  * WordPress dependencies
  */
 import { _x } from '@wordpress/i18n';
+import { store as blockEditorStore } from '@wordpress/block-editor';
+
+const CONTENT = 'content';
 
 export default {
 	name: 'core/pattern-overrides',
 	label: _x( 'Pattern Overrides', 'block bindings source' ),
-	useSource: null,
+	getValue( { registry, clientId, attributeName } ) {
+		const { getBlockAttributes, getBlockParentsByBlockName } =
+			registry.select( blockEditorStore );
+		const currentBlockAttributes = getBlockAttributes( clientId );
+		const [ patternClientId ] = getBlockParentsByBlockName(
+			clientId,
+			'core/block',
+			true
+		);
+
+		const overridableValue =
+			getBlockAttributes( patternClientId )?.[ CONTENT ]?.[
+				currentBlockAttributes?.metadata?.name
+			]?.[ attributeName ];
+
+		// If there is no pattern client ID, or it is not overwritten, return the default value.
+		if ( ! patternClientId || overridableValue === undefined ) {
+			return currentBlockAttributes[ attributeName ];
+		}
+
+		return overridableValue === '' ? undefined : overridableValue;
+	},
+	setValues( { registry, clientId, attributes } ) {
+		const { getBlockAttributes, getBlockParentsByBlockName, getBlocks } =
+			registry.select( blockEditorStore );
+		const currentBlockAttributes = getBlockAttributes( clientId );
+		const blockName = currentBlockAttributes?.metadata?.name;
+		if ( ! blockName ) {
+			return;
+		}
+
+		const [ patternClientId ] = getBlockParentsByBlockName(
+			clientId,
+			'core/block',
+			true
+		);
+
+		// If there is no pattern client ID, sync blocks with the same name and same attributes.
+		if ( ! patternClientId ) {
+			const syncBlocksWithSameName = ( blocks ) => {
+				for ( const block of blocks ) {
+					if ( block.attributes?.metadata?.name === blockName ) {
+						registry
+							.dispatch( blockEditorStore )
+							.updateBlockAttributes(
+								block.clientId,
+								attributes
+							);
+					}
+					syncBlocksWithSameName( block.innerBlocks );
+				}
+			};
+
+			syncBlocksWithSameName( getBlocks() );
+			return;
+		}
+		const currentBindingValue =
+			getBlockAttributes( patternClientId )?.[ CONTENT ];
+		registry
+			.dispatch( blockEditorStore )
+			.updateBlockAttributes( patternClientId, {
+				[ CONTENT ]: {
+					...currentBindingValue,
+					[ blockName ]: {
+						...currentBindingValue?.[ blockName ],
+						...Object.entries( attributes ).reduce(
+							( acc, [ key, value ] ) => {
+								// TODO: We need a way to represent `undefined` in the serialized overrides.
+								// Also see: https://github.com/WordPress/gutenberg/pull/57249#discussion_r1452987871
+								// We use an empty string to represent undefined for now until
+								// we support a richer format for overrides and the block bindings API.
+								acc[ key ] = value === undefined ? '' : value;
+								return acc;
+							},
+							{}
+						),
+					},
+				},
+			} );
+	},
 	lockAttributesEditing: false,
 };

package/src/components/autocompleters/style.scss

@@ -1,8 +1,7 @@
 .editor-autocompleters__user {
 	.editor-autocompleters__no-avatar::before {
-		/* stylelint-disable */
+		/* stylelint-disable-next-line font-family-no-missing-generic-family-keyword -- dashicons don't need a generic family keyword. */
 		font: normal 20px/1 dashicons;
-		/* stylelint-enable */
 		content: "\f110";
 		margin-right: 5px;
 		vertical-align: middle;

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/block-settings-menu/content-only-settings-menu.js

@@ -0,0 +1,175 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	BlockSettingsMenuControls,
+	__unstableBlockSettingsMenuFirstItem as BlockSettingsMenuFirstItem,
+	store as blockEditorStore,
+	useBlockDisplayInformation,
+} from '@wordpress/block-editor';
+import { store as coreStore } from '@wordpress/core-data';
+import { __experimentalText as Text, MenuItem } from '@wordpress/components';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { store as editorStore } from '../../store';
+import { unlock } from '../../lock-unlock';
+
+function ContentOnlySettingsMenuItems( { clientId, onClose } ) {
+	const { entity, onNavigateToEntityRecord } = useSelect(
+		( select ) => {
+			const {
+				getBlockEditingMode,
+				getBlockParentsByBlockName,
+				getSettings,
+				getBlockAttributes,
+			} = select( blockEditorStore );
+			const contentOnly =
+				getBlockEditingMode( clientId ) === 'contentOnly';
+			if ( ! contentOnly ) {
+				return {};
+			}
+			const patternParent = getBlockParentsByBlockName(
+				clientId,
+				'core/block',
+				true
+			)[ 0 ];
+
+			let record;
+			if ( patternParent ) {
+				record = select( coreStore ).getEntityRecord(
+					'postType',
+					'wp_block',
+					getBlockAttributes( patternParent ).ref
+				);
+			} else {
+				const { getCurrentPostType, getCurrentTemplateId } =
+					select( editorStore );
+				const currentPostType = getCurrentPostType();
+				const templateId = getCurrentTemplateId();
+				if ( currentPostType === 'page' && templateId ) {
+					record = select( coreStore ).getEntityRecord(
+						'postType',
+						'wp_template',
+						templateId
+					);
+				}
+			}
+			return {
+				entity: record,
+				onNavigateToEntityRecord:
+					getSettings().onNavigateToEntityRecord,
+			};
+		},
+		[ clientId ]
+	);
+
+	if ( ! entity ) {
+		return (
+			<TemplateLockContentOnlyMenuItems
+				clientId={ clientId }
+				onClose={ onClose }
+			/>
+		);
+	}
+
+	const isPattern = entity.type === 'wp_block';
+
+	return (
+		<>
+			<BlockSettingsMenuFirstItem>
+				<MenuItem
+					onClick={ () => {
+						onNavigateToEntityRecord( {
+							postId: entity.id,
+							postType: entity.type,
+						} );
+					} }
+				>
+					{ isPattern ? __( 'Edit pattern' ) : __( 'Edit template' ) }
+				</MenuItem>
+			</BlockSettingsMenuFirstItem>
+			<Text
+				variant="muted"
+				as="p"
+				className="editor-content-only-settings-menu__description"
+			>
+				{ isPattern
+					? __(
+							'Edit the pattern to move, delete, or make further changes to this block.'
+					  )
+					: __(
+							'Edit the template to move, delete, or make further changes to this block.'
+					  ) }
+			</Text>
+		</>
+	);
+}
+
+function TemplateLockContentOnlyMenuItems( { clientId, onClose } ) {
+	const { contentLockingParent } = useSelect(
+		( select ) => {
+			const { getContentLockingParent } = unlock(
+				select( blockEditorStore )
+			);
+			return {
+				contentLockingParent: getContentLockingParent( clientId ),
+			};
+		},
+		[ clientId ]
+	);
+	const blockDisplayInformation =
+		useBlockDisplayInformation( contentLockingParent );
+	// Disable reason: We're using a hook here so it has to be on top-level.
+	// eslint-disable-next-line @wordpress/no-unused-vars-before-return
+	const { modifyContentLockBlock, selectBlock } = unlock(
+		useDispatch( blockEditorStore )
+	);
+
+	if ( ! blockDisplayInformation?.title ) {
+		return null;
+	}
+
+	return (
+		<>
+			<BlockSettingsMenuFirstItem>
+				<MenuItem
+					onClick={ () => {
+						selectBlock( contentLockingParent );
+						modifyContentLockBlock( contentLockingParent );
+						onClose();
+					} }
+				>
+					{ __( 'Unlock' ) }
+				</MenuItem>
+			</BlockSettingsMenuFirstItem>
+			<Text
+				variant="muted"
+				as="p"
+				className="editor-content-only-settings-menu__description"
+			>
+				{ __(
+					'Temporarily unlock the parent block to edit, delete or make further changes to this block.'
+				) }
+			</Text>
+		</>
+	);
+}
+
+export default function ContentOnlySettingsMenu() {
+	return (
+		<BlockSettingsMenuControls>
+			{ ( { selectedClientIds, onClose } ) =>
+				selectedClientIds.length === 1 && (
+					<ContentOnlySettingsMenuItems
+						clientId={ selectedClientIds[ 0 ] }
+						onClose={ onClose }
+					/>
+				)
+			}
+		</BlockSettingsMenuControls>
+	);
+}

package/src/components/block-settings-menu/content-only-settings-menu.native.js

@@ -0,0 +1,4 @@
+// Render nothing in native for now.
+export default function ContentOnlySettingsMenu() {
+	return null;
+}

package/src/components/block-settings-menu/style.scss

@@ -0,0 +1,4 @@
+.editor-content-only-settings-menu__description {
+	padding: $grid-unit;
+	min-width: 235px;
+}

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 clsx from 'clsx';
+
+/**
+ * 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={ clsx( '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;

package/src/components/collapsible-block-toolbar/style.scss

@@ -0,0 +1,80 @@
+.editor-collapsible-block-toolbar {
+	overflow: hidden;
+	display: flex;
+	align-items: center;
+	height: $header-height;
+
+	.block-editor-block-contextual-toolbar {
+		border-bottom: 0;
+		height: 100%;
+	}
+
+	// These rules ensure that icons are always positioned in a way that lines up with the rest of the icons in the toolbar.
+	.block-editor-block-toolbar {
+		height: 100%;
+		// Push down so that buttons are centered vertically.
+		// It should be 14px (60px header height - 32px compact button height = 28 / 2),
+		// but there is a -1px top-margin down the stack that affects this.
+		padding-top: math.div($header-height - $button-size-compact, 2) + 1;
+
+		// Match the height of other buttons in the header toolbar.
+		.components-button:not(.block-editor-block-mover-button) {
+			height: $button-size-compact;
+		}
+	}
+
+	&::after {
+		content: "";
+		width: $border-width;
+		height: $grid-unit-30;
+		background-color: $gray-300;
+		margin-right: $grid-unit - $border-width;
+	}
+
+	// Modified group borders.
+	.components-toolbar-group,
+	.components-toolbar {
+		border-right: none;
+		position: relative;
+
+		&::after {
+			content: "";
+			width: $border-width;
+			height: $grid-unit-30;
+			background-color: $gray-300;
+			top: $grid-unit-05;
+			position: absolute;
+			right: -$border-width;
+		}
+
+		& .components-toolbar-group.components-toolbar-group {
+			&::after {
+				display: none;
+			}
+		}
+	}
+
+	.block-editor-block-mover {
+		// Match the height of other buttons in the header toolbar.
+		&.is-horizontal .block-editor-block-mover-button {
+			height: $button-size-compact;
+			overflow: visible;
+		}
+
+		// Move up a little to prevent the toolbar shift when focus is on the vertical movers.
+		@include break-small() {
+			&:not(.is-horizontal) .block-editor-block-mover__move-button-container {
+				position: relative;
+				top: -10px;
+			}
+		}
+	}
+
+	&.is-collapsed {
+		display: none;
+	}
+}
+
+.editor-collapsible-block-toolbar__toggle {
+	margin-left: 2px; // Allow focus ring to be fully visible
+}

package/src/components/document-bar/index.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -111,7 +111,7 @@ export default function DocumentBar() {
 
 	return (
 		<div
-			className={ classnames( 'editor-document-bar', {
+			className={ clsx( 'editor-document-bar', {
 				'has-back-button': hasBackButton,
 				'is-global': isGlobalEntity,
 			} ) }

package/src/components/document-outline/check.js

@@ -4,6 +4,14 @@
 import { useSelect } from '@wordpress/data';
 import { store as blockEditorStore } from '@wordpress/block-editor';
 
+/**
+ * Component check if there are any headings (core/heading blocks) present in the document.
+ *
+ * @param {Object}  props          Props.
+ * @param {Element} props.children Children to be rendered.
+ *
+ * @return {Component|null} The component to be rendered or null if there are headings.
+ */
 export default function DocumentOutlineCheck( { children } ) {
 	const hasHeadings = useSelect( ( select ) => {
 		const { getGlobalBlockCount } = select( blockEditorStore );

package/src/components/document-outline/index.js

@@ -98,6 +98,16 @@ const isEmptyHeading = ( heading ) =>
 	! heading.attributes.content ||
 	heading.attributes.content.trim().length === 0;
 
+/**
+ * Renders a document outline component.
+ *
+ * @param {Object}   props                         Props.
+ * @param {Function} props.onSelect                Function to be called when an outline item is selected.
+ * @param {boolean}  props.isTitleSupported        Indicates whether the title is supported.
+ * @param {boolean}  props.hasOutlineItemsDisabled Indicates whether the outline items are disabled.
+ *
+ * @return {Component} The component to be rendered.
+ */
 export default function DocumentOutline( {
 	onSelect,
 	isTitleSupported,

package/src/components/document-outline/item.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 const TableOfContentsItem = ( {
 	children,
@@ -11,7 +11,7 @@ const TableOfContentsItem = ( {
 	onSelect,
 } ) => (
 	<li
-		className={ classnames(
+		className={ clsx(
 			'document-outline__item',
 			`is-${ level.toLowerCase() }`,
 			{