@wordpress/block-editor 8.0.12-next.33ec3857e2.0 → 8.0.15

package/src/hooks/border.js

@@ -2,41 +2,23 @@
  * WordPress dependencies
  */
 import { getBlockSupport } from '@wordpress/blocks';
-import { __experimentalToolsPanelItem as ToolsPanelItem } from '@wordpress/components';
+import { PanelBody } from '@wordpress/components';
 import { Platform } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
-import {
-	BorderColorEdit,
-	hasBorderColorValue,
-	resetBorderColor,
-} from './border-color';
-import {
-	BorderRadiusEdit,
-	hasBorderRadiusValue,
-	resetBorderRadius,
-} from './border-radius';
-import {
-	BorderStyleEdit,
-	hasBorderStyleValue,
-	resetBorderStyle,
-} from './border-style';
-import {
-	BorderWidthEdit,
-	hasBorderWidthValue,
-	resetBorderWidth,
-} from './border-width';
 import InspectorControls from '../components/inspector-controls';
 import useSetting from '../components/use-setting';
-import { cleanEmptyObject } from './utils';
+import { BorderColorEdit } from './border-color';
+import { BorderRadiusEdit } from './border-radius';
+import { BorderStyleEdit } from './border-style';
+import { BorderWidthEdit } from './border-width';
 
 export const BORDER_SUPPORT_KEY = '__experimentalBorder';
 
 export function BorderPanel( props ) {
-	const { clientId } = props;
 	const isDisabled = useIsBorderDisabled( props );
 	const isSupported = hasBorderSupport( props.name );
 
@@ -57,80 +39,22 @@ export function BorderPanel( props ) {
 		return null;
 	}
 
-	const defaultBorderControls = getBlockSupport( props.name, [
-		BORDER_SUPPORT_KEY,
-		'__experimentalDefaultControls',
-	] );
-
-	const createResetAllFilter = (
-		borderAttribute,
-		topLevelAttributes = {}
-	) => ( newAttributes ) => ( {
-		...newAttributes,
-		...topLevelAttributes,
-		style: {
-			...newAttributes.style,
-			border: {
-				...newAttributes.style?.border,
-				[ borderAttribute ]: undefined,
-			},
-		},
-	} );
-
 	return (
-		<InspectorControls __experimentalGroup="border">
-			{ isWidthSupported && (
-				<ToolsPanelItem
-					className="single-column"
-					hasValue={ () => hasBorderWidthValue( props ) }
-					label={ __( 'Width' ) }
-					onDeselect={ () => resetBorderWidth( props ) }
-					isShownByDefault={ defaultBorderControls?.width }
-					resetAllFilter={ createResetAllFilter( 'width' ) }
-					panelId={ clientId }
-				>
-					<BorderWidthEdit { ...props } />
-				</ToolsPanelItem>
-			) }
-			{ isStyleSupported && (
-				<ToolsPanelItem
-					className="single-column"
-					hasValue={ () => hasBorderStyleValue( props ) }
-					label={ __( 'Style' ) }
-					onDeselect={ () => resetBorderStyle( props ) }
-					isShownByDefault={ defaultBorderControls?.style }
-					resetAllFilter={ createResetAllFilter( 'style' ) }
-					panelId={ clientId }
-				>
-					<BorderStyleEdit { ...props } />
-				</ToolsPanelItem>
-			) }
-			{ isColorSupported && (
-				<ToolsPanelItem
-					hasValue={ () => hasBorderColorValue( props ) }
-					label={ __( 'Color' ) }
-					onDeselect={ () => resetBorderColor( props ) }
-					isShownByDefault={ defaultBorderControls?.color }
-					resetAllFilter={ createResetAllFilter( 'color', {
-						borderColor: undefined,
-					} ) }
-					panelId={ clientId }
-				>
-					<BorderColorEdit { ...props } />
-				</ToolsPanelItem>
-			) }
-			{ isRadiusSupported && (
-				<ToolsPanelItem
-					hasValue={ () => hasBorderRadiusValue( props ) }
-					label={ __( 'Radius' ) }
-					onDeselect={ () => resetBorderRadius( props ) }
-					isShownByDefault={ defaultBorderControls?.radius }
-					resetAllFilter={ createResetAllFilter( 'radius' ) }
-					panelId={ clientId }
-				>
-					<BorderRadiusEdit { ...props } />
-				</ToolsPanelItem>
-			) }
+		<InspectorControls>
+			<PanelBody
+				className="block-editor-hooks__border-controls"
+				title={ __( 'Border' ) }
+				initialOpen={ false }
+			>
+				{ ( isWidthSupported || isStyleSupported ) && (
+					<div className="block-editor-hooks__border-controls-row">
+						{ isWidthSupported && <BorderWidthEdit { ...props } /> }
+						{ isStyleSupported && <BorderStyleEdit { ...props } /> }
+					</div>
+				) }
+				{ isColorSupported && <BorderColorEdit { ...props } /> }
+				{ isRadiusSupported && <BorderRadiusEdit { ...props } /> }
+			</PanelBody>
 		</InspectorControls>
 	);
 }
