prep build 10/01

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,48 @@ _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.
+
 ### useBlockCommands
 
 Undocumented declaration.

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;
-	}
-}

packages/block-editor/src/components/block-tools/zoom-out-mode-inserter-button.js

@@ -6,36 +6,21 @@ import clsx from 'clsx';
 /**
  * WordPress dependencies
  */
-import { useState } from '@wordpress/element';
 import { Button } from '@wordpress/components';
 import { plus } from '@wordpress/icons';
 import { _x } from '@wordpress/i18n';
 
-function ZoomOutModeInserterButton( { isVisible, onClick } ) {
-	const [
-		zoomOutModeInserterButtonHovered,
-		setZoomOutModeInserterButtonHovered,
-	] = useState( false );
-
+function ZoomOutModeInserterButton( { onClick } ) {
 	return (
 		<Button
 			variant="primary"
 			icon={ plus }
 			size="compact"
 			className={ clsx(
 				'block-editor-button-pattern-inserter__button',
-				'block-editor-block-tools__zoom-out-mode-inserter-button',
-				{
-					'is-visible': isVisible || zoomOutModeInserterButtonHovered,
-				}
+				'block-editor-block-tools__zoom-out-mode-inserter-button'
 			) }
 			onClick={ onClick }
-			onMouseOver={ () => {
-				setZoomOutModeInserterButtonHovered( true );
-			} }
-			onMouseOut={ () => {
-				setZoomOutModeInserterButtonHovered( false );
-			} }
 			label={ _x(
 				'Add pattern',
 				'Generic label for pattern inserter button'

packages/block-editor/src/components/block-tools/zoom-out-mode-inserters.js

@@ -22,15 +22,13 @@ function ZoomOutModeInserters() {
 		setInserterIsOpened,
 		sectionRootClientId,
 		selectedBlockClientId,
-		hoveredBlockClientId,
 	} = useSelect( ( select ) => {
 		const {
 			getSettings,
 			getInsertionPoint,
 			getBlockOrder,
 			getSelectionStart,
 			getSelectedBlockClientId,
-			getHoveredBlockClientId,
 			getSectionRootClientId,
 			isBlockInsertionPointVisible,
 		} = unlock( select( blockEditorStore ) );
@@ -46,7 +44,6 @@ function ZoomOutModeInserters() {
 			setInserterIsOpened:
 				getSettings().__experimentalSetIsInserterOpened,
 			selectedBlockClientId: getSelectedBlockClientId(),
-			hoveredBlockClientId: getHoveredBlockClientId(),
 		};
 	}, [] );
 
@@ -63,7 +60,7 @@ function ZoomOutModeInserters() {
 		};
 	}, [] );
 
-	if ( ! isReady ) {
+	if ( ! isReady || ! hasSelection ) {
 		return null;
 	}
 
@@ -75,23 +72,17 @@ function ZoomOutModeInserters() {
 		const nextClientId = blockOrder[ index ];
 
 		const isSelected =
-			hasSelection &&
-			( selectedBlockClientId === previousClientId ||
-				selectedBlockClientId === nextClientId );
-
-		const isHovered =
-			hoveredBlockClientId === previousClientId ||
-			hoveredBlockClientId === nextClientId;
+			selectedBlockClientId === previousClientId ||
+			selectedBlockClientId === nextClientId;
 
 		return (
 			<BlockPopoverInbetween
 				key={ index }
 				previousClientId={ previousClientId }
 				nextClientId={ nextClientId }
 			>
-				{ ! shouldRenderInsertionPoint && (
+				{ ! shouldRenderInsertionPoint && isSelected && (
 					<ZoomOutModeInserterButton
-						isVisible={ isSelected || isHovered }
 						onClick={ () => {
 							setInserterIsOpened( {
 								rootClientId: sectionRootClientId,

packages/block-editor/src/components/inserter/media-tab/media-preview.js

@@ -133,7 +133,8 @@ export function MediaPreview( { media, onClick, category } ) {
 	);
 	const { createErrorNotice, createSuccessNotice } =
 		useDispatch( noticesStore );
-	const { getSettings } = useSelect( blockEditorStore );
+	const { getSettings, getBlock } = useSelect( blockEditorStore );
+	const { updateBlockAttributes } = useDispatch( blockEditorStore );
 
 	const onMediaInsert = useCallback(
 		( previewBlock ) => {
@@ -180,18 +181,31 @@ export function MediaPreview( { media, onClick, category } ) {
 							if ( isBlobURL( img.url ) ) {
 								return;
 							}
-							onClick( {
-								...clonedBlock,
-								attributes: {
+
+							if ( ! getBlock( clonedBlock.clientId ) ) {
+								// Ensure the block is only inserted once.
+								onClick( {
+									...clonedBlock,
+									attributes: {
+										...clonedBlock.attributes,
+										id: img.id,
+										url: img.url,
+									},
+								} );
+
+								createSuccessNotice(
+									__( 'Image uploaded and inserted.' ),
+									{ type: 'snackbar', id: 'inserter-notice' }
+								);
+							} else {
+								// For subsequent calls, update the existing block.
+								updateBlockAttributes( clonedBlock.clientId, {
 									...clonedBlock.attributes,
 									id: img.id,
 									url: img.url,
-								},
-							} );
-							createSuccessNotice(
-								__( 'Image uploaded and inserted.' ),
-								{ type: 'snackbar', id: 'inserter-notice' }
-							);
+								} );
+							}
+
 							setIsInserting( false );
 						},
 						allowedTypes: ALLOWED_MEDIA_TYPES,
@@ -214,7 +228,9 @@ export function MediaPreview( { media, onClick, category } ) {
 			getSettings,
 			onClick,
 			createSuccessNotice,
+			updateBlockAttributes,
 			createErrorNotice,
+			getBlock,
 		]
 	);
 

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

@@ -257,39 +257,11 @@ $block-inserter-tabs-height: 44px;
 			svg {
 				fill: var(--wp-admin-theme-color);
 			}
-
-			&::after {
-				content: "";
-				display: block;
-				outline: none;
-				position: absolute;
-				top: 0;
-				bottom: 0;
-				left: 0;
-				right: 0;
-				border-radius: $radius-small;
-				opacity: 0.04;
-				background: var(--wp-admin-theme-color);
-				height: 100%;
-			}
-		}
-
-		&:focus-visible,
-		&:focus:not(:disabled) {
-			border-radius: $radius-small;
-			box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-			// Windows high contrast mode.
-			outline: 2px solid transparent;
-			outline-offset: 0;
 		}
 
 		&::before {
 			display: none;
 		}
-
-		&::after {
-			display: none;
-		}
 	}
 }
 

packages/block-editor/src/components/inspector-controls-tabs/style.scss

@@ -1,7 +1,3 @@
-.show-icon-labels {
-	.block-editor-block-inspector__tabs [role="tablist"] {
-		.components-button {
-			justify-content: center;
-		}
-	}
+.block-editor-block-inspector__tabs [role="tablist"] {
+	width: 100%;
 }