@wordpress/block-editor 14.3.4 → 14.3.6

package/src/components/skip-to-selected-block/style.scss

@@ -3,18 +3,9 @@
 	top: -9999em;
 
 	&:focus {
-		height: auto;
-		width: auto;
-		display: block;
 		font-size: 14px;
 		font-weight: 600;
-		padding: 15px 23px 14px;
 		background: #f1f1f1;
-		color: var(--wp-admin-theme-color);
-		line-height: normal;
-		box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
-		text-decoration: none;
-		outline: none;
 		z-index: z-index(".skip-to-selected-block");
 	}
 }

package/src/components/tool-selector/index.js

@@ -36,7 +36,7 @@ function ToolSelector( props, ref ) {
 		( select ) => select( blockEditorStore ).__unstableGetEditorMode(),
 		[]
 	);
-	const { __unstableSetEditorMode } = unlock(
+	const { resetZoomLevel, __unstableSetEditorMode } = unlock(
 		useDispatch( blockEditorStore )
 	);
 
@@ -44,8 +44,7 @@ function ToolSelector( props, ref ) {
 		<Dropdown
 			renderToggle={ ( { isOpen, onToggle } ) => (
 				<Button
-					// TODO: Switch to `true` (40px size) if possible
-					__next40pxDefaultSize={ false }
+					size="compact"
 					{ ...props }
 					ref={ ref }
 					icon={ mode === 'navigation' ? selectIcon : editIcon }
@@ -64,7 +63,10 @@ function ToolSelector( props, ref ) {
 							value={
 								mode === 'navigation' ? 'navigation' : 'edit'
 							}
-							onSelect={ __unstableSetEditorMode }
+							onSelect={ ( newMode ) => {
+								resetZoomLevel();
+								__unstableSetEditorMode( newMode );
+							} }
 							choices={ [
 								{
 									value: 'edit',

package/src/components/url-input/button.js

@@ -3,7 +3,10 @@
  */
 import { __ } from '@wordpress/i18n';
 import { Component } from '@wordpress/element';
-import { Button } from '@wordpress/components';
+import {
+	Button,
+	__experimentalInputControlSuffixWrapper as InputControlSuffixWrapper,
+} from '@wordpress/components';
 import { link, keyboardReturn, arrowLeft } from '@wordpress/icons';
 
 /**
@@ -38,8 +41,7 @@ class URLInputButton extends Component {
 		return (
 			<div className="block-editor-url-input__button">
 				<Button
-					// TODO: Switch to `true` (40px size) if possible
-					__next40pxDefaultSize={ false }
+					size="compact"
 					icon={ link }
 					label={ buttonLabel }
 					onClick={ this.toggle }
@@ -53,8 +55,7 @@ class URLInputButton extends Component {
 					>
 						<div className="block-editor-url-input__button-modal-line">
 							<Button
-								// TODO: Switch to `true` (40px size) if possible
-								__next40pxDefaultSize={ false }
+								__next40pxDefaultSize
 								className="block-editor-url-input__back"
 								icon={ arrowLeft }
 								label={ __( 'Close' ) }
@@ -63,13 +64,16 @@ class URLInputButton extends Component {
 							<URLInput
 								value={ url || '' }
 								onChange={ onChange }
-							/>
-							<Button
-								// TODO: Switch to `true` (40px size) if possible
-								__next40pxDefaultSize={ false }
-								icon={ keyboardReturn }
-								label={ __( 'Submit' ) }
-								type="submit"
+								suffix={
+									<InputControlSuffixWrapper variant="control">
+										<Button
+											size="small"
+											icon={ keyboardReturn }
+											label={ __( 'Submit' ) }
+											type="submit"
+										/>
+									</InputControlSuffixWrapper>
+								}
 							/>
 						</div>
 					</form>

package/src/components/url-input/index.js

@@ -540,8 +540,7 @@ class URLInput extends Component {
 				>
 					{ suggestions.map( ( suggestion, index ) => (
 						<Button
-							// TODO: Switch to `true` (40px size) if possible
-							__next40pxDefaultSize={ false }
+							__next40pxDefaultSize
 							{ ...buildSuggestionItemProps( suggestion, index ) }
 							key={ suggestion.id }
 							className={ clsx(

package/src/components/url-input/style.scss

@@ -109,10 +109,4 @@ $input-size: 300px;
 	flex-shrink: 1;
 	min-width: 0;
 	align-items: flex-start;
-
-	.components-button {
-		flex-shrink: 0;
-		width: $button-size;
-		height: $button-size;
-	}
 }

package/src/components/use-resize-canvas/index.js

@@ -43,11 +43,9 @@ export default function useResizeCanvas( deviceType ) {
 		return deviceWidth < actualWidth ? deviceWidth : actualWidth;
 	};
 
-	const marginValue = () => ( window.innerHeight < 800 ? 36 : 64 );
-
 	const contentInlineStyles = ( device ) => {
 		const height = device === 'Mobile' ? '768px' : '1024px';
-		const marginVertical = marginValue() + 'px';
+		const marginVertical = '40px';
 		const marginHorizontal = 'auto';
 
 		switch ( device ) {

package/src/hooks/grid-visualizer.js

@@ -16,20 +16,34 @@ function GridLayoutSync( props ) {
 }
 
 function GridTools( { clientId, layout } ) {
-	const { isSelected, isDragging } = useSelect( ( select ) => {
-		const { isBlockSelected, isDraggingBlocks } =
-			select( blockEditorStore );
+	const isVisible = useSelect(
+		( select ) => {
+			const {
+				isBlockSelected,
+				isDraggingBlocks,
+				getTemplateLock,
+				getBlockEditingMode,
+			} = select( blockEditorStore );
 
-		return {
-			isSelected: isBlockSelected( clientId ),
-			isDragging: isDraggingBlocks(),
-		};
-	} );
+			// These calls are purposely ordered from least expensive to most expensive.
+			// Hides the visualizer in cases where the user is not or cannot interact with it.
+			if (
+				( ! isDraggingBlocks() && ! isBlockSelected( clientId ) ) ||
+				getTemplateLock( clientId ) ||
+				getBlockEditingMode( clientId ) !== 'default'
+			) {
+				return false;
+			}
+
+			return true;
+		},
+		[ clientId ]
+	);
 
 	return (
 		<>
 			<GridLayoutSync clientId={ clientId } />
-			{ ( isSelected || isDragging ) && (
+			{ isVisible && (
 				<GridVisualizer clientId={ clientId } parentLayout={ layout } />
 			) }
 		</>

package/src/hooks/layout-child.js

@@ -172,9 +172,54 @@ function ChildLayoutControlsPure( { clientId, style, setAttributes } ) {
 		isManualPlacement,
 	} = parentLayout;
 
-	const rootClientId = useSelect(
+	if ( parentLayoutType !== 'grid' ) {
+		return null;
+	}
+
+	return (
+		<GridTools
+			clientId={ clientId }
+			style={ style }
+			setAttributes={ setAttributes }
+			allowSizingOnChildren={ allowSizingOnChildren }
+			isManualPlacement={ isManualPlacement }
+			parentLayout={ parentLayout }
+		/>
+	);
+}
+
+function GridTools( {
+	clientId,
+	style,
+	setAttributes,
+	allowSizingOnChildren,
+	isManualPlacement,
+	parentLayout,
+} ) {
+	const { rootClientId, isVisible } = useSelect(
 		( select ) => {
-			return select( blockEditorStore ).getBlockRootClientId( clientId );
+			const {
+				getBlockRootClientId,
+				getBlockEditingMode,
+				getTemplateLock,
+			} = select( blockEditorStore );
+
+			const _rootClientId = getBlockRootClientId( clientId );
+
+			if (
+				getTemplateLock( _rootClientId ) ||
+				getBlockEditingMode( _rootClientId ) !== 'default'
+			) {
+				return {
+					rootClientId: _rootClientId,
+					isVisible: false,
+				};
+			}
+
+			return {
+				rootClientId: _rootClientId,
+				isVisible: true,
+			};
 		},
 		[ clientId ]
 	);
@@ -182,7 +227,7 @@ function ChildLayoutControlsPure( { clientId, style, setAttributes } ) {
 	// Use useState() instead of useRef() so that GridItemResizer updates when ref is set.
 	const [ resizerBounds, setResizerBounds ] = useState();
 
-	if ( parentLayoutType !== 'grid' ) {
+	if ( ! isVisible ) {
 		return null;
 	}
 

package/src/layouts/flex.js

@@ -12,7 +12,6 @@ import {
 	arrowDown,
 } from '@wordpress/icons';
 import {
-	Button,
 	ToggleControl,
 	Flex,
 	FlexItem,
@@ -110,7 +109,6 @@ export default {
 					<FlexLayoutVerticalAlignmentControl
 						layout={ layout }
 						onChange={ onChange }
-						isToolbar
 					/>
 				) }
 			</BlockControls>
@@ -190,11 +188,7 @@ export default {
 	},
 };
 
-function FlexLayoutVerticalAlignmentControl( {
-	layout,
-	onChange,
-	isToolbar = false,
-} ) {
+function FlexLayoutVerticalAlignmentControl( { layout, onChange } ) {
 	const { orientation = 'horizontal' } = layout;
 
 	const defaultVerticalAlignment =
@@ -210,54 +204,17 @@ function FlexLayoutVerticalAlignmentControl( {
 			verticalAlignment: value,
 		} );
 	};
-	if ( isToolbar ) {
-		return (
-			<BlockVerticalAlignmentControl
-				onChange={ onVerticalAlignmentChange }
-				value={ verticalAlignment }
-				controls={
-					orientation === 'horizontal'
-						? [ 'top', 'center', 'bottom', 'stretch' ]
-						: [ 'top', 'center', 'bottom', 'space-between' ]
-				}
-			/>
-		);
-	}
-
-	const verticalAlignmentOptions = [
-		{
-			value: 'flex-start',
-			label: __( 'Align items top' ),
-		},
-		{
-			value: 'center',
-			label: __( 'Align items center' ),
-		},
-		{
-			value: 'flex-end',
-			label: __( 'Align items bottom' ),
-		},
-	];
 
 	return (
-		<fieldset className="block-editor-hooks__flex-layout-vertical-alignment-control">
-			<legend>{ __( 'Vertical alignment' ) }</legend>
-			<div>
-				{ verticalAlignmentOptions.map( ( value, icon, label ) => {
-					return (
-						<Button
-							// TODO: Switch to `true` (40px size) if possible
-							__next40pxDefaultSize={ false }
-							key={ value }
-							label={ label }
-							icon={ icon }
-							isPressed={ verticalAlignment === value }
-							onClick={ () => onVerticalAlignmentChange( value ) }
-						/>
-					);
-				} ) }
-			</div>
-		</fieldset>
+		<BlockVerticalAlignmentControl
+			onChange={ onVerticalAlignmentChange }
+			value={ verticalAlignment }
+			controls={
+				orientation === 'horizontal'
+					? [ 'top', 'center', 'bottom', 'stretch' ]
+					: [ 'top', 'center', 'bottom', 'space-between' ]
+			}
+		/>
 	);
 }
 

package/src/private-apis.js

@@ -32,6 +32,7 @@ import { usesContextKey } from './components/rich-text/format-edit';
 import { ExperimentalBlockCanvas } from './components/block-canvas';
 import { getDuotoneFilter } from './components/duotone/utils';
 import { useFlashEditableBlocks } from './components/use-flash-editable-blocks';
+import { useZoomOutModeExit } from './components/block-list/use-block-props/use-zoom-out-mode-exit';
 import {
 	selectBlockPatternsKey,
 	reusableBlocksSelectKey,
@@ -78,6 +79,7 @@ lock( privateApis, {
 	TextAlignmentControl,
 	usesContextKey,
 	useFlashEditableBlocks,
+	useZoomOutModeExit,
 	globalStylesDataKey,
 	globalStylesLinksDataKey,
 	selectBlockPatternsKey,

package/src/utils/block-bindings.js

@@ -30,6 +30,8 @@ function isObjectEmpty( object ) {
  * - `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.
  *
+ * @param {?string} clientId Optional block client ID. If not set, it will use the current block client ID from the context.
+ *
  * @return {?WPBlockBindingsUtils} Object containing the block bindings utils.
  *
  * @example
@@ -60,8 +62,9 @@ function isObjectEmpty( object ) {
  * removeAllBlockBindings();
  * ```
  */
-export function useBlockBindingsUtils() {
-	const { clientId } = useBlockEditContext();
+export function useBlockBindingsUtils( clientId ) {
+	const { clientId: contextClientId } = useBlockEditContext();
+	const blockClientId = clientId || contextClientId;
 	const { updateBlockAttributes } = useDispatch( blockEditorStore );
 	const { getBlockAttributes } = useRegistry().select( blockEditorStore );
 
@@ -96,7 +99,7 @@ export function useBlockBindingsUtils() {
 	 */
 	const updateBlockBindings = ( bindings ) => {
 		const { metadata: { bindings: currentBindings, ...metadata } = {} } =
-			getBlockAttributes( clientId );
+			getBlockAttributes( blockClientId );
 		const newBindings = { ...currentBindings };
 
 		Object.entries( bindings ).forEach( ( [ attribute, binding ] ) => {
@@ -116,7 +119,7 @@ export function useBlockBindingsUtils() {
 			delete newMetadata.bindings;
 		}
 
-		updateBlockAttributes( clientId, {
+		updateBlockAttributes( blockClientId, {
 			metadata: isObjectEmpty( newMetadata ) ? undefined : newMetadata,
 		} );
 	};
@@ -134,8 +137,8 @@ export function useBlockBindingsUtils() {
 	 */
 	const removeAllBlockBindings = () => {
 		const { metadata: { bindings, ...metadata } = {} } =
-			getBlockAttributes( clientId );
-		updateBlockAttributes( clientId, {
+			getBlockAttributes( blockClientId );
+		updateBlockAttributes( blockClientId, {
 			metadata: isObjectEmpty( metadata ) ? undefined : metadata,
 		} );
 	};

package/src/utils/test/use-block-bindings-utils.js

@@ -0,0 +1,174 @@
+/**
+ * External dependencies
+ */
+import { renderHook } from '@testing-library/react';
+
+/**
+ * WordPress dependencies
+ */
+import { store as blockEditorStore } from '@wordpress/block-editor';
+import { dispatch, select } from '@wordpress/data';
+import {
+	createBlock,
+	getBlockTypes,
+	unregisterBlockType,
+} from '@wordpress/blocks';
+import { registerCoreBlocks } from '@wordpress/block-library';
+
+/**
+ * Internal dependencies
+ */
+import { useBlockBindingsUtils } from '../';
+
+describe( 'useBlockBindingsUtils', () => {
+	beforeAll( () => {
+		// Register all core blocks
+		registerCoreBlocks();
+	} );
+
+	let clientId;
+	beforeEach( async () => {
+		const block = createBlock( 'core/paragraph', {
+			metadata: {
+				name: 'Block name',
+				bindings: {
+					prop1: {
+						source: 'core/post-meta',
+						args: {
+							key: 'initial_key',
+						},
+					},
+					prop2: {
+						source: 'core/post-meta',
+						args: {
+							key: 'initial_key',
+						},
+					},
+				},
+			},
+		} );
+		await dispatch( blockEditorStore ).resetBlocks( [ block ] );
+		clientId = block.clientId;
+	} );
+
+	afterAll( () => {
+		// Remove blocks after all tests.
+		dispatch( blockEditorStore ).resetBlocks( [] );
+
+		// Clean up registered blocks
+		getBlockTypes().forEach( ( block ) => {
+			unregisterBlockType( block.name );
+		} );
+	} );
+
+	it( 'should be possible to update just one connection', async () => {
+		renderHook( () => {
+			const { updateBlockBindings } = useBlockBindingsUtils( clientId );
+			updateBlockBindings( {
+				prop1: {
+					source: 'core/post-meta',
+					args: {
+						key: 'new_key',
+					},
+				},
+			} );
+		} );
+		const { metadata } =
+			await select( blockEditorStore ).getBlockAttributes( clientId );
+		expect( metadata ).toMatchObject( {
+			// Other metadata properties shouldn't change.
+			name: 'Block name',
+			bindings: {
+				prop1: {
+					source: 'core/post-meta',
+					args: {
+						key: 'new_key',
+					},
+				},
+				prop2: {
+					source: 'core/post-meta',
+					args: {
+						key: 'initial_key',
+					},
+				},
+			},
+		} );
+	} );
+
+	it( 'should be possible to update multiple connections at once', async () => {
+		renderHook( () => {
+			const { updateBlockBindings } = useBlockBindingsUtils( clientId );
+			updateBlockBindings( {
+				prop1: {
+					source: 'core/post-meta',
+					args: {
+						key: 'new_key',
+					},
+				},
+				prop2: {
+					source: 'core/post-meta',
+					args: {
+						key: 'new_key',
+					},
+				},
+			} );
+		} );
+		const { metadata } =
+			await select( blockEditorStore ).getBlockAttributes( clientId );
+		expect( metadata ).toMatchObject( {
+			// Other metadata properties shouldn't change.
+			name: 'Block name',
+			bindings: {
+				prop1: {
+					source: 'core/post-meta',
+					args: {
+						key: 'new_key',
+					},
+				},
+				prop2: {
+					source: 'core/post-meta',
+					args: {
+						key: 'new_key',
+					},
+				},
+			},
+		} );
+	} );
+
+	it( 'should be possible to remove connections', async () => {
+		renderHook( () => {
+			const { updateBlockBindings } = useBlockBindingsUtils( clientId );
+			updateBlockBindings( {
+				prop2: undefined,
+			} );
+		} );
+		const { metadata } =
+			await select( blockEditorStore ).getBlockAttributes( clientId );
+		expect( metadata ).toMatchObject( {
+			// Other metadata properties shouldn't change.
+			name: 'Block name',
+			bindings: {
+				prop1: {
+					source: 'core/post-meta',
+					args: {
+						key: 'initial_key',
+					},
+				},
+			},
+		} );
+	} );
+
+	it( 'should be possible to remove all connections', async () => {
+		renderHook( () => {
+			const { removeAllBlockBindings } =
+				useBlockBindingsUtils( clientId );
+			removeAllBlockBindings();
+		} );
+		const { metadata } =
+			await select( blockEditorStore ).getBlockAttributes( clientId );
+		expect( metadata ).toMatchObject( {
+			// Other metadata properties shouldn't change.
+			name: 'Block name',
+		} );
+	} );
+} );