@wordpress/block-editor 8.0.16 → 8.1.0

package/src/hooks/border-width.js

@@ -5,13 +5,14 @@ import {
 	__experimentalUnitControl as UnitControl,
 	__experimentalUseCustomUnits as useCustomUnits,
 } from '@wordpress/components';
-import { useEffect, useState } from '@wordpress/element';
+import { useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
 import { cleanEmptyObject } from './utils';
+import { removeBorderAttribute } from './border';
 import useSetting from '../components/use-setting';
 
 const MIN_BORDER_WIDTH = 0;
@@ -31,25 +32,12 @@ export const BorderWidthEdit = ( props ) => {
 
 	const { width, color: customBorderColor, style: borderStyle } =
 		style?.border || {};
+
+	// Used to temporarily track previous border color & style selections to be
+	// able to restore them when border width changes from zero value.
 	const [ styleSelection, setStyleSelection ] = useState();
 	const [ colorSelection, setColorSelection ] = useState();
-
-	// Temporarily track previous border color & style selections to be able to
-	// restore them when border width changes from zero value.
-	useEffect( () => {
-		if ( borderStyle !== 'none' ) {
-			setStyleSelection( borderStyle );
-		}
-	}, [ borderStyle ] );
-
-	useEffect( () => {
-		if ( borderColor || customBorderColor ) {
-			setColorSelection( {
-				name: !! borderColor ? borderColor : undefined,
-				color: !! customBorderColor ? customBorderColor : undefined,
-			} );
-		}
-	}, [ borderColor, customBorderColor ] );
+	const [ customColorSelection, setCustomColorSelection ] = useState();
 
 	const onChange = ( newWidth ) => {
 		let newStyle = {
@@ -64,28 +52,39 @@ export const BorderWidthEdit = ( props ) => {
 		let borderPaletteColor = borderColor;
 
 		const hasZeroWidth = parseFloat( newWidth ) === 0;
+		const hadPreviousZeroWidth = parseFloat( width ) === 0;
 
 		// Setting the border width explicitly to zero will also set the
 		// border style to `none` and clear border color attributes.
-		if ( hasZeroWidth ) {
+		if ( hasZeroWidth && ! hadPreviousZeroWidth ) {
+			// Before clearing color and style selections, keep track of
+			// the current selections so they can be restored when the width
+			// changes to a non-zero value.
+			setColorSelection( borderColor );
+			setCustomColorSelection( customBorderColor );
+			setStyleSelection( borderStyle );
+
+			// Clear style and color attributes.
 			borderPaletteColor = undefined;
 			newStyle.border.color = undefined;
 			newStyle.border.style = 'none';
 		}
 
-		// Restore previous border style selection if width is now not zero and
-		// border style was 'none'. This is to support changes to the UI which
-		// change the border style UI to a segmented control without a "none"
-		// option.
-		if ( ! hasZeroWidth && borderStyle === 'none' ) {
-			newStyle.border.style = styleSelection;
-		}
-
-		// Restore previous border color selection if width is no longer zero
-		// and current border color is undefined.
-		if ( ! hasZeroWidth && borderColor === undefined ) {
-			borderPaletteColor = colorSelection?.name;
-			newStyle.border.color = colorSelection?.color;
+		if ( ! hasZeroWidth && hadPreviousZeroWidth ) {
+			// Restore previous border style selection if width is now not zero and
+			// border style was 'none'. This is to support changes to the UI which
+			// change the border style UI to a segmented control without a "none"
+			// option.
+			if ( borderStyle === 'none' ) {
+				newStyle.border.style = styleSelection;
+			}
+
+			// Restore previous border color selection if width is no longer zero
+			// and current border color is undefined.
+			if ( borderColor === undefined ) {
+				borderPaletteColor = colorSelection;
+				newStyle.border.color = customColorSelection;
+			}
 		}
 
 		// If width was reset, clean out undefined styles.
@@ -113,3 +112,28 @@ export const BorderWidthEdit = ( props ) => {
 		/>
 	);
 };
+
+/**
+ * Checks if there is a current value in the border width block support
+ * attributes.
+ *
+ * @param {Object} props Block props.
+ * @return {boolean}     Whether or not the block has a border width value set.
+ */
+export function hasBorderWidthValue( props ) {
+	return !! props.attributes.style?.border?.width;
+}
+
+/**
+ * Resets the border width block support attribute. This can be used when
+ * disabling the border width support control for a block via a progressive
+ * discovery panel.
+ *
+ * @param {Object} props               Block props.
+ * @param {Object} props.attributes    Block's attributes.
+ * @param {Object} props.setAttributes Function to set block's attributes.
+ */
+export function resetBorderWidth( { attributes = {}, setAttributes } ) {
+	const { style } = attributes;
+	setAttributes( { style: removeBorderAttribute( style, 'width' ) } );
+}

package/src/hooks/border.js

@@ -2,23 +2,41 @@
  * WordPress dependencies
  */
 import { getBlockSupport } from '@wordpress/blocks';
-import { PanelBody } from '@wordpress/components';
+import { __experimentalToolsPanelItem as ToolsPanelItem } 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 { BorderColorEdit } from './border-color';
-import { BorderRadiusEdit } from './border-radius';
-import { BorderStyleEdit } from './border-style';
-import { BorderWidthEdit } from './border-width';
+import { cleanEmptyObject } from './utils';
 
 export const BORDER_SUPPORT_KEY = '__experimentalBorder';
 
 export function BorderPanel( props ) {
+	const { clientId } = props;
 	const isDisabled = useIsBorderDisabled( props );
 	const isSupported = hasBorderSupport( props.name );
 
@@ -39,22 +57,80 @@ 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>
-			<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 __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>
 	);
 }
@@ -118,3 +194,22 @@ 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,19 +1,5 @@
-.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;
-		}
+.border-block-support-panel {
+	.single-column {
+		grid-column: span 1;
 	}
 }
-

package/src/hooks/color-panel.js

@@ -17,6 +17,7 @@ function getComputedStyle( node ) {
 }
 
 export default function ColorPanel( {
+	enableAlpha = false,
 	settings,
 	clientId,
 	enableContrastChecking = true,
@@ -60,6 +61,7 @@ export default function ColorPanel( {
 				initialOpen={ false }
 				settings={ settings }
 				showTitle={ showTitle }
+				enableAlpha={ enableAlpha }
 				__experimentalHasMultipleOrigins
 				__experimentalIsRenderedInSidebar
 			>
@@ -67,6 +69,7 @@ export default function ColorPanel( {
 					<ContrastChecker
 						backgroundColor={ detectedBackgroundColor }
 						textColor={ detectedColor }
+						enableAlphaChecker={ enableAlpha }
 					/>
 				) }
 			</PanelColorGradientSettings>

package/src/hooks/color-panel.native.js

@@ -0,0 +1,63 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import { useEffect, useState } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { useGlobalStyles } from '@wordpress/components';
+import { store as blockEditorStore } from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import PanelColorGradientSettings from '../components/colors-gradients/panel-color-gradient-settings';
+import ContrastChecker from '../components/contrast-checker';
+import InspectorControls from '../components/inspector-controls';
+
+const ColorPanel = ( { settings } ) => {
+	const globalStyles = useGlobalStyles();
+
+	const [ detectedBackgroundColor, setDetectedBackgroundColor ] = useState();
+	const [ detectedTextColor, setDetectedTextColor ] = useState();
+
+	const { baseGlobalStyles } = useSelect( ( select ) => {
+		const { getSettings } = select( blockEditorStore );
+		return {
+			baseGlobalStyles: getSettings()
+				?.__experimentalGlobalStylesBaseStyles?.color,
+		};
+	} );
+
+	useEffect( () => {
+		// The following logic is used to determine current text/background colors:
+		// 1. The globalStyles object is queried to determine whether a color has been
+		// set via a block's settings.
+		// 2. If a block-based theme is in use and no globalStyles exist, the theme's
+		// default/base colors are used.
+		// 3. If no globalStyles exist and a theme isn't block-based, there is no way
+		// to determine the default text/background color and the checker won't run.
+		const textColor = globalStyles?.color || baseGlobalStyles?.text;
+		const backgroundColor =
+			globalStyles?.backgroundColor || baseGlobalStyles?.background;
+
+		setDetectedTextColor( textColor );
+		setDetectedBackgroundColor( backgroundColor );
+	}, [ globalStyles, baseGlobalStyles ] );
+
+	return (
+		<InspectorControls>
+			<PanelColorGradientSettings
+				title={ __( 'Color' ) }
+				initialOpen={ false }
+				settings={ settings }
+			>
+				<ContrastChecker
+					backgroundColor={ detectedBackgroundColor }
+					textColor={ detectedTextColor }
+				/>
+			</PanelColorGradientSettings>
+		</InspectorControls>
+	);
+};
+
+export default ColorPanel;

package/src/hooks/color.js

@@ -371,18 +371,19 @@ export function ColorEdit( props ) {
 		props.setAttributes( { style: newStyle } );
 	};
 
+	const enableContrastChecking =
+		Platform.OS === 'web' && ! gradient && ! style?.color?.gradient;
+
 	return (
 		<ColorPanel
-			enableContrastChecking={
-				// Turn on contrast checker for web only since it's not supported on mobile yet.
-				Platform.OS === 'web' && ! gradient && ! style?.color?.gradient
-			}
+			enableContrastChecking={ enableContrastChecking }
 			clientId={ props.clientId }
+			enableAlpha={ true }
 			settings={ [
 				...( hasTextColor
 					? [
 							{
-								label: __( 'Text color' ),
+								label: __( 'Text' ),
 								onColorChange: onChangeColor( 'text' ),
 								colorValue: getColorObjectByAttributeValues(
 									allSolids,
@@ -395,7 +396,7 @@ export function ColorEdit( props ) {
 				...( hasBackgroundColor || hasGradientColor
 					? [
 							{
-								label: __( 'Background color' ),
+								label: __( 'Background' ),
 								onColorChange: hasBackgroundColor
 									? onChangeColor( 'background' )
 									: undefined,
@@ -414,7 +415,7 @@ export function ColorEdit( props ) {
 				...( hasLinkColor
 					? [
 							{
-								label: __( 'Link Color' ),
+								label: __( 'Link' ),
 								onColorChange: onChangeLinkColor,
 								colorValue: getLinkColorFromAttributeValue(
 									allSolids,

package/src/hooks/dimensions.scss

@@ -0,0 +1,5 @@
+.dimensions-block-support-panel {
+	.single-column {
+		grid-column: span 1;
+	}
+}

package/src/hooks/index.native.js

@@ -9,6 +9,7 @@ import './generated-class-name';
 import './style';
 import './color';
 import './font-size';
+import './layout';
 
 export { getBorderClassesAndStyles, useBorderProps } from './use-border-props';
 export { getColorClassesAndStyles, useColorProps } from './use-color-props';

package/src/hooks/layout.native.js

@@ -0,0 +1,23 @@
+/**
+ * WordPress dependencies
+ */
+import { removeFilter } from '@wordpress/hooks';
+
+/**
+ * Internal dependencies
+ */
+import './layout.js';
+
+// This filter is removed because layout styles shouldn't be added
+// until layout types are supported in the native version.
+removeFilter(
+	'editor.BlockListBlock',
+	'core/editor/layout/with-layout-styles'
+);
+
+// This filter is removed because the layout controls shouldn't be
+// enabled until layout types are supported in the native version.
+removeFilter(
+	'editor.BlockEdit',
+	'core/editor/layout/with-inspector-controls'
+);

package/src/hooks/letter-spacing.js

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

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/store/actions.js

@@ -555,8 +555,7 @@ export const insertBlocks = (
 		meta = initialPosition;
 		initialPosition = 0;
 		deprecated( "meta argument in wp.data.dispatch('core/block-editor')", {
-			since: '10.1',
-			plugin: 'Gutenberg',
+			since: '5.8',
 			hint: 'The meta argument is now the 6th argument of the function',
 		} );
 	}

package/src/store/defaults.js

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

package/src/store/defaults.native.js

@@ -6,14 +6,10 @@ import {
 	SETTINGS_DEFAULTS as SETTINGS,
 } from './defaults.js';
 
-const fontSizes = SETTINGS.fontSizes.map( ( fontSize ) => {
-	fontSize.sizePx = fontSize.size + 'px';
-	return fontSize;
-} );
-
 const SETTINGS_DEFAULTS = {
 	...SETTINGS,
-	fontSizes,
+	// 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__,

package/src/store/selectors.js

@@ -890,8 +890,8 @@ export function getBlockOrder( state, rootClientId ) {
  * Returns the index at which the block corresponding to the specified client
  * ID occurs within the block order, or `-1` if the block does not exist.
  *
- * @param {Object}  state        Editor state.
- * @param {string}  clientId     Block client ID.
+ * @param {Object} state    Editor state.
+ * @param {string} clientId Block client ID.
  *
  * @return {number} Index at which block exists in order.
  */
@@ -1844,10 +1844,15 @@ export const __experimentalGetAllowedBlocks = createSelector(
 /**
  * Returns the block to be directly inserted by the block appender.
  *
- * @param {Object}  state        Editor state.
- * @param {?string} rootClientId Optional root client ID of block list.
+ * @param    {Object}         state            Editor state.
+ * @param    {?string}        rootClientId     Optional root client ID of block list.
+ *
+ * @return {?WPDirectInsertBlock}              The block type to be directly inserted.
  *
- * @return {?Array} The block type to be directly inserted.
+ * @typedef {Object} WPDirectInsertBlock
+ * @property {string}         name             The type of block.
+ * @property {?Object}        attributes       Attributes to pass to the newly created block.
+ * @property {?Array<string>} attributesToCopy Attributes to be copied from adjecent blocks when inserted.
  */
 export const __experimentalGetDirectInsertBlock = createSelector(
 	( state, rootClientId = null ) => {

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,6 +55,7 @@
 @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)$/.test( type ) );
+	).filter( ( { type } ) => /^image\/(?:jpe?g|png|gif|webp)$/.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+)(r?e[m|x]|v[h|w|min|max]+|p[x|t|c]|[c|m]m|%|in|ch|Q|lh)$/
+			/^(0?[-.]?\d*\.?\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

@@ -6,6 +6,8 @@ import {
 	getPxFromCssUnit,
 } from '../parse-css-unit-to-px';
 
+jest.useRealTimers();
+
 describe( 'getPxFromCssUnit', () => {
 	// Absolute units
 	describe( 'absolute unites should return px values', () => {
@@ -52,6 +54,7 @@ describe( 'getPxFromCssUnit', () => {
 		const testData = [
 			[ '2em', '20px' ],
 			[ '2rem', '20px' ],
+			[ '1.125rem', '11px' ],
 			[ '20vw', '20px' ],
 			[ '20vh', '40px' ],
 			[ '20vmin', '20px' ],