@wordpress/block-editor 14.7.1-next.082ed6819.0 → 14.8.1-next.a9f418477.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-editor",
-	"version": "14.7.1-next.082ed6819.0",
+	"version": "14.8.1-next.a9f418477.0",
 	"description": "Generic block editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -37,37 +37,37 @@
 		"@emotion/react": "^11.7.1",
 		"@emotion/styled": "^11.6.0",
 		"@react-spring/web": "^9.4.5",
-		"@wordpress/a11y": "^4.12.1-next.082ed6819.0",
-		"@wordpress/api-fetch": "^7.12.1-next.082ed6819.0",
-		"@wordpress/blob": "^4.12.1-next.082ed6819.0",
-		"@wordpress/block-serialization-default-parser": "^5.12.1-next.082ed6819.0",
-		"@wordpress/blocks": "^14.1.1-next.082ed6819.0",
-		"@wordpress/commands": "^1.12.1-next.082ed6819.0",
+		"@wordpress/a11y": "^4.13.1-next.a9f418477.0",
+		"@wordpress/api-fetch": "^7.13.1-next.a9f418477.0",
+		"@wordpress/blob": "^4.13.1-next.a9f418477.0",
+		"@wordpress/block-serialization-default-parser": "^5.13.1-next.a9f418477.0",
+		"@wordpress/blocks": "^14.2.1-next.a9f418477.0",
+		"@wordpress/commands": "^1.13.1-next.a9f418477.0",
 		"@wordpress/components": "*",
-		"@wordpress/compose": "^7.12.1-next.082ed6819.0",
-		"@wordpress/data": "*",
-		"@wordpress/date": "^5.12.1-next.082ed6819.0",
-		"@wordpress/deprecated": "^4.12.1-next.082ed6819.0",
-		"@wordpress/dom": "^4.12.1-next.082ed6819.0",
-		"@wordpress/element": "^6.12.1-next.082ed6819.0",
-		"@wordpress/escape-html": "^3.12.1-next.082ed6819.0",
-		"@wordpress/hooks": "^4.12.1-next.082ed6819.0",
-		"@wordpress/html-entities": "^4.12.1-next.082ed6819.0",
-		"@wordpress/i18n": "^5.12.1-next.082ed6819.0",
-		"@wordpress/icons": "^10.12.1-next.082ed6819.0",
-		"@wordpress/is-shallow-equal": "^5.12.1-next.082ed6819.0",
-		"@wordpress/keyboard-shortcuts": "^5.12.1-next.082ed6819.0",
-		"@wordpress/keycodes": "^4.12.1-next.082ed6819.0",
-		"@wordpress/notices": "^5.12.1-next.082ed6819.0",
-		"@wordpress/preferences": "^4.12.1-next.082ed6819.0",
-		"@wordpress/priority-queue": "^3.12.1-next.082ed6819.0",
-		"@wordpress/private-apis": "^1.12.1-next.082ed6819.0",
-		"@wordpress/rich-text": "^7.12.1-next.082ed6819.0",
-		"@wordpress/style-engine": "^2.12.1-next.082ed6819.0",
-		"@wordpress/token-list": "^3.12.1-next.082ed6819.0",
-		"@wordpress/url": "^4.12.1-next.082ed6819.0",
-		"@wordpress/warning": "^3.12.1-next.082ed6819.0",
-		"@wordpress/wordcount": "^4.12.1-next.082ed6819.0",
+		"@wordpress/compose": "^7.13.1-next.a9f418477.0",
+		"@wordpress/data": "^10.13.1-next.a9f418477.0",
+		"@wordpress/date": "^5.13.1-next.a9f418477.0",
+		"@wordpress/deprecated": "^4.13.1-next.a9f418477.0",
+		"@wordpress/dom": "^4.13.1-next.a9f418477.0",
+		"@wordpress/element": "^6.13.1-next.a9f418477.0",
+		"@wordpress/escape-html": "^3.13.1-next.a9f418477.0",
+		"@wordpress/hooks": "^4.13.1-next.a9f418477.0",
+		"@wordpress/html-entities": "^4.13.1-next.a9f418477.0",
+		"@wordpress/i18n": "^5.13.1-next.a9f418477.0",
+		"@wordpress/icons": "^10.13.1-next.a9f418477.0",
+		"@wordpress/is-shallow-equal": "^5.13.1-next.a9f418477.0",
+		"@wordpress/keyboard-shortcuts": "^5.13.1-next.a9f418477.0",
+		"@wordpress/keycodes": "^4.13.1-next.a9f418477.0",
+		"@wordpress/notices": "^5.13.1-next.a9f418477.0",
+		"@wordpress/preferences": "^4.13.1-next.a9f418477.0",
+		"@wordpress/priority-queue": "^3.13.1-next.a9f418477.0",
+		"@wordpress/private-apis": "^1.13.1-next.a9f418477.0",
+		"@wordpress/rich-text": "^7.13.1-next.a9f418477.0",
+		"@wordpress/style-engine": "^2.13.1-next.a9f418477.0",
+		"@wordpress/token-list": "^3.13.1-next.a9f418477.0",
+		"@wordpress/url": "^4.13.1-next.a9f418477.0",
+		"@wordpress/warning": "^3.13.1-next.a9f418477.0",
+		"@wordpress/wordcount": "^4.13.1-next.a9f418477.0",
 		"change-case": "^4.1.2",
 		"clsx": "^2.1.1",
 		"colord": "^2.7.0",
