Throwaway: merge content editing with toolbar anchoring

docs/contributors/versions-in-wordpress.md

@@ -6,6 +6,7 @@ If anything looks incorrect here, please bring it up in #core-editor in [WordPre
 
 | Gutenberg Versions | WordPress Version |
 | ------------------ | ----------------- |
+| 18.6-19.3          | 6.7               |
 | 17.8-18.5          | 6.6.1             |
 | 17.8-18.5          | 6.6               |
 | 16.8-17.7          | 6.5.5             |

docs/reference-guides/filters/block-filters.md

@@ -294,6 +294,31 @@ Used to filter an individual transform result from block transformation. All of
 
 Called immediately after the default parsing of a block's attributes and before validation to allow a plugin to manipulate attribute values in time for validation and/or the initial values rendering of the block in the editor.
 
+The callback function for this filter accepts 4 parameters:
+- `blockAttributes` (`Object`): All block attributes.
+- `blockType` (`Object`): The block type.
+- `innerHTML` (`string`): Raw block content.
+- `attributes` (`object`): Known block attributes (from delimiters).
+
+In the example below, we use the `blocks.getBlockAttributes` filter to lock the position of all paragraph blocks on a page.
+
+```js
+// Our filter function
+function lockParagraphs( blockAttributes, blockType, innerHTML, attributes  ) {
+    if('core/paragraph' === blockType.name) {
+        blockAttributes['lock'] = {move: true}
+    }
+    return blockAttributes;
+}
+
+// Add the filter
+wp.hooks.addFilter(
+    'blocks.getBlockAttributes',
+    'my-plugin/lock-paragraphs',
+    lockParagraphs
+);
+```
+
 ### `editor.BlockEdit`
 
 Used to modify the block's `edit` component. It receives the original block `BlockEdit` component and returns a new wrapped component.

packages/block-editor/README.md

@@ -839,6 +839,52 @@ _Related_
 
 -   <https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/url-popover/README.md>
 
+### useBlockBindingsUtils
+
+Retrieves the existing utils needed to update the block `bindings` metadata. They can be used to create, modify, or remove connections from the existing block attributes.
+
+It contains the following utils:
+
+-   `updateBlockBindings`: Updates the value of the bindings connected to block attributes. It can be used to remove a specific binding by setting the value to `undefined`.
+-   `removeAllBlockBindings`: Removes the bindings property of the `metadata` attribute.
+
+_Usage_
+
+```js
+import { useBlockBindingsUtils } from '@wordpress/block-editor';
+const { updateBlockBindings, removeAllBlockBindings } = useBlockBindingsUtils();
+
+// Update url and alt attributes.
+updateBlockBindings( {
+	url: {
+		source: 'core/post-meta',
+		args: {
+			key: 'url_custom_field',
+		},
+	},
+	alt: {
+		source: 'core/post-meta',
+		args: {
+			key: 'text_custom_field',
+		},
+	},
+} );
+
+// Remove binding from url attribute.
+updateBlockBindings( { url: undefined } );
+
+// Remove bindings from all attributes.
+removeAllBlockBindings();
+```
+
+_Returns_
+
+-   `?WPBlockBindingsUtils`: Object containing the block bindings utils.
+
+_Changelog_
+
+`6.7.0` Introduced in WordPress core.
+
 ### useBlockCommands
 
 Undocumented declaration.

packages/block-editor/src/components/block-list/block.js

@@ -609,7 +609,6 @@ function BlockListBlockProvider( props ) {
 				isBlockBeingDragged,
 				isDragging,
 				__unstableHasActiveBlockOverlayActive,
-				__unstableGetEditorMode,
 				getSelectedBlocksInitialCaretPosition,
 			} = unlock( select( blockEditorStore ) );
 			const blockWithoutAttributes =
