@wordpress/block-editor 15.17.0 → 15.18.0

package/src/hooks/dimensions.js

@@ -102,6 +102,10 @@ export function DimensionsPanel( { clientId, name, setAttributes, settings } ) {
 		'__experimentalDefaultControls',
 	] );
 	const defaultControls = {
+		// In the block inspector, minHeight and minWidth should not
+		// be shown by default unless the block explicitly opts in.
+		minHeight: false,
+		minWidth: false,
 		...defaultDimensionsControls,
 		...defaultSpacingControls,
 	};
@@ -161,7 +165,8 @@ export function hasDimensionsSupport( blockName, feature = 'any' ) {
 			support?.aspectRatio ||
 			!! support?.height ||
 			!! support?.minHeight ||
-			!! support?.width
+			!! support?.width ||
+			!! support?.minWidth
 		);
 	}
 

package/src/hooks/grid-visualizer.js

@@ -54,7 +54,7 @@ function GridTools( { clientId, layout } ) {
 				const settings = getSettings();
 				const currentDeviceType =
 					settings?.[ deviceTypeKey ]?.toLowerCase() ||
-					BLOCK_VISIBILITY_VIEWPORTS.desktop.value;
+					BLOCK_VISIBILITY_VIEWPORTS.desktop.key;
 
 				return {
 					isVisible: true,

package/src/hooks/layout-child.js

@@ -244,7 +244,7 @@ function GridTools( {
 					blockAttributes?.metadata?.blockVisibility,
 				deviceType:
 					settings?.[ deviceTypeKey ]?.toLowerCase() ||
-					BLOCK_VISIBILITY_VIEWPORTS.desktop.value,
+					BLOCK_VISIBILITY_VIEWPORTS.desktop.key,
 				// Check if the selected child block is itself a grid.
 				isChildBlockAGrid: blockAttributes?.layout?.type === 'grid',
 			};

package/src/hooks/test/dimensions.js

@@ -76,6 +76,22 @@ describe( 'getDimensionsClassesAndStyles', () => {
 		} );
 	} );
 
+	it( 'should return minWidth style', () => {
+		const attributes = {
+			style: {
+				dimensions: {
+					minWidth: '200px',
+				},
+			},
+		};
+		expect( getDimensionsClassesAndStyles( attributes ) ).toEqual( {
+			className: undefined,
+			style: {
+				minWidth: '200px',
+			},
+		} );
+	} );
+
 	it( 'should return all dimension styles when multiple are provided', () => {
 		const attributes = {
 			style: {

package/src/hooks/test/style.js

@@ -25,6 +25,7 @@ describe( 'getInlineStyles', () => {
 				},
 				dimensions: {
 					minHeight: '50vh',
+					minWidth: '200px',
 				},
 				spacing: {
 					blockGap: '1em',
@@ -44,6 +45,7 @@ describe( 'getInlineStyles', () => {
 			fontSize: 10,
 			marginBottom: '15px',
 			minHeight: '50vh',
+			minWidth: '200px',
 			paddingTop: '10px',
 		} );
 	} );

package/src/hooks/utils.js

@@ -269,6 +269,7 @@ export function useBlockSettings( name, parentLayout ) {
 		aspectRatio,
 		height,
 		minHeight,
+		minWidth,
 		width,
 		dimensionSizes,
 		layout,
@@ -332,6 +333,7 @@ export function useBlockSettings( name, parentLayout ) {
 		'dimensions.aspectRatio',
 		'dimensions.height',
 		'dimensions.minHeight',
+		'dimensions.minWidth',
 		'dimensions.width',
 		'dimensions.dimensionSizes',
 		'layout',
@@ -446,6 +448,7 @@ export function useBlockSettings( name, parentLayout ) {
 				aspectRatio,
 				height,
 				minHeight,
+				minWidth,
 				width,
 				dimensionSizes,
 			},
@@ -487,6 +490,7 @@ export function useBlockSettings( name, parentLayout ) {
 		aspectRatio,
 		height,
 		minHeight,
+		minWidth,
 		width,
 		dimensionSizes,
 		layout,

package/src/layouts/flex.js

@@ -23,7 +23,8 @@ import {
  * Internal dependencies
  */
 import { appendSelectors, getBlockGapCSS } from './utils';
-import { getGapCSSValue } from '../hooks/gap';
+import { getGapCSSValue, getGapBoxControlValueFromStyle } from '../hooks/gap';
+import { getSpacingPresetCssVar } from '../components/spacing-sizes-control/utils';
 import {
 	BlockControls,
 	JustifyContentControl,
@@ -147,15 +148,12 @@ export default {
 		// falling back to '0.5em' for backwards compatibility.
 		let fallbackGapValue = '0.5em';
 		if ( globalBlockGapValue ) {
-			// Process the global gap value to handle preset values
-			const processedGlobalGap = getGapCSSValue(
-				globalBlockGapValue,
-				'0.5em'
-			);
-			// Use the column gap value (second value if two values exist)
-			const gapParts = processedGlobalGap.split( ' ' );
+			const gapBox =
+				getGapBoxControlValueFromStyle( globalBlockGapValue );
 			fallbackGapValue =
-				gapParts.length > 1 ? gapParts[ 1 ] : gapParts[ 0 ];
+				getSpacingPresetCssVar( gapBox?.left ) ||
+				getSpacingPresetCssVar( gapBox?.top ) ||
+				'0.5em';
 		}
 
 		// If a block's block.json skips serialization for spacing or spacing.blockGap,

package/src/layouts/grid.js

@@ -21,7 +21,8 @@ import { useState } from '@wordpress/element';
  * Internal dependencies
  */
 import { appendSelectors, getBlockGapCSS } from './utils';
-import { getGapCSSValue } from '../hooks/gap';
+import { getGapCSSValue, getGapBoxControlValueFromStyle } from '../hooks/gap';
+import { getSpacingPresetCssVar } from '../components/spacing-sizes-control/utils';
 import { shouldSkipSerialization } from '../hooks/utils';
 import { LAYOUT_DEFINITIONS } from './definitions';
 
@@ -143,10 +144,12 @@ export default {
 		// If the gap value has both top and left (separated by space), use the left value for horizontal calculations.
 		let fallbackGapValue = '1.2rem';
 		if ( globalBlockGapValue ) {
-			const processedGap = getGapCSSValue( globalBlockGapValue, '0.5em' );
-			const gapParts = processedGap.split( ' ' );
+			const gapBox =
+				getGapBoxControlValueFromStyle( globalBlockGapValue );
 			fallbackGapValue =
-				gapParts.length > 1 ? gapParts[ 1 ] : gapParts[ 0 ];
+				getSpacingPresetCssVar( gapBox?.left ) ||
+				getSpacingPresetCssVar( gapBox?.top ) ||
+				'1.2rem';
 		}
 
 		// If a block's block.json skips serialization for spacing or spacing.blockGap,

package/src/private-apis.js

@@ -50,6 +50,7 @@ import {
 	isNavigationOverlayContextKey,
 	isNavigationPostEditorKey,
 	mediaUploadOnSuccessKey,
+	openMediaEditorModalKey,
 } from './store/private-keys';
 import { requiresWrapperOnCopy } from './components/writing-flow/utils';
 import { PrivateRichText } from './components/rich-text/';
@@ -59,8 +60,8 @@ import { PrivatePublishDateTimePicker } from './components/publish-date-time-pic
 import useSpacingSizes from './components/spacing-sizes-control/hooks/use-spacing-sizes';
 import useBlockDisplayTitle from './components/block-title/use-block-display-title';
 import TabbedSidebar from './components/tabbed-sidebar';
-import CommentIconSlotFill from './components/collab/block-comment-icon-slot';
-import CommentIconToolbarSlotFill from './components/collab/block-comment-icon-toolbar-slot';
+import NoteIconSlotFill from './components/collab/note-icon-slot';
+import NoteIconToolbarSlotFill from './components/collab/note-icon-toolbar-slot';
 import HTMLElementControl from './components/html-element-control';
 import {
 	useBlockElementRef,
@@ -124,8 +125,8 @@ lock( privateApis, {
 	BlockStyleVariationOverridesWithConfig,
 	setBackgroundStyleDefaults,
 	sectionRootClientIdKey,
-	CommentIconSlotFill,
-	CommentIconToolbarSlotFill,
+	NoteIconSlotFill,
+	NoteIconToolbarSlotFill,
 	mediaEditKey,
 	getMediaSelectKey,
 	deviceTypeKey,
@@ -133,6 +134,7 @@ lock( privateApis, {
 	isNavigationOverlayContextKey,
 	isNavigationPostEditorKey,
 	mediaUploadOnSuccessKey,
+	openMediaEditorModalKey,
 	useBlockElement,
 	useBlockElementRef,
 	LinkPicker,

package/src/store/private-keys.js

@@ -12,3 +12,4 @@ export const isNavigationOverlayContextKey = Symbol(
 );
 export const isNavigationPostEditorKey = Symbol( 'isNavigationPostEditor' );
 export const mediaUploadOnSuccessKey = Symbol( 'mediaUploadOnSuccess' );
+export const openMediaEditorModalKey = Symbol( 'openMediaEditorModal' );

package/src/utils/dom.js

@@ -80,14 +80,14 @@ export function rectUnion( rect1, rect2 ) {
  * @param {Element} element Element.
  * @return {boolean} Whether the element is visible.
  */
-function isElementVisible( element ) {
+export function isElementVisible( element ) {
 	const viewport = element.ownerDocument.defaultView;
 	if ( ! viewport ) {
 		return false;
 	}
 
-	// Check for <VisuallyHidden> component.
-	if ( element.classList.contains( 'components-visually-hidden' ) ) {
+	// Check for <VisuallyHidden> components.
+	if ( element.hasAttribute( 'data-visually-hidden' ) ) {
 		return false;
 	}
 

package/src/utils/test/dom.js

@@ -1,8 +1,51 @@
-/**
- * Internal dependencies
- */
-import { getElementBounds, WITH_OVERFLOW_ELEMENT_BLOCKS } from '../dom';
+import { render, screen } from '@testing-library/react';
+// eslint-disable-next-line @wordpress/use-recommended-components -- Required for testing
+import { VisuallyHidden as WCVisuallyHidden } from '@wordpress/components';
+import { VisuallyHidden } from '@wordpress/ui';
+import {
+	getElementBounds,
+	isElementVisible,
+	WITH_OVERFLOW_ELEMENT_BLOCKS,
+} from '../dom';
+
+function mockVisibleBoundingClientRect( element ) {
+	element.getBoundingClientRect = jest.fn().mockReturnValue( {
+		left: 0,
+		top: 0,
+		right: 100,
+		bottom: 20,
+		width: 100,
+		height: 20,
+		x: 0,
+		y: 0,
+	} );
+}
+
 describe( 'dom', () => {
+	describe( 'isElementVisible', () => {
+		it( 'returns false for @wordpress/components VisuallyHidden', () => {
+			render(
+				<WCVisuallyHidden data-testid="wc-visually-hidden">
+					Hidden
+				</WCVisuallyHidden>
+			);
+			const element = screen.getByTestId( 'wc-visually-hidden' );
+			mockVisibleBoundingClientRect( element );
+			expect( isElementVisible( element ) ).toBe( false );
+		} );
+
+		it( 'returns false for @wordpress/ui VisuallyHidden', () => {
+			render(
+				<VisuallyHidden data-testid="ui-visually-hidden">
+					Hidden
+				</VisuallyHidden>
+			);
+			const element = screen.getByTestId( 'ui-visually-hidden' );
+			mockVisibleBoundingClientRect( element );
+			expect( isElementVisible( element ) ).toBe( false );
+		} );
+	} );
+
 	describe( 'getElementBounds', () => {
 		it( 'should return a DOMRectReadOnly object if the viewport is not available', () => {
 			const element = {

package/build/components/collab/block-comment-icon-slot.cjs.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/components/collab/block-comment-icon-slot.js"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { createSlotFill } from '@wordpress/components';\n\nconst CommentIconSlotFill = createSlotFill( Symbol( 'CommentIconSlotFill' ) );\n\nexport default CommentIconSlotFill;\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,wBAA+B;AAE/B,IAAM,0BAAsB,kCAAgB,uBAAQ,qBAAsB,CAAE;AAE5E,IAAO,kCAAQ;",
-  "names": []
-}

package/build/components/collab/block-comment-icon-toolbar-slot.cjs.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/components/collab/block-comment-icon-toolbar-slot.js"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { createSlotFill } from '@wordpress/components';\n\nconst CommentIconToolbarSlotFill = createSlotFill(\n\tSymbol( 'CommentIconToolbarSlotFill' )\n);\n\nexport default CommentIconToolbarSlotFill;\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,wBAA+B;AAE/B,IAAM,iCAA6B;AAAA,EAClC,uBAAQ,4BAA6B;AACtC;AAEA,IAAO,0CAAQ;",
-  "names": []
-}

package/build-module/components/collab/block-comment-icon-slot.mjs

@@ -1,8 +0,0 @@
-// packages/block-editor/src/components/collab/block-comment-icon-slot.js
-import { createSlotFill } from "@wordpress/components";
-var CommentIconSlotFill = createSlotFill(/* @__PURE__ */ Symbol("CommentIconSlotFill"));
-var block_comment_icon_slot_default = CommentIconSlotFill;
-export {
-  block_comment_icon_slot_default as default
-};
-//# sourceMappingURL=block-comment-icon-slot.mjs.map

package/build-module/components/collab/block-comment-icon-slot.mjs.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/components/collab/block-comment-icon-slot.js"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { createSlotFill } from '@wordpress/components';\n\nconst CommentIconSlotFill = createSlotFill( Symbol( 'CommentIconSlotFill' ) );\n\nexport default CommentIconSlotFill;\n"],
-  "mappings": ";AAGA,SAAS,sBAAsB;AAE/B,IAAM,sBAAsB,eAAgB,uBAAQ,qBAAsB,CAAE;AAE5E,IAAO,kCAAQ;",
-  "names": []
-}

package/build-module/components/collab/block-comment-icon-toolbar-slot.mjs

@@ -1,10 +0,0 @@
-// packages/block-editor/src/components/collab/block-comment-icon-toolbar-slot.js
-import { createSlotFill } from "@wordpress/components";
-var CommentIconToolbarSlotFill = createSlotFill(
-  /* @__PURE__ */ Symbol("CommentIconToolbarSlotFill")
-);
-var block_comment_icon_toolbar_slot_default = CommentIconToolbarSlotFill;
-export {
-  block_comment_icon_toolbar_slot_default as default
-};
-//# sourceMappingURL=block-comment-icon-toolbar-slot.mjs.map

package/build-module/components/collab/block-comment-icon-toolbar-slot.mjs.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/components/collab/block-comment-icon-toolbar-slot.js"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { createSlotFill } from '@wordpress/components';\n\nconst CommentIconToolbarSlotFill = createSlotFill(\n\tSymbol( 'CommentIconToolbarSlotFill' )\n);\n\nexport default CommentIconToolbarSlotFill;\n"],
-  "mappings": ";AAGA,SAAS,sBAAsB;AAE/B,IAAM,6BAA6B;AAAA,EAClC,uBAAQ,4BAA6B;AACtC;AAEA,IAAO,0CAAQ;",
-  "names": []
-}

package/src/components/collab/block-comment-icon-slot.js

@@ -1,8 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { createSlotFill } from '@wordpress/components';
-
-const CommentIconSlotFill = createSlotFill( Symbol( 'CommentIconSlotFill' ) );
-
-export default CommentIconSlotFill;

package/src/components/collab/block-comment-icon-toolbar-slot.js

@@ -1,10 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { createSlotFill } from '@wordpress/components';
-
-const CommentIconToolbarSlotFill = createSlotFill(
-	Symbol( 'CommentIconToolbarSlotFill' )
-);
-
-export default CommentIconToolbarSlotFill;