@@ -90,5 +90,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "2bb7bad15ddb8e88210fab7d4a1ef1565466e424"
+	"gitHead": "c1a8f3e9cada3b7d8342d1d2595c2dac0433111d"
 }

package/src/autocompleters/block.js

@@ -23,12 +23,10 @@ import { orderInserterBlockItems } from '../utils/order-inserter-block-items';
 const noop = () => {};
 const SHOWN_BLOCK_TYPES = 9;
 
-/** @typedef {import('@wordpress/components').WPCompleter} WPCompleter */
-
 /**
  * Creates a blocks repeater for replacing the current block with a selected block type.
  *
- * @return {WPCompleter} A blocks completer.
+ * @return {Object} A blocks completer.
  */
 function createBlockCompleter() {
 	return {
@@ -157,6 +155,6 @@ function createBlockCompleter() {
 /**
  * Creates a blocks repeater for replacing the current block with a selected block type.
  *
- * @return {WPCompleter} A blocks completer.
+ * @return {Object} A blocks completer.
  */
 export default createBlockCompleter();

package/src/autocompleters/link.js

@@ -10,12 +10,10 @@ import { decodeEntities } from '@wordpress/html-entities';
 
 const SHOWN_SUGGESTIONS = 10;
 
-/** @typedef {import('@wordpress/components').WPCompleter} WPCompleter */
-
 /**
  * Creates a suggestion list for links to posts or pages.
  *
- * @return {WPCompleter} A links completer.
+ * @return {Object} A links completer.
  */
 function createLinkCompleter() {
 	return {
@@ -60,6 +58,6 @@ function createLinkCompleter() {
 /**
  * Creates a suggestion list for links to posts or pages..
  *
- * @return {WPCompleter} A link completer.
+ * @return {Object} A link completer.
  */
 export default createLinkCompleter();

package/src/components/alignment-control/stories/aliginment-toolbar.story.js

@@ -0,0 +1,47 @@
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { AlignmentToolbar } from '..';
+
+/**
+ * The `AlignmentToolbar` component renders a dropdown menu that displays alignment options for the selected block in `Toolbar`.
+ */
+const meta = {
+	title: 'BlockEditor/AlignmentToolbar',
+	component: AlignmentToolbar,
+	argTypes: {
+		value: {
+			control: false,
+			defaultValue: 'undefined',
+			description: 'The current value of the alignment setting.',
+		},
+		onChange: {
+			action: 'onChange',
+			control: false,
+			description:
+				"A callback function invoked when the toolbar's alignment value is changed via an interaction with any of the toolbar's buttons. Called with the new alignment value (ie: `left`, `center`, `right`, `undefined`) as the only argument.",
+		},
+	},
+};
+export default meta;
+
+export const Default = {
+	render: function Template( { onChange, ...args } ) {
+		const [ value, setValue ] = useState();
+		return (
+			<AlignmentToolbar
+				{ ...args }
+				onChange={ ( ...changeArgs ) => {
+					onChange( ...changeArgs );
+					setValue( ...changeArgs );
+				} }
+				value={ value }
+			/>
+		);
+	},
+};

package/src/components/alignment-control/stories/index.story.js

@@ -0,0 +1,51 @@
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { AlignmentControl } from '../';
+
+/**
+ * The `AlignmentControl` component renders a dropdown menu that displays alignment options for the selected block.
+ *
+ * This component is mostly used for blocks that display text, such as Heading, Paragraph, Post Author, Post Comments, Verse, Quote, Post Title, etc... And the available alignment options are `left`, `center` or `right` alignment.
+ *
+ * If you want to use the alignment control in a toolbar, you should use the `AlignmentToolbar` component instead.
+ */
+const meta = {
+	title: 'BlockEditor/AlignmentControl',
+	component: AlignmentControl,
+	argTypes: {
+		value: {
+			control: false,
+			defaultValue: 'undefined',
+			description: 'The current value of the alignment setting.',
+		},
+		onChange: {
+			action: 'onChange',
+			control: false,
+			description:
+				"A callback function invoked when the toolbar's alignment value is changed via an interaction with any of the toolbar's buttons. Called with the new alignment value (ie: `left`, `center`, `right`, `undefined`) as the only argument.",
+		},
+	},
+};
+export default meta;
+
+export const Default = {
+	render: function Template( { onChange, ...args } ) {
+		const [ value, setValue ] = useState();
+		return (
+			<AlignmentControl
+				{ ...args }
+				onChange={ ( ...changeArgs ) => {
+					onChange( ...changeArgs );
+					setValue( ...changeArgs );
+				} }
+				value={ value }
+			/>
+		);
+	},
+};

package/src/components/alignment-control/test/__snapshots__/index.js.snap

@@ -12,7 +12,7 @@ exports[`AlignmentUI should allow custom alignment controls to be specified 1`]
         align="custom-left"
         aria-label="My custom left"
         aria-pressed="false"
-        class="components-button components-toolbar__control has-icon"
+        class="components-button components-toolbar__control is-compact has-icon"
         data-toolbar-item="true"
         type="button"
       >
@@ -35,7 +35,7 @@ exports[`AlignmentUI should allow custom alignment controls to be specified 1`]
         align="custom-right"
         aria-label="My custom right"
         aria-pressed="true"
-        class="components-button components-toolbar__control is-pressed has-icon"
+        class="components-button components-toolbar__control is-compact is-pressed has-icon"
         data-toolbar-item="true"
         type="button"
       >
@@ -100,7 +100,7 @@ exports[`AlignmentUI should match snapshot when controls are visible 1`] = `
         align="left"
         aria-label="Align text left"
         aria-pressed="true"
-        class="components-button components-toolbar__control is-pressed has-icon"
+        class="components-button components-toolbar__control is-compact is-pressed has-icon"
         data-toolbar-item="true"
         type="button"
       >
@@ -123,7 +123,7 @@ exports[`AlignmentUI should match snapshot when controls are visible 1`] = `
         align="center"
         aria-label="Align text center"
         aria-pressed="false"
-        class="components-button components-toolbar__control has-icon"
+        class="components-button components-toolbar__control is-compact has-icon"
         data-toolbar-item="true"
         type="button"
       >
@@ -146,7 +146,7 @@ exports[`AlignmentUI should match snapshot when controls are visible 1`] = `
         align="right"
         aria-label="Align text right"
         aria-pressed="false"
-        class="components-button components-toolbar__control has-icon"
+        class="components-button components-toolbar__control is-compact has-icon"
         data-toolbar-item="true"
         type="button"
       >

package/src/components/block-alignment-control/test/__snapshots__/index.js.snap

@@ -42,7 +42,7 @@ exports[`BlockAlignmentUI should match snapshot when controls are visible 1`] =
       <button
         aria-label="None"
         aria-pressed="false"
-        class="components-button components-toolbar__control has-icon"
+        class="components-button components-toolbar__control is-compact has-icon"
         data-toolbar-item="true"
         type="button"
       >
@@ -64,7 +64,7 @@ exports[`BlockAlignmentUI should match snapshot when controls are visible 1`] =
       <button
         aria-label="Align left"
         aria-pressed="true"
-        class="components-button components-toolbar__control is-pressed has-icon"
+        class="components-button components-toolbar__control is-compact is-pressed has-icon"
         data-toolbar-item="true"
         type="button"
       >
@@ -86,7 +86,7 @@ exports[`BlockAlignmentUI should match snapshot when controls are visible 1`] =
       <button
         aria-label="Align center"
         aria-pressed="false"
-        class="components-button components-toolbar__control has-icon"
+        class="components-button components-toolbar__control is-compact has-icon"
         data-toolbar-item="true"
         type="button"
       >
@@ -108,7 +108,7 @@ exports[`BlockAlignmentUI should match snapshot when controls are visible 1`] =
       <button
         aria-label="Align right"
         aria-pressed="false"
-        class="components-button components-toolbar__control has-icon"
+        class="components-button components-toolbar__control is-compact has-icon"
         data-toolbar-item="true"
         type="button"
       >

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

@@ -56,7 +56,8 @@ export function ExperimentalBlockCanvas( {
 		return (
 			<BlockTools
 				__unstableContentRef={ localRef }
-				style={ { height, display: 'flex' } }
+				className="block-editor-block-canvas"
+				style={ { height } }
 			>
 				<EditorStyles
 					styles={ styles }
@@ -67,10 +68,6 @@ export function ExperimentalBlockCanvas( {
 					ref={ contentRef }
 					className="editor-styles-wrapper"
 					tabIndex={ -1 }
-					style={ {
-						height: '100%',
-						width: '100%',
-					} }
 				>
 					{ children }
 				</WritingFlow>
@@ -81,6 +78,7 @@ export function ExperimentalBlockCanvas( {
 	return (
 		<BlockTools
 			__unstableContentRef={ localRef }
+			className="block-editor-block-canvas"
 			style={ { height, display: 'flex' } }
 		>
 			<Iframe

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

@@ -4,6 +4,7 @@ iframe[name="editor-canvas"] {
 	height: 100%;
 	display: block;
 	// Handles transitions between device previews
-	@include editor-canvas-resize-animation;
+	transition: all 400ms cubic-bezier(0.46, 0.03, 0.52, 0.96);
+	@include reduce-motion("transition");
 	background-color: $gray-300;
 }

package/src/components/block-draggable/content.scss

@@ -1,13 +1,12 @@
 // This creates a "slot" where the block you're dragging appeared.
 // We use !important as one of the rules are meant to be overridden.
 .block-editor-block-list__layout .is-dragging {
-	background-color: currentColor !important;
-	opacity: 0.05 !important;
+	opacity: 0.1 !important;
 	border-radius: $radius-small !important;
 
-	// Disabling pointer events during the drag event is necessary,
-	// lest the block might affect your drag operation.
-	pointer-events: none !important;
+	iframe {
+		pointer-events: none;
+	}
 
 	// Hide the multi selection indicator when dragging.
 	&::selection {
@@ -18,3 +17,10 @@
 		content: none !important;
 	}
 }
+
+// Images are draggable by default, so disable drag for them if not explicitly
+// set. This is done so that the block can capture the drag event instead.
+.wp-block img:not([draggable]),
+.wp-block svg:not([draggable]) {
+	pointer-events: none;
+}

package/src/components/block-list/block.js

@@ -6,13 +6,7 @@ import clsx from 'clsx';
 /**
  * WordPress dependencies
  */
-import {
-	memo,
-	useCallback,
-	RawHTML,
-	useContext,
-	useMemo,
-} from '@wordpress/element';
+import { memo, RawHTML, useContext, useMemo } from '@wordpress/element';
 import {
 	getBlockType,
 	getSaveContent,
@@ -28,7 +22,7 @@ import {
 	store as blocksStore,
 } from '@wordpress/blocks';
 import { withFilters } from '@wordpress/components';
-import { withDispatch, useDispatch, useSelect } from '@wordpress/data';
+import { withDispatch, useSelect } from '@wordpress/data';
 import { compose } from '@wordpress/compose';
 import { safeHTML } from '@wordpress/dom';
 
@@ -103,6 +97,7 @@ function BlockListBlock( {
 	wrapperProps,
 	setAttributes,
 	onReplace,
+	onRemove,
 	onInsertBlocksAfter,
 	onMerge,
 	toggleSelection,
@@ -113,11 +108,6 @@ function BlockListBlock( {
 		themeSupportsLayout,
 		...context
 	} = useContext( PrivateBlockContext );
-	const { removeBlock } = useDispatch( blockEditorStore );
-	const onRemove = useCallback(
-		() => removeBlock( clientId ),
-		[ clientId, removeBlock ]
-	);
 
 	const parentLayout = useLayout() || {};
 
@@ -537,6 +527,9 @@ const applyWithDispatch = withDispatch( ( dispatch, ownProps, registry ) => {
 				initialPosition
 			);
 		},
+		onRemove() {
+			removeBlock( ownProps.clientId );
+		},
 		toggleSelection( selectionEnabled ) {
 			toggleSelection( selectionEnabled );
 		},
@@ -797,6 +790,7 @@ function BlockListBlockProvider( props ) {
 		mayDisplayParentControls,
 		originalBlockClientId,
 		themeSupportsLayout,
+		canMove,
 	};
 
 	// Here we separate between the props passed to BlockListBlock and any other

package/src/components/block-list/content.scss

@@ -427,3 +427,9 @@ _::-webkit-full-page-media, _:future, :root [data-has-multi-selection="true"] .b
 	// Additional -1px is required to avoid sub pixel rounding errors allowing background to show.
 	margin: 0 calc(-1 * var(--wp--style--root--padding-right) - 1px) 0 calc(-1 * var(--wp--style--root--padding-left) - 1px) !important;
 }
+
+// This only works in Firefox, Chrome and Safari don't accept a custom cursor
+// during drag.
+.is-dragging {
+	cursor: grabbing;
+}

package/src/components/block-list/use-block-props/index.js

@@ -30,6 +30,7 @@ import { useIntersectionObserver } from './use-intersection-observer';
 import { useScrollIntoView } from './use-scroll-into-view';
 import { useFlashEditableBlocks } from '../../use-flash-editable-blocks';
 import { canBindBlock } from '../../../hooks/use-bindings-attributes';
+import { useFirefoxDraggableCompatibility } from './use-firefox-draggable-compatibility';
 
 /**
  * This hook is used to lightly mark an element as a block element. The element
@@ -100,11 +101,13 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) {
 		isTemporarilyEditingAsBlocks,
 		defaultClassName,
 		isSectionBlock,
+		canMove,
 	} = useContext( PrivateBlockContext );
 
 	// translators: %s: Type of block (i.e. Text, Image etc)
 	const blockLabel = sprintf( __( 'Block: %s' ), blockTitle );
 	const htmlSuffix = mode === 'html' && ! __unstableIsHtml ? '-visual' : '';
+	const ffDragRef = useFirefoxDraggableCompatibility();
 	const mergedRefs = useMergeRefs( [
 		props.ref,
 		useFocusFirstElement( { clientId, initialPosition } ),
@@ -120,6 +123,7 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) {
 			isEnabled: isSectionBlock,
 		} ),
 		useScrollIntoView( { isSelected } ),
+		canMove ? ffDragRef : undefined,
 	] );
 
 	const blockEditContext = useBlockEditContext();
@@ -152,6 +156,7 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) {
 
 	return {
 		tabIndex: blockEditingMode === 'disabled' ? -1 : 0,
+		draggable: canMove && ! hasChildSelected ? true : undefined,
 		...wrapperProps,
 		...props,
 		ref: mergedRefs,

package/src/components/block-list/use-block-props/use-firefox-draggable-compatibility.js

@@ -0,0 +1,83 @@
+/**
+ * WordPress dependencies
+ */
+import { useRefEffect } from '@wordpress/compose';
+
+const nodesByDocument = new Map();
+
+function add( doc, node ) {
+	let set = nodesByDocument.get( doc );
+	if ( ! set ) {
+		set = new Set();
+		nodesByDocument.set( doc, set );
+		doc.addEventListener( 'pointerdown', down );
+	}
+	set.add( node );
+}
+
+function remove( doc, node ) {
+	const set = nodesByDocument.get( doc );
+	if ( set ) {
+		set.delete( node );
+		restore( node );
+		if ( set.size === 0 ) {
+			nodesByDocument.delete( doc );
+			doc.removeEventListener( 'pointerdown', down );
+		}
+	}
+}
+
+function restore( node ) {
+	const prevDraggable = node.getAttribute( 'data-draggable' );
+	if ( prevDraggable ) {
+		node.removeAttribute( 'data-draggable' );
+		// Only restore if `draggable` is still removed. It could have been
+		// changed by React in the meantime.
+		if ( prevDraggable === 'true' && ! node.getAttribute( 'draggable' ) ) {
+			node.setAttribute( 'draggable', 'true' );
+		}
+	}
+}
+
+function down( event ) {
+	const { target } = event;
+	const { ownerDocument, isContentEditable } = target;
+	const nodes = nodesByDocument.get( ownerDocument );
+
+	if ( isContentEditable ) {
+		// Whenever an editable element is clicked, check which draggable
+		// blocks contain this element, and temporarily disable draggability.
+		for ( const node of nodes ) {
+			if (
+				node.getAttribute( 'draggable' ) === 'true' &&
+				node.contains( target )
+			) {
+				node.removeAttribute( 'draggable' );
+				node.setAttribute( 'data-draggable', 'true' );
+			}
+		}
+	} else {
+		// Whenever a non-editable element is clicked, re-enable draggability
+		// for any blocks that were previously disabled.
+		for ( const node of nodes ) {
+			restore( node );
+		}
+	}
+}
+
+/**
+ * In Firefox, the `draggable` and `contenteditable` attributes don't play well
+ * together. When `contenteditable` is within a `draggable` element, selection
+ * doesn't get set in the right place. The only solution is to temporarily
+ * remove the `draggable` attribute clicking inside `contenteditable` elements.
+ *
+ * @return {Function} Cleanup function.
+ */
+export function useFirefoxDraggableCompatibility() {
+	return useRefEffect( ( node ) => {
+		add( node.ownerDocument, node );
+		return () => {
+			remove( node.ownerDocument, node );
+		};
+	}, [] );
+}