@@ -680,8 +679,6 @@ function BlockListBlockProvider( props ) {
 				blocksWithSameName.length &&
 				blocksWithSameName[ 0 ] !== clientId;
 
-			const editorMode = __unstableGetEditorMode();
-
 			return {
 				...previewContext,
 				mode: getBlockMode( clientId ),
@@ -708,7 +705,6 @@ function BlockListBlockProvider( props ) {
 					) && hasSelectedInnerBlock( clientId ),
 				blockApiVersion: blockType?.apiVersion || 1,
 				blockTitle: match?.title || blockType?.title,
-				editorMode,
 				isSubtreeDisabled:
 					blockEditingMode === 'disabled' &&
 					isBlockSubtreeDisabled( clientId ),
@@ -755,7 +751,6 @@ function BlockListBlockProvider( props ) {
 		themeSupportsLayout,
 		isTemporarilyEditingAsBlocks,
 		blockEditingMode,
-		editorMode,
 		mayDisplayControls,
 		mayDisplayParentControls,
 		index,
@@ -808,7 +803,6 @@ function BlockListBlockProvider( props ) {
 		hasOverlay,
 		initialPosition,
 		blockEditingMode,
-		editorMode,
 		isHighlighted,
 		isMultiSelected,
 		isPartiallySelected,

packages/block-editor/src/components/block-list/use-block-props/index.js

@@ -85,7 +85,6 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) {
 		name,
 		blockApiVersion,
 		blockTitle,
-		editorMode,
 		isSelected,
 		isSubtreeDisabled,
 		hasOverlay,
@@ -113,7 +112,7 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) {
 		useBlockRefProvider( clientId ),
 		useFocusHandler( clientId ),
 		useEventHandlers( { clientId, isSelected } ),
-		useZoomOutModeExit( { editorMode } ),
+		useZoomOutModeExit(),
 		useIsHovered( { clientId } ),
 		useIntersectionObserver(),
 		useMovingAnimation( { triggerAnimationOnChange: index, clientId } ),

packages/block-editor/src/components/block-list/use-block-props/use-zoom-out-mode-exit.js

@@ -12,25 +12,27 @@ import { unlock } from '../../../lock-unlock';
 
 /**
  * Allows Zoom Out mode to be exited by double clicking in the selected block.
- *
- * @param {string} clientId Block client ID.
  */
-export function useZoomOutModeExit( { editorMode } ) {
-	const { getSettings, isZoomOut } = unlock( useSelect( blockEditorStore ) );
+export function useZoomOutModeExit() {
+	const { getSettings, isZoomOut, __unstableGetEditorMode } = unlock(
+		useSelect( blockEditorStore )
+	);
+
 	const { __unstableSetEditorMode, resetZoomLevel } = unlock(
 		useDispatch( blockEditorStore )
 	);
 
 	return useRefEffect(
 		( node ) => {
-			// In "compose" mode.
-			const composeMode = editorMode === 'zoom-out' && isZoomOut();
+			function onDoubleClick( event ) {
+				// In "compose" mode.
+				const composeMode =
+					__unstableGetEditorMode() === 'zoom-out' && isZoomOut();
 
-			if ( ! composeMode ) {
-				return;
-			}
+				if ( ! composeMode ) {
+					return;
+				}
 
-			function onDoubleClick( event ) {
 				if ( ! event.defaultPrevented ) {
 					event.preventDefault();
 
@@ -52,6 +54,12 @@ export function useZoomOutModeExit( { editorMode } ) {
 				node.removeEventListener( 'dblclick', onDoubleClick );
 			};
 		},
-		[ editorMode, getSettings, __unstableSetEditorMode ]
+		[
+			getSettings,
+			__unstableSetEditorMode,
+			__unstableGetEditorMode,
+			isZoomOut,
+			resetZoomLevel,
+		]
 	);
 }

packages/block-editor/src/components/block-popover/index.js

@@ -8,6 +8,7 @@ import clsx from 'clsx';
  */
 import { useMergeRefs } from '@wordpress/compose';
 import { Popover } from '@wordpress/components';
+import { useSelect } from '@wordpress/data';
 import {
 	forwardRef,
 	useMemo,
@@ -21,6 +22,8 @@ import {
 import { useBlockElement } from '../block-list/use-block-props/use-block-refs';
 import usePopoverScroll from './use-popover-scroll';
 import { rectUnion, getVisibleElementBounds } from '../../utils/dom';
+import { store as blockEditorStore } from '../../store';
+import { unlock } from '../../lock-unlock';
 
 const MAX_POPOVER_RECOMPUTE_COUNTER = Number.MAX_SAFE_INTEGER;
 
@@ -74,12 +77,39 @@ function BlockPopover(
 		};
 	}, [ selectedElement ] );
 
+	const { isZoomOut, sectionRootClientId, getParentSectionBlock } = useSelect(
+		( select ) => {
+			const {
+				isZoomOut: isZoomOutSelector,
+				getSectionRootClientId,
+				getParentSectionBlock: getParentSectionBlockFn,
+			} = unlock( select( blockEditorStore ) );
+
+			const root = getSectionRootClientId();
+			return {
+				sectionRootClientId: root,
+				isZoomOut: isZoomOutSelector(),
+				getParentSectionBlock: getParentSectionBlockFn,
+			};
+		},
+		[]
+	);
+
+	// These elements are used to position the zoom out view vertical toolbar
+	// correctly, relative to the selected section.
+	const rootSectionElement = useBlockElement( sectionRootClientId );
+	const parentSectionElement = useBlockElement(
+		getParentSectionBlock( clientId ) ?? clientId
+	);
+
 	const popoverAnchor = useMemo( () => {
 		if (
 			// popoverDimensionsRecomputeCounter is by definition always equal or greater
 			// than 0. This check is only there to satisfy the correctness of the
 			// exhaustive-deps rule for the `useMemo` hook.
 			popoverDimensionsRecomputeCounter < 0 ||
+			! rootSectionElement ||
+			! parentSectionElement ||
 			! selectedElement ||
 			( bottomClientId && ! lastSelectedElement )
 		) {
@@ -88,6 +118,36 @@ function BlockPopover(
 
 		return {
 			getBoundingClientRect() {
+				// The zoom out view has a vertical block toolbar that should always
+				// be on the edge of the canvas, aligned to the top of the currently
+				// selected section. This condition changes the anchor of the toolbar
+				// to the section instead of the block to handle blocksn that are
+				// not full width and nested blocks to keep section height.
+				if ( isZoomOut ) {
+					// Compute the height based on the parent section of the
+					// selected block, because the selected block may be
+					// shorter than the section.
+					const rootSectionElementRect =
+						getVisibleElementBounds( rootSectionElement );
+					const parentSectionElementRect =
+						getVisibleElementBounds( parentSectionElement );
+					const anchorHeight =
+						parentSectionElementRect.bottom -
+						parentSectionElementRect.top;
+
+					// Always use the width of the section root element to make sure
+					// the toolbar is always on the edge of the canvas.
+					const andchorWidth =
+						rootSectionElementRect.right -
+						rootSectionElementRect.left;
+					return new window.DOMRectReadOnly(
+						rootSectionElementRect.left,
+						parentSectionElementRect.top,
+						andchorWidth,
+						anchorHeight
+					);
+				}
+
 				return lastSelectedElement
 					? rectUnion(
 							getVisibleElementBounds( selectedElement ),
@@ -102,6 +162,7 @@ function BlockPopover(
 		lastSelectedElement,
 		selectedElement,
 		popoverDimensionsRecomputeCounter,
+		isZoomOut,
 	] );
 
 	if ( ! selectedElement || ( bottomClientId && ! lastSelectedElement ) ) {

packages/block-editor/src/components/block-tools/index.js

@@ -34,18 +34,30 @@ function selector( select ) {
 		getSettings,
 		__unstableGetEditorMode,
 		isTyping,
-	} = select( blockEditorStore );
+		isSectionBlock,
+		getParentSectionBlock,
+		isDragging,
+	} = unlock( select( blockEditorStore ) );
 
 	const clientId =
 		getSelectedBlockClientId() || getFirstMultiSelectedBlockClientId();
 
 	const editorMode = __unstableGetEditorMode();
+	const isZoomOut = editorMode === 'zoom-out';
+	let zoomOutToolbarClientId;
+	if ( isZoomOut ) {
+		zoomOutToolbarClientId = isSectionBlock( clientId )
+			? clientId
+			: getParentSectionBlock( clientId );
+	}
 
 	return {
 		clientId,
+		zoomOutToolbarClientId,
 		hasFixedToolbar: getSettings().hasFixedToolbar,
 		isTyping: isTyping(),
-		isZoomOutMode: editorMode === 'zoom-out',
+		isZoomOutMode: isZoomOut,
+		isDragging: isDragging(),
 	};
 }
 
@@ -63,10 +75,14 @@ export default function BlockTools( {
 	__unstableContentRef,
 	...props
 } ) {
-	const { clientId, hasFixedToolbar, isTyping, isZoomOutMode } = useSelect(
-		selector,
-		[]
-	);
+	const {
+		clientId,
+		zoomOutToolbarClientId,
+		hasFixedToolbar,
+		isTyping,
+		isZoomOutMode,
+		isDragging,
+	} = useSelect( selector, [] );
 	const isMatch = useShortcutEventMatch();
 	const {
 		getBlocksByClientId,
@@ -221,10 +237,10 @@ export default function BlockTools( {
 					/>
 				) }
 
-				{ showZoomOutToolbar && (
+				{ showZoomOutToolbar && !! zoomOutToolbarClientId && (
 					<ZoomOutPopover
 						__unstableContentRef={ __unstableContentRef }
-						clientId={ clientId }
+						clientId={ zoomOutToolbarClientId }
 					/>
 				) }
 
@@ -241,7 +257,7 @@ export default function BlockTools( {
 					name="__unstable-block-tools-after"
 					ref={ blockToolbarAfterRef }
 				/>
-				{ isZoomOutMode && (
+				{ isZoomOutMode && ! isDragging && (
 					<ZoomOutModeInserters
 						__unstableContentRef={ __unstableContentRef }
 					/>

packages/block-editor/src/components/block-tools/style.scss

@@ -202,11 +202,3 @@
 		border: none;
 	}
 }
-
-.block-editor-block-tools__zoom-out-mode-inserter-button {
-	visibility: hidden;
-
-	&.is-visible {
-		visibility: visible;
-	}
-}