@@ -194,22 +118,3 @@ const useIsBorderDisabled = () => {
 
 	return configs.every( Boolean );
 };
-
-/**
- * Returns a new style object where the specified border attribute has been
- * removed.
- *
- * @param {Object} style     Styles from block attributes.
- * @param {string} attribute The border style attribute to clear.
- *
- * @return {Object} Style object with the specified attribute removed.
- */
-export function removeBorderAttribute( style, attribute ) {
-	return cleanEmptyObject( {
-		...style,
-		border: {
-			...style?.border,
-			[ attribute ]: undefined,
-		},
-	} );
-}

package/src/hooks/border.scss

@@ -1,5 +1,19 @@
-.border-block-support-panel {
-	.single-column {
-		grid-column: span 1;
+.block-editor-hooks__border-controls {
+	.block-editor-hooks__border-controls-row {
+		display: flex;
+		justify-content: space-between;
+
+		> * {
+			width: calc(50% - #{ $grid-unit-10 });
+		}
+	}
+
+	.components-unit-control-wrapper {
+		margin-bottom: $grid-unit-30;
+
+		&:last-child {
+			margin-bottom: $grid-unit-10;
+		}
 	}
 }
+

package/src/hooks/color.js

@@ -32,8 +32,6 @@ import useSetting from '../components/use-setting';
 
 export const COLOR_SUPPORT_KEY = 'color';
 
-const EMPTY_OBJECT = {};
-
 const hasColorSupport = ( blockType ) => {
 	const colorSupport = getBlockSupport( blockType, COLOR_SUPPORT_KEY );
 	return (
@@ -232,7 +230,17 @@ export function ColorEdit( props ) {
 		],
 		[ userPalette, themePalette, defaultPalette ]
 	);
-	const gradientsPerOrigin = useSetting( 'color.gradients' ) || EMPTY_OBJECT;
+	const userGradientPalette = useSetting( 'color.gradients.custom' );
+	const themeGradientPalette = useSetting( 'color.gradients.theme' );
+	const defaultGradientPalette = useSetting( 'color.gradients.default' );
+	const allGradients = useMemo(
+		() => [
+			...( userGradientPalette || [] ),
+			...( themeGradientPalette || [] ),
+			...( defaultGradientPalette || [] ),
+		],
+		[ userGradientPalette, themeGradientPalette, defaultGradientPalette ]
+	);
 	const areCustomSolidsEnabled = useSetting( 'color.custom' );
 	const areCustomGradientsEnabled = useSetting( 'color.customGradient' );
 	const isBackgroundEnabled = useSetting( 'color.background' );
@@ -244,17 +252,8 @@ export function ColorEdit( props ) {
 
 	const gradientsEnabled =
 		areCustomGradientsEnabled ||
-		! gradientsPerOrigin?.theme ||
-		gradientsPerOrigin?.theme?.length > 0;
-
-	const allGradients = useMemo(
-		() => [
-			...( gradientsPerOrigin?.custom || [] ),
-			...( gradientsPerOrigin?.theme || [] ),
-			...( gradientsPerOrigin?.default || [] ),
-		],
-		[ gradientsPerOrigin ]
-	);
+		! themeGradientPalette ||
+		themeGradientPalette?.length > 0;
 
 	// Shouldn't be needed but right now the ColorGradientsPanel
 	// can trigger both onChangeColor and onChangeBackground

package/src/hooks/layout.js

@@ -215,6 +215,7 @@ export const withLayoutStyles = createHigherOrderComponent(
 						<LayoutStyle
 							selector={ `.wp-container-${ id }` }
 							layout={ usedLayout }
+							style={ attributes?.style }
 						/>,
 						element
 					) }

package/src/hooks/letter-spacing.js

@@ -45,7 +45,7 @@ export function LetterSpacingEdit( props ) {
 		<LetterSpacingControl
 			value={ style?.typography?.letterSpacing }
 			onChange={ onChange }
-			__unstableInputWidth={ '100%' }
+			__unstableInputWidth={ false }
 		/>
 	);
 }

package/src/hooks/style.js

@@ -74,6 +74,7 @@ function compileStyleValue( uncompiledValue ) {
  * @return {Object} Flattened CSS variables declaration.
  */
 export function getInlineStyles( styles = {} ) {
+	const ignoredStyles = [ 'spacing.blockGap' ];
 	const output = {};
 	Object.keys( STYLE_PROPERTY ).forEach( ( propKey ) => {
 		const path = STYLE_PROPERTY[ propKey ].value;
@@ -93,7 +94,7 @@ export function getInlineStyles( styles = {} ) {
 						output[ name ] = compileStyleValue( value );
 					}
 				} );
-			} else {
+			} else if ( ! ignoredStyles.includes( path.join( '.' ) ) ) {
 				output[ propKey ] = compileStyleValue( get( styles, path ) );
 			}
 		}

package/src/hooks/test/style.js

@@ -30,7 +30,6 @@ describe( 'getInlineStyles', () => {
 				},
 			} )
 		).toEqual( {
-			'--wp--style--block-gap': '1em',
 			backgroundColor: 'black',
 			borderColor: '#21759b',
 			borderRadius: '10px',
@@ -104,7 +103,6 @@ describe( 'getInlineStyles', () => {
 				},
 			} )
 		).toEqual( {
-			'--wp--style--block-gap': '1em',
 			margin: '10px',
 			padding: '20px',
 		} );

package/src/hooks/typography.js

@@ -218,7 +218,7 @@ export function TypographyPanel( props ) {
 				<ToolsPanelItem
 					className="single-column"
 					hasValue={ () => hasLetterSpacingValue( props ) }
-					label={ __( 'Letter spacing' ) }
+					label={ __( 'Letter-spacing' ) }
 					onDeselect={ () => resetLetterSpacing( props ) }
 					isShownByDefault={ defaultControls?.letterSpacing }
 					resetAllFilter={ createResetAllFilter( 'letterSpacing' ) }

package/src/layouts/flex.js

@@ -84,58 +84,35 @@ export default {
 			</BlockControls>
 		);
 	},
-	save: function FlexLayoutStyle( { selector, layout } ) {
-		const {
-			orientation = 'horizontal',
-			setCascadingProperties = false,
-		} = layout;
+	save: function FlexLayoutStyle( { selector, layout, style } ) {
+		const { orientation = 'horizontal' } = layout;
 		const blockGapSupport = useSetting( 'spacing.blockGap' );
 		const hasBlockGapStylesSupport = blockGapSupport !== null;
+		const blockGapValue =
+			style?.spacing?.blockGap ?? 'var( --wp--style--block-gap, 0.5em )';
 		const justifyContent =
 			justifyContentMap[ layout.justifyContent ] ||
 			justifyContentMap.left;
 		const flexWrap = flexWrapOptions.includes( layout.flexWrap )
 			? layout.flexWrap
 			: 'wrap';
-		let rowOrientation = `
+		const rowOrientation = `
 		flex-direction: row;
 		align-items: center;
 		justify-content: ${ justifyContent };
 		`;
-		if ( setCascadingProperties ) {
-			// --layout-justification-setting allows children to inherit the value
-			// regardless or row or column direction.
-			rowOrientation += `
-			--layout-justification-setting: ${ justifyContent };
-			--layout-direction: row;
-			--layout-wrap: ${ flexWrap };
-			--layout-justify: ${ justifyContent };
-			--layout-align: center;
-			`;
-		}
 		const alignItems =
 			alignItemsMap[ layout.justifyContent ] || alignItemsMap.left;
-		let columnOrientation = `
+		const columnOrientation = `
 		flex-direction: column;
 		align-items: ${ alignItems };
 		`;
-		if ( setCascadingProperties ) {
-			columnOrientation += `
-			--layout-justification-setting: ${ alignItems };
-			--layout-direction: column;
-			--layout-justify: initial;
-			--layout-align: ${ alignItems };
-			`;
-		}
+
 		return (
 			<style>{ `
 				${ appendSelectors( selector ) } {
 					display: flex;
-					gap: ${
-						hasBlockGapStylesSupport
-							? 'var( --wp--style--block-gap, 0.5em )'
-							: '0.5em'
-					};
+					gap: ${ hasBlockGapStylesSupport ? blockGapValue : '0.5em' };
 					flex-wrap: ${ flexWrap };
 					${ orientation === 'horizontal' ? rowOrientation : columnOrientation }
 				}

package/src/layouts/flow.js

@@ -105,12 +105,14 @@ export default {
 	toolBarControls: function DefaultLayoutToolbarControls() {
 		return null;
 	},
-	save: function DefaultLayoutStyle( { selector, layout = {} } ) {
+	save: function DefaultLayoutStyle( { selector, layout = {}, style } ) {
 		const { contentSize, wideSize } = layout;
 		const blockGapSupport = useSetting( 'spacing.blockGap' );
 		const hasBlockGapStylesSupport = blockGapSupport !== null;
+		const blockGapValue =
+			style?.spacing?.blockGap ?? 'var( --wp--style--block-gap )';
 
-		let style =
+		let output =
 			!! contentSize || !! wideSize
 				? `
 					${ appendSelectors( selector, '> *' ) } {
@@ -129,7 +131,7 @@ export default {
 				`
 				: '';
 
-		style += `
+		output += `
 			${ appendSelectors( selector, '> [data-align="left"]' ) } {
 				float: left;
 				margin-right: 2em;
@@ -143,18 +145,18 @@ export default {
 		`;
 
 		if ( hasBlockGapStylesSupport ) {
-			style += `
+			output += `
 				${ appendSelectors( selector, '> *' ) } {
 					margin-top: 0;
 					margin-bottom: 0;
 				}
 				${ appendSelectors( selector, '> * + *' ) } {
-					margin-top: var( --wp--style--block-gap );
+					margin-top: ${ blockGapValue };
 				}
 			`;
 		}
 
-		return <style>{ style }</style>;
+		return <style>{ output }</style>;
 	},
 	getOrientation() {
 		return 'vertical';

package/src/store/actions.js

@@ -555,7 +555,8 @@ export const insertBlocks = (
 		meta = initialPosition;
 		initialPosition = 0;
 		deprecated( "meta argument in wp.data.dispatch('core/block-editor')", {
-			since: '5.8',
+			since: '10.1',
+			plugin: 'Gutenberg',
 			hint: 'The meta argument is now the 6th argument of the function',
 		} );
 	}
@@ -1169,8 +1170,7 @@ export const duplicateBlocks = ( clientIds, updateSelection = true ) => ( {
 
 	const rootClientId = select.getBlockRootClientId( clientIds[ 0 ] );
 	const lastSelectedIndex = select.getBlockIndex(
-		last( castArray( clientIds ) ),
-		rootClientId
+		last( castArray( clientIds ) )
 	);
 	const clonedBlocks = blocks.map( ( block ) =>
 		__experimentalCloneSanitizedBlock( block )
@@ -1205,7 +1205,7 @@ export const insertBeforeBlock = ( clientId ) => ( { select, dispatch } ) => {
 		return;
 	}
 
-	const firstSelectedIndex = select.getBlockIndex( clientId, rootClientId );
+	const firstSelectedIndex = select.getBlockIndex( clientId );
 	return dispatch.insertDefaultBlock( {}, rootClientId, firstSelectedIndex );
 };
 
@@ -1224,7 +1224,7 @@ export const insertAfterBlock = ( clientId ) => ( { select, dispatch } ) => {
 		return;
 	}
 
-	const firstSelectedIndex = select.getBlockIndex( clientId, rootClientId );
+	const firstSelectedIndex = select.getBlockIndex( clientId );
 	return dispatch.insertDefaultBlock(
 		{},
 		rootClientId,

package/src/store/defaults.js

@@ -234,6 +234,4 @@ export const SETTINGS_DEFAULTS = {
 			slug: 'midnight',
 		},
 	],
-
-	__unstableResolvedAssets: { styles: [], scripts: [] },
 };

package/src/store/reducer.js

@@ -737,6 +737,27 @@ const withSaveReusableBlock = ( reducer ) => ( state, action ) => {
 
 	return reducer( state, action );
 };
+/**
+ * Higher-order reducer which removes blocks from state when switching parent block controlled state.
+ *
+ * @param {Function} reducer Original reducer function.
+ *
+ * @return {Function} Enhanced reducer function.
+ */
+const withResetControlledBlocks = ( reducer ) => ( state, action ) => {
+	if ( action.type === 'SET_HAS_CONTROLLED_INNER_BLOCKS' ) {
+		// when switching a block from controlled to uncontrolled or inverse,
+		// we need to remove its content first.
+		const tempState = reducer( state, {
+			type: 'REPLACE_INNER_BLOCKS',
+			rootClientId: action.clientId,
+			blocks: [],
+		} );
+		return reducer( tempState, action );
+	}
+
+	return reducer( state, action );
+};
 
 /**
  * Reducer returning the blocks state.
@@ -754,7 +775,8 @@ export const blocks = flow(
 	withReplaceInnerBlocks, // needs to be after withInnerBlocksRemoveCascade
 	withBlockReset,
 	withPersistentBlockChange,
-	withIgnoredBlockChange
+	withIgnoredBlockChange,
+	withResetControlledBlocks
 )( {
 	byClientId( state = {}, action ) {
 		switch ( action.type ) {

package/src/store/selectors.js

@@ -892,11 +892,11 @@ export function getBlockOrder( state, rootClientId ) {
  *
  * @param {Object}  state        Editor state.
  * @param {string}  clientId     Block client ID.
- * @param {?string} rootClientId Optional root client ID of block list.
  *
  * @return {number} Index at which block exists in order.
  */
-export function getBlockIndex( state, clientId, rootClientId ) {
+export function getBlockIndex( state, clientId ) {
+	const rootClientId = getBlockRootClientId( state, clientId );
 	return getBlockOrder( state, rootClientId ).indexOf( clientId );
 }
 

package/src/store/test/reducer.js

@@ -2050,6 +2050,41 @@ describe( 'state', () => {
 					expect( state.isIgnoredChange ).toBe( true );
 				} );
 			} );
+
+			describe( 'controlledInnerBlocks', () => {
+				it( 'should remove the content of the block if it switches from controlled to uncontrolled or opposite', () => {
+					const original = blocks( undefined, {
+						type: 'RESET_BLOCKS',
+						blocks: [
+							{
+								clientId: 'chicken',
+								name: 'core/test-block',
+								attributes: {},
+								innerBlocks: [
+									{
+										clientId: 'child',
+										name: 'core/test-block',
+										attributes: {},
+										innerBlocks: [],
+									},
+								],
+							},
+						],
+					} );
+
+					const state = blocks( original, {
+						type: 'SET_HAS_CONTROLLED_INNER_BLOCKS',
+						clientId: 'chicken',
+						hasControlledInnerBlocks: true,
+					} );
+
+					expect( state.controlledInnerBlocks.chicken ).toBe( true );
+					// The previous content of the block should be removed
+					expect( state.byClientId.child ).toBeUndefined();
+					expect( state.tree.child ).toBeUndefined();
+					expect( state.tree.chicken.innerBlocks ).toEqual( [] );
+				} );
+			} );
 		} );
 	} );
 

package/src/store/test/selectors.js

@@ -1358,7 +1358,7 @@ describe( 'selectors', () => {
 				},
 			};
 
-			expect( getBlockIndex( state, 56, '123' ) ).toBe( 1 );
+			expect( getBlockIndex( state, 56 ) ).toBe( 1 );
 		} );
 	} );
 

package/src/style.scss

@@ -32,12 +32,12 @@
 @import "./components/default-block-appender/style.scss";
 @import "./components/duotone-control/style.scss";
 @import "./components/font-appearance-control/style.scss";
+@import "./components/justify-content-control/style.scss";
+@import "./components/link-control/style.scss";
+@import "./components/line-height-control/style.scss";
 @import "./components/image-size-control/style.scss";
 @import "./components/inner-blocks/style.scss";
 @import "./components/inserter-list-item/style.scss";
-@import "./components/justify-content-control/style.scss";
-@import "./components/line-height-control/style.scss";
-@import "./components/link-control/style.scss";
 @import "./components/list-view/style.scss";
 @import "./components/media-replace-flow/style.scss";
 @import "./components/media-placeholder/style.scss";
@@ -55,7 +55,6 @@
 @import "./hooks/anchor.scss";
 @import "./hooks/layout.scss";
 @import "./hooks/border.scss";
-@import "./hooks/dimensions.scss";
 @import "./hooks/typography.scss";
 
 @import "./components/block-toolbar/style.scss";

package/src/utils/get-paste-event-data.js

@@ -27,7 +27,7 @@ export function getPasteEventData( { clipboardData } ) {
 
 	const files = getFilesFromDataTransfer(
 		clipboardData
-	).filter( ( { type } ) => /^image\/(?:jpe?g|png|gif|webp)$/.test( type ) );
+	).filter( ( { type } ) => /^image\/(?:jpe?g|png|gif)$/.test( type ) );
 
 	// Only process files if no HTML is present.
 	// A pasted file may have the URL as plain text.

package/src/utils/parse-css-unit-to-px.js

@@ -8,7 +8,7 @@ function parseUnit( cssUnit ) {
 	const match = cssUnit
 		?.trim()
 		.match(
-			/^(0?[-.]?\d*\.?\d+)(r?e[m|x]|v[h|w|min|max]+|p[x|t|c]|[c|m]m|%|in|ch|Q|lh)$/
+			/^(0?[-.]?\d+)(r?e[m|x]|v[h|w|min|max]+|p[x|t|c]|[c|m]m|%|in|ch|Q|lh)$/
 		);
 	if ( ! isNaN( cssUnit ) && ! isNaN( parseFloat( cssUnit ) ) ) {
 		return { value: parseFloat( cssUnit ), unit: 'px' };

package/src/utils/test/parse-css-unit-to-px.js

@@ -52,7 +52,6 @@ describe( 'getPxFromCssUnit', () => {
 		const testData = [
 			[ '2em', '20px' ],
 			[ '2rem', '20px' ],
-			[ '1.125rem', '11px' ],
 			[ '20vw', '20px' ],
 			[ '20vh', '40px' ],
 			[ '20vmin', '20px' ],