@wordpress/block-editor 13.1.0 → 13.3.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 } from '../components/grid-visualizer';
 
 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,8 +100,8 @@ export default {
 			</>
 		);
 	},
-	toolBarControls: function GridLayoutToolbarControls( { clientId } ) {
-		return <GridVisualizer clientId={ clientId } />;
+	toolBarControls: function GridLayoutToolbarControls() {
+		return null;
 	},
 	getLayoutStyle: function getLayoutStyle( {
 		selector,
@@ -104,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 =
@@ -120,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'
 			);
 		}
@@ -165,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( {
@@ -207,7 +250,8 @@ function GridLayoutMinimumWidthControl( { layout, onChange } ) {
 						onChange={ ( newValue ) => {
 							onChange( {
 								...layout,
-								minimumColumnWidth: newValue,
+								minimumColumnWidth:
+									newValue === '' ? undefined : newValue,
 							} );
 						} }
 						onUnitChange={ handleUnitChange }
@@ -221,7 +265,7 @@ function GridLayoutMinimumWidthControl( { layout, onChange } ) {
 				<FlexItem isBlock>
 					<RangeControl
 						onChange={ handleSliderChange }
-						value={ quantity }
+						value={ quantity || 0 }
 						min={ 0 }
 						max={ RANGE_CONTROL_MAX_VALUES[ unit ] || 600 }
 						withInputField={ false }
@@ -240,101 +284,114 @@ 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>
-				<BaseControl.VisualLabel as="legend">
-					{ __( 'Columns' ) }
-				</BaseControl.VisualLabel>
+				{ ( ! 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
+							hideLabelFromVision={
+								! window.__experimentalEnableGridInteractivity ||
+								! isManualPlacement
+							}
 						/>
 					</FlexItem>
+
 					<FlexItem isBlock>
-						<RangeControl
-							value={ parseInt( columnCount, 10 ) } // RangeControl can't deal with strings.
-							onChange={ ( value ) =>
-								onChange( {
-									...layout,
-									columnCount: value,
-								} )
-							}
-							min={ 1 }
-							max={ 16 }
-							withInputField={ false }
-							label={ __( 'Columns' ) }
-							hideLabelFromVision
-						/>
+						{ window.__experimentalEnableGridInteractivity &&
+						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: newRowCount,
+									} );
+								} }
+								value={ rowCount }
+								min={ 0 }
+								label={ __( 'Rows' ) }
+							/>
+						) : (
+							<RangeControl
+								value={ columnCount ?? 0 }
+								onChange={ ( value ) =>
+									onChange( {
+										...layout,
+										columnCount: value,
+									} )
+								}
+								min={ 0 }
+								max={ 16 }
+								withInputField={ false }
+								label={ __( 'Columns' ) }
+								hideLabelFromVision
+							/>
+						) }
 					</FlexItem>
 				</Flex>
 			</fieldset>
-			{ allowSizingOnChildren &&
-				window.__experimentalEnableGridInteractivity && (
-					<fieldset>
-						<BaseControl.VisualLabel as="legend">
-							{ __( 'Rows' ) }
-						</BaseControl.VisualLabel>
-						<Flex gap={ 4 }>
-							<FlexItem isBlock>
-								<NumberControl
-									size="__unstable-large"
-									onChange={ ( value ) => {
-										onChange( {
-											...layout,
-											rowCount: value,
-										} );
-									} }
-									value={ rowCount }
-									min={ 1 }
-									label={ __( 'Rows' ) }
-									hideLabelFromVision
-								/>
-							</FlexItem>
-							<FlexItem isBlock>
-								<RangeControl
-									value={ parseInt( rowCount, 10 ) } // RangeControl can't deal with strings.
-									onChange={ ( value ) =>
-										onChange( {
-											...layout,
-											rowCount: value,
-										} )
-									}
-									min={ 1 }
-									max={ 16 }
-									withInputField={ false }
-									label={ __( 'Rows' ) }
-									hideLabelFromVision
-								/>
-							</FlexItem>
-						</Flex>
-					</fieldset>
-				) }
 		</>
 	);
 }
 
 // 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
@@ -343,33 +400,63 @@ 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={ __( 'Type' ) }
-			value={ isManual }
+			label={ __( 'Grid item position' ) }
+			value={ gridPlacement }
 			onChange={ onChangeType }
 			isBlock
+			help={
+				window.__experimentalEnableGridInteractivity
+					? helpText
+					: undefined
+			}
 		>
 			<ToggleGroupControlOption
 				key="auto"

package/src/lock-unlock.js

@@ -5,6 +5,6 @@ import { __dangerousOptInToUnstableAPIsOnlyForCoreModules } from '@wordpress/pri
 
 export const { lock, unlock } =
 	__dangerousOptInToUnstableAPIsOnlyForCoreModules(
-		'I know using unstable features means my theme or plugin will inevitably break in the next version of WordPress.',
+		'I acknowledge private features are not for use in themes or plugins and doing so will break in the next version of WordPress.',
 		'@wordpress/block-editor'
 	);

package/src/private-apis.js

@@ -20,7 +20,12 @@ 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';
@@ -36,6 +41,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 +50,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 +80,14 @@ lock( privateApis, {
 	useLayoutStyles,
 	DimensionsTool,
 	ResolutionTool,
+	TabbedSidebar,
 	TextAlignmentControl,
 	ReusableBlocksRenameHint,
 	useReusableBlocksRenameHint,
 	usesContextKey,
 	useFlashEditableBlocks,
 	globalStylesDataKey,
+	globalStylesLinksDataKey,
 	selectBlockPatternsKey,
 	requiresWrapperOnCopy,
 	PrivateRichText,
@@ -88,4 +97,6 @@ lock( privateApis, {
 	PrivatePublishDateTimePicker,
 	useSpacingSizes,
 	useBlockDisplayTitle,
+	__unstableBlockStyleVariationOverridesWithConfig,
+	setBackgroundStyleDefaults,
 } );

package/src/store/actions.js

@@ -982,7 +982,7 @@ export const __unstableSplitSelection =
 			},
 		};
 
-		const tail = {
+		let tail = {
 			...blockB,
 			// Only preserve the original client ID if the end is different.
 			clientId:
@@ -995,6 +995,26 @@ export const __unstableSplitSelection =
 			},
 		};
 
+		// When splitting a block, attempt to convert the tail block to the
+		// default block type. For example, when splitting a heading block, the
+		// tail block will be converted to a paragraph block. Note that for
+		// blocks such as a list item and button, this will be skipped because
+		// the default block type cannot be inserted.
+		const defaultBlockName = getDefaultBlockName();
+		if (
+			// A block is only split when the selection is within the same
+			// block.
+			blockA.clientId === blockB.clientId &&
+			defaultBlockName &&
+			tail.name !== defaultBlockName &&
+			select.canInsertBlockType( defaultBlockName, anchorRootClientId )
+		) {
+			const switched = switchToBlockType( tail, defaultBlockName );
+			if ( switched?.length === 1 ) {
+				tail = switched[ 0 ];
+			}
+		}
+
 		if ( ! blocks.length ) {
 			dispatch.replaceBlocks( select.getSelectedBlockClientIds(), [
 				head,

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/style.scss

@@ -27,7 +27,7 @@
 @import "./components/duotone-control/style.scss";
 @import "./components/font-appearance-control/style.scss";
 @import "./components/global-styles/style.scss";
-@import "./components/grid-visualizer/style.scss";
+@import "./components/grid/style.scss";
 @import "./components/height-control/style.scss";
 @import "./components/image-size-control/style.scss";
 @import "./components/inserter-list-item/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 };
+}