@wordpress/block-editor 13.2.0 → 13.4.0

package/src/layouts/grid.js

@@ -23,7 +23,6 @@ import { appendSelectors, getBlockGapCSS } from './utils';
 import { getGapCSSValue } from '../hooks/gap';
 import { shouldSkipSerialization } from '../hooks/utils';
 import { LAYOUT_DEFINITIONS } from './definitions';
-import { GridVisualizer, useGridLayoutSync } from '../components/grid';
 
 const RANGE_CONTROL_MAX_VALUES = {
 	px: 600,
@@ -71,19 +70,28 @@ export default {
 		layoutBlockSupport = {},
 	} ) {
 		const { allowSizingOnChildren = false } = layoutBlockSupport;
+
+		// In the experiment we want to also show column control in Auto mode, and
+		// the minimum width control in Manual mode.
+		const showColumnsControl =
+			window.__experimentalEnableGridInteractivity || layout?.columnCount;
+		const showMinWidthControl =
+			window.__experimentalEnableGridInteractivity ||
+			! layout?.columnCount;
 		return (
 			<>
 				<GridLayoutTypeControl
 					layout={ layout }
 					onChange={ onChange }
 				/>
-				{ layout?.columnCount ? (
+				{ showColumnsControl && (
 					<GridLayoutColumnsAndRowsControl
 						layout={ layout }
 						onChange={ onChange }
 						allowSizingOnChildren={ allowSizingOnChildren }
 					/>
-				) : (
+				) }
+				{ showMinWidthControl && (
 					<GridLayoutMinimumWidthControl
 						layout={ layout }
 						onChange={ onChange }
@@ -92,15 +100,8 @@ export default {
 			</>
 		);
 	},
-	toolBarControls: function GridLayoutToolbarControls( { clientId } ) {
-		return (
-			<>
-				{ window.__experimentalEnableGridInteractivity && (
-					<GridLayoutSync clientId={ clientId } />
-				) }
-				<GridVisualizer clientId={ clientId } />
-			</>
-		);
+	toolBarControls: function GridLayoutToolbarControls() {
+		return null;
 	},
 	getLayoutStyle: function getLayoutStyle( {
 		selector,
@@ -111,11 +112,28 @@ export default {
 		layoutDefinitions = LAYOUT_DEFINITIONS,
 	} ) {
 		const {
-			minimumColumnWidth = '12rem',
+			minimumColumnWidth = null,
 			columnCount = null,
 			rowCount = null,
 		} = layout;
 
+		// Check that the grid layout attributes are of the correct type, so that we don't accidentally
+		// write code that stores a string attribute instead of a number.
+		if ( process.env.NODE_ENV === 'development' ) {
+			if (
+				minimumColumnWidth &&
+				typeof minimumColumnWidth !== 'string'
+			) {
+				throw new Error( 'minimumColumnWidth must be a string' );
+			}
+			if ( columnCount && typeof columnCount !== 'number' ) {
+				throw new Error( 'columnCount must be a number' );
+			}
+			if ( rowCount && typeof rowCount !== 'number' ) {
+				throw new Error( 'rowCount must be a number' );
+			}
+		}
+
 		// If a block's block.json skips serialization for spacing or spacing.blockGap,
 		// don't apply the user-defined value to the styles.
 		const blockGapValue =
@@ -127,18 +145,33 @@ export default {
 		let output = '';
 		const rules = [];
 
-		if ( columnCount ) {
+		if ( minimumColumnWidth && columnCount > 0 ) {
+			const maxValue = `max(${ minimumColumnWidth }, ( 100% - (${
+				blockGapValue || '1.2rem'
+			}*${ columnCount - 1 }) ) / ${ columnCount })`;
+			rules.push(
+				`grid-template-columns: repeat(auto-fill, minmax(${ maxValue }, 1fr))`,
+				`container-type: inline-size`
+			);
+			if ( rowCount ) {
+				rules.push(
+					`grid-template-rows: repeat(${ rowCount }, minmax(1rem, auto))`
+				);
+			}
+		} else if ( columnCount ) {
 			rules.push(
 				`grid-template-columns: repeat(${ columnCount }, minmax(0, 1fr))`
 			);
 			if ( rowCount ) {
 				rules.push(
-					`grid-template-rows: repeat(${ rowCount }, minmax(0, 1fr))`
+					`grid-template-rows: repeat(${ rowCount }, minmax(1rem, auto))`
 				);
 			}
-		} else if ( minimumColumnWidth ) {
+		} else {
 			rules.push(
-				`grid-template-columns: repeat(auto-fill, minmax(min(${ minimumColumnWidth }, 100%), 1fr))`,
+				`grid-template-columns: repeat(auto-fill, minmax(min(${
+					minimumColumnWidth || '12rem'
+				}, 100%), 1fr))`,
 				'container-type: inline-size'
 			);
 		}
@@ -172,8 +205,11 @@ export default {
 
 // Enables setting minimum width of grid items.
 function GridLayoutMinimumWidthControl( { layout, onChange } ) {
-	const { minimumColumnWidth: value = '12rem' } = layout;
-	const [ quantity, unit ] = parseQuantityAndUnitFromRawValue( value );
+	const { minimumColumnWidth, columnCount, isManualPlacement } = layout;
+	const defaultValue = isManualPlacement || columnCount ? null : '12rem';
+	const value = minimumColumnWidth || defaultValue;
+	const [ quantity, unit = 'rem' ] =
+		parseQuantityAndUnitFromRawValue( value );
 
 	const handleSliderChange = ( next ) => {
 		onChange( {
@@ -214,7 +250,8 @@ function GridLayoutMinimumWidthControl( { layout, onChange } ) {
 						onChange={ ( newValue ) => {
 							onChange( {
 								...layout,
-								minimumColumnWidth: newValue,
+								minimumColumnWidth:
+									newValue === '' ? undefined : newValue,
 							} );
 						} }
 						onUnitChange={ handleUnitChange }
@@ -227,8 +264,9 @@ function GridLayoutMinimumWidthControl( { layout, onChange } ) {
 				</FlexItem>
 				<FlexItem isBlock>
 					<RangeControl
+						__nextHasNoMarginBottom
 						onChange={ handleSliderChange }
-						value={ quantity }
+						value={ quantity || 0 }
 						min={ 0 }
 						max={ RANGE_CONTROL_MAX_VALUES[ unit ] || 600 }
 						withInputField={ false }
@@ -247,57 +285,98 @@ function GridLayoutColumnsAndRowsControl( {
 	onChange,
 	allowSizingOnChildren,
 } ) {
-	const { columnCount = 3, rowCount } = layout;
+	// If the grid interactivity experiment is enabled, allow unsetting the column count.
+	const defaultColumnCount = window.__experimentalEnableGridInteractivity
+		? undefined
+		: 3;
+	const {
+		columnCount = defaultColumnCount,
+		rowCount,
+		isManualPlacement,
+	} = layout;
 
 	return (
 		<>
 			<fieldset>
+				{ ( ! window.__experimentalEnableGridInteractivity ||
+					! isManualPlacement ) && (
+					<BaseControl.VisualLabel as="legend">
+						{ __( 'Columns' ) }
+					</BaseControl.VisualLabel>
+				) }
 				<Flex gap={ 4 }>
 					<FlexItem isBlock>
 						<NumberControl
 							size="__unstable-large"
 							onChange={ ( value ) => {
-								/**
-								 * If the input is cleared, avoid switching
-								 * back to "Auto" by setting a value of "1".
-								 */
-								const validValue = value !== '' ? value : '1';
-								onChange( {
-									...layout,
-									columnCount: validValue,
-								} );
+								if (
+									window.__experimentalEnableGridInteractivity
+								) {
+									// Allow unsetting the column count when in auto mode.
+									const defaultNewColumnCount =
+										isManualPlacement ? 1 : undefined;
+									const newColumnCount =
+										value === ''
+											? defaultNewColumnCount
+											: parseInt( value, 10 );
+									onChange( {
+										...layout,
+										columnCount: newColumnCount,
+									} );
+								} else {
+									// Don't allow unsetting the column count.
+									const newColumnCount =
+										value === ''
+											? 1
+											: parseInt( value, 10 );
+									onChange( {
+										...layout,
+										columnCount: newColumnCount,
+									} );
+								}
 							} }
 							value={ columnCount }
-							min={ 1 }
+							min={ 0 }
 							label={ __( 'Columns' ) }
+							hideLabelFromVision={
+								! window.__experimentalEnableGridInteractivity ||
+								! isManualPlacement
+							}
 						/>
 					</FlexItem>
 
 					<FlexItem isBlock>
 						{ window.__experimentalEnableGridInteractivity &&
-						allowSizingOnChildren ? (
+						allowSizingOnChildren &&
+						isManualPlacement ? (
 							<NumberControl
 								size="__unstable-large"
 								onChange={ ( value ) => {
+									// Don't allow unsetting the row count.
+									const newRowCount =
+										value === ''
+											? 1
+											: parseInt( value, 10 );
 									onChange( {
 										...layout,
-										rowCount: value,
+										rowCount: newRowCount,
 									} );
 								} }
 								value={ rowCount }
-								min={ 1 }
+								min={ 0 }
 								label={ __( 'Rows' ) }
 							/>
 						) : (
 							<RangeControl
-								value={ parseInt( columnCount, 10 ) } // RangeControl can't deal with strings.
+								__nextHasNoMarginBottom
+								value={ columnCount ?? 0 }
 								onChange={ ( value ) =>
 									onChange( {
 										...layout,
 										columnCount: value,
 									} )
 								}
-								min={ 1 }
+								min={ 0 }
 								max={ 16 }
 								withInputField={ false }
 								label={ __( 'Columns' ) }
@@ -313,7 +392,8 @@ function GridLayoutColumnsAndRowsControl( {
 
 // Enables switching between grid types
 function GridLayoutTypeControl( { layout, onChange } ) {
-	const { columnCount, minimumColumnWidth } = layout;
+	const { columnCount, rowCount, minimumColumnWidth, isManualPlacement } =
+		layout;
 
 	/**
 	 * When switching, temporarily save any custom values set on the
@@ -322,41 +402,62 @@ function GridLayoutTypeControl( { layout, onChange } ) {
 	const [ tempColumnCount, setTempColumnCount ] = useState(
 		columnCount || 3
 	);
+	const [ tempRowCount, setTempRowCount ] = useState( rowCount );
 	const [ tempMinimumColumnWidth, setTempMinimumColumnWidth ] = useState(
 		minimumColumnWidth || '12rem'
 	);
 
-	const isManual = !! columnCount ? 'manual' : 'auto';
+	const gridPlacement =
+		isManualPlacement ||
+		( !! columnCount && ! window.__experimentalEnableGridInteractivity )
+			? 'manual'
+			: 'auto';
 
 	const onChangeType = ( value ) => {
 		if ( value === 'manual' ) {
 			setTempMinimumColumnWidth( minimumColumnWidth || '12rem' );
 		} else {
 			setTempColumnCount( columnCount || 3 );
+			setTempRowCount( rowCount );
 		}
 		onChange( {
 			...layout,
 			columnCount: value === 'manual' ? tempColumnCount : null,
+			rowCount:
+				value === 'manual' &&
+				window.__experimentalEnableGridInteractivity
+					? tempRowCount
+					: undefined,
+			isManualPlacement:
+				value === 'manual' &&
+				window.__experimentalEnableGridInteractivity
+					? true
+					: undefined,
 			minimumColumnWidth:
 				value === 'auto' ? tempMinimumColumnWidth : null,
 		} );
 	};
 
+	const helpText =
+		gridPlacement === 'manual'
+			? __(
+					'Grid items can be manually placed in any position on the grid.'
+			  )
+			: __(
+					'Grid items are placed automatically depending on their order.'
+			  );
+
 	return (
 		<ToggleGroupControl
 			__nextHasNoMarginBottom
 			label={ __( 'Grid item position' ) }
-			value={ isManual }
+			value={ gridPlacement }
 			onChange={ onChangeType }
 			isBlock
 			help={
-				isManual === 'manual'
-					? __(
-							'Grid items can be manually placed in any position on the grid.'
-					  )
-					: __(
-							'Grid items are placed automatically depending on their order.'
-					  )
+				window.__experimentalEnableGridInteractivity
+					? helpText
+					: undefined
 			}
 		>
 			<ToggleGroupControlOption
@@ -372,7 +473,3 @@ function GridLayoutTypeControl( { layout, onChange } ) {
 		</ToggleGroupControl>
 	);
 }
-
-function GridLayoutSync( props ) {
-	useGridLayoutSync( props );
-}

package/src/private-apis.js

@@ -20,14 +20,15 @@ import { cleanEmptyObject, useStyleOverride } from './hooks/utils';
 import BlockQuickNavigation from './components/block-quick-navigation';
 import { LayoutStyle } from './components/block-list/layout';
 import { BlockRemovalWarningModal } from './components/block-removal-warning-modal';
-import { useLayoutClasses, useLayoutStyles } from './hooks';
+import {
+	setBackgroundStyleDefaults,
+	useLayoutClasses,
+	useLayoutStyles,
+	__unstableBlockStyleVariationOverridesWithConfig,
+} from './hooks';
 import DimensionsTool from './components/dimensions-tool';
 import ResolutionTool from './components/resolution-tool';
 import TextAlignmentControl from './components/text-alignment-control';
-import {
-	default as ReusableBlocksRenameHint,
-	useReusableBlocksRenameHint,
-} from './components/inserter/reusable-block-rename-hint';
 import { usesContextKey } from './components/rich-text/format-edit';
 import { ExperimentalBlockCanvas } from './components/block-canvas';
 import { getDuotoneFilter } from './components/duotone/utils';
@@ -36,6 +37,7 @@ import {
 	selectBlockPatternsKey,
 	reusableBlocksSelectKey,
 	globalStylesDataKey,
+	globalStylesLinksDataKey,
 } from './store/private-keys';
 import { requiresWrapperOnCopy } from './components/writing-flow/utils';
 import { PrivateRichText } from './components/rich-text/';
@@ -44,6 +46,7 @@ import { PrivateInserterLibrary } from './components/inserter/library';
 import { PrivatePublishDateTimePicker } from './components/publish-date-time-picker';
 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';
 
 /**
  * Private @wordpress/block-editor APIs.
@@ -73,12 +76,12 @@ lock( privateApis, {
 	useLayoutStyles,
 	DimensionsTool,
 	ResolutionTool,
+	TabbedSidebar,
 	TextAlignmentControl,
-	ReusableBlocksRenameHint,
-	useReusableBlocksRenameHint,
 	usesContextKey,
 	useFlashEditableBlocks,
 	globalStylesDataKey,
+	globalStylesLinksDataKey,
 	selectBlockPatternsKey,
 	requiresWrapperOnCopy,
 	PrivateRichText,
@@ -88,4 +91,6 @@ lock( privateApis, {
 	PrivatePublishDateTimePicker,
 	useSpacingSizes,
 	useBlockDisplayTitle,
+	__unstableBlockStyleVariationOverridesWithConfig,
+	setBackgroundStyleDefaults,
 } );

package/src/store/actions.js

@@ -213,6 +213,21 @@ export function selectBlock( clientId, initialPosition = 0 ) {
 	};
 }
 
+/**
+ * Returns an action object used in signalling that the block with the
+ * specified client ID has been hovered.
+ *
+ * @param {string} clientId Block client ID.
+ *
+ * @return {Object} Action object.
+ */
+export function hoverBlock( clientId ) {
+	return {
+		type: 'HOVER_BLOCK',
+		clientId,
+	};
+}
+
 /**
  * Yields action objects used in signalling that the block preceding the given
  * clientId (or optionally, its first parent from bottom to top)

package/src/store/defaults.js

@@ -33,7 +33,6 @@ export const PREFERENCES_DEFAULTS = {
  * @property {boolean}       __experimentalBlockDirectory           Whether the user has enabled the Block Directory
  * @property {Array}         __experimentalBlockPatterns            Array of objects representing the block patterns
  * @property {Array}         __experimentalBlockPatternCategories   Array of objects representing the block pattern categories
- * @property {boolean}       __unstableGalleryWithImageBlocks       Whether the user has enabled the refactored gallery block which uses InnerBlocks
  */
 export const SETTINGS_DEFAULTS = {
 	alignWide: false,
@@ -168,7 +167,6 @@ export const SETTINGS_DEFAULTS = {
 	__mobileEnablePageTemplates: false,
 	__experimentalBlockPatterns: [],
 	__experimentalBlockPatternCategories: [],
-	__unstableGalleryWithImageBlocks: false,
 	__unstableIsPreviewMode: false,
 
 	// These settings will be completely revamped in the future.

package/src/store/defaults.native.js

@@ -10,9 +10,6 @@ const SETTINGS_DEFAULTS = {
 	...SETTINGS,
 	// Don't add the default font sizes for standard themes
 	fontSizes: undefined,
-	// FOR TESTING ONLY - Later, this will come from a REST API
-	// eslint-disable-next-line no-undef
-	__unstableGalleryWithImageBlocks: __DEV__,
 	alignWide: true,
 	supportsLayout: false,
 	__experimentalFeatures: {

package/src/store/private-keys.js

@@ -1,3 +1,4 @@
 export const globalStylesDataKey = Symbol( 'globalStylesDataKey' );
+export const globalStylesLinksDataKey = Symbol( 'globalStylesLinks' );
 export const selectBlockPatternsKey = Symbol( 'selectBlockPatternsKey' );
 export const reusableBlocksSelectKey = Symbol( 'reusableBlocksSelect' );

package/src/store/reducer.js

@@ -2068,6 +2068,23 @@ export function lastFocus( state = false, action ) {
 	return state;
 }
 
+/**
+ * Reducer setting currently hovered block.
+ *
+ * @param {boolean} state  Current state.
+ * @param {Object}  action Dispatched action.
+ *
+ * @return {boolean} Updated state.
+ */
+export function hoveredBlockClientId( state = false, action ) {
+	switch ( action.type ) {
+		case 'HOVER_BLOCK':
+			return action.clientId;
+	}
+
+	return state;
+}
+
 const combinedReducers = combineReducers( {
 	blocks,
 	isDragging,
@@ -2100,6 +2117,7 @@ const combinedReducers = combineReducers( {
 	blockRemovalRules,
 	openedBlockSettingsMenu,
 	registeredInserterMediaCategories,
+	hoveredBlockClientId,
 } );
 
 function withAutomaticChangeReset( reducer ) {

package/src/store/selectors.js

@@ -2809,6 +2809,16 @@ export function isBlockVisible( state, clientId ) {
 	return state.blockVisibility?.[ clientId ] ?? true;
 }
 
+/**
+ * Returns the currently hovered block.
+ *
+ * @param {Object} state Global application state.
+ * @return {Object} Client Id of the hovered block.
+ */
+export function getHoveredBlockClientId( state ) {
+	return state.hoveredBlockClientId;
+}
+
 /**
  * Returns the list of all hidden blocks.
  *

package/src/style.scss

@@ -42,6 +42,7 @@
 @import "./components/rich-text/style.scss";
 @import "./components/segmented-text-control/style.scss";
 @import "./components/skip-to-selected-block/style.scss";
+@import "./components/tabbed-sidebar/style.scss";
 @import "./components/tool-selector/style.scss";
 @import "./components/url-input/style.scss";
 @import "./components/url-popover/style.scss";
@@ -51,7 +52,6 @@
 @import "./hooks/color.scss";
 @import "./hooks/dimensions.scss";
 @import "./hooks/layout.scss";
-@import "./hooks/position.scss";
 @import "./hooks/spacing.scss";
 @import "./hooks/typography.scss";
 

package/src/utils/format-font-style.js

@@ -0,0 +1,40 @@
+/**
+ * WordPress dependencies
+ */
+import { _x } from '@wordpress/i18n';
+
+/**
+ * Formats font styles to human readable names.
+ *
+ * @param {string} fontStyle font style string
+ * @return {Object} new object with formatted font style
+ */
+export function formatFontStyle( fontStyle ) {
+	if ( ! fontStyle ) {
+		return {};
+	}
+
+	if ( typeof fontStyle === 'object' ) {
+		return fontStyle;
+	}
+
+	let name;
+
+	switch ( fontStyle ) {
+		case 'normal':
+			name = _x( 'Regular', 'font style' );
+			break;
+		case 'italic':
+			name = _x( 'Italic', 'font style' );
+			break;
+		case 'oblique':
+			name = _x( 'Oblique', 'font style' );
+			break;
+
+		default:
+			name = fontStyle;
+			break;
+	}
+
+	return { name, value: fontStyle };
+}

package/src/utils/format-font-weight.js

@@ -0,0 +1,63 @@
+/**
+ * WordPress dependencies
+ */
+import { _x } from '@wordpress/i18n';
+
+/**
+ * Formats font weights to human readable names.
+ *
+ * @param {string} fontWeight font weight string
+ * @return {Object} new object with formatted font weight
+ */
+export function formatFontWeight( fontWeight ) {
+	if ( ! fontWeight ) {
+		return {};
+	}
+
+	if ( typeof fontWeight === 'object' ) {
+		return fontWeight;
+	}
+
+	let name;
+
+	switch ( fontWeight ) {
+		case 'normal':
+		case '400':
+			name = _x( 'Regular', 'font weight' );
+			break;
+		case 'bold':
+		case '700':
+			name = _x( 'Bold', 'font weight' );
+			break;
+		case '100':
+			name = _x( 'Thin', 'font weight' );
+			break;
+		case '200':
+			name = _x( 'Extra Light', 'font weight' );
+			break;
+		case '300':
+			name = _x( 'Light', 'font weight' );
+			break;
+		case '500':
+			name = _x( 'Medium', 'font weight' );
+			break;
+		case '600':
+			name = _x( 'Semi Bold', 'font weight' );
+			break;
+		case '800':
+			name = _x( 'Extra Bold', 'font weight' );
+			break;
+		case '900':
+			name = _x( 'Black', 'font weight' );
+			break;
+		case '1000':
+			name = _x( 'Extra Black', 'font weight' );
+			break;
+
+		default:
+			name = fontWeight;
+			break;
+	}
+
+	return { name, value: fontWeight };
+}

package/src/utils/get-editor-region.js

@@ -0,0 +1,31 @@
+/**
+ * Gets the editor region for a given editor canvas element or
+ * returns the passed element if no region is found
+ *
+ * @param { Object } editor The editor canvas element.
+ * @return { Object } The editor region or given editor element
+ */
+export default function getEditorRegion( editor ) {
+	if ( ! editor ) {
+		return null;
+	}
+
+	// If there are multiple editors, we need to find the iframe that contains our contentRef to make sure
+	// we're focusing the region that contains this editor.
+	const editorCanvas =
+		Array.from(
+			document.querySelectorAll( 'iframe[name="editor-canvas"]' ).values()
+		).find( ( iframe ) => {
+			// Find the iframe that contains our contentRef
+			const iframeDocument =
+				iframe.contentDocument || iframe.contentWindow.document;
+
+			return iframeDocument === editor.ownerDocument;
+		} ) ?? editor;
+
+	// The region is provivided by the editor, not the block-editor.
+	// We should send focus to the region if one is available to reuse the
+	// same interface for navigating landmarks. If no region is available,
+	// use the canvas instead.
+	return editorCanvas?.closest( '[role="region"]' ) ?? editorCanvas;
+}