@wordpress/block-editor 12.5.0 → 12.7.0

package/src/components/block-variation-picker/index.native.js

@@ -12,12 +12,9 @@ import {
 /**
  * WordPress dependencies
  */
-import { withSelect, useDispatch } from '@wordpress/data';
-import { compose, usePreferredColorSchemeStyle } from '@wordpress/compose';
-import {
-	createBlocksFromInnerBlocksTemplate,
-	store as blocksStore,
-} from '@wordpress/blocks';
+import { useDispatch } from '@wordpress/data';
+import { usePreferredColorSchemeStyle } from '@wordpress/compose';
+import { createBlocksFromInnerBlocksTemplate } from '@wordpress/blocks';
 import { __ } from '@wordpress/i18n';
 import {
 	PanelBody,
@@ -26,7 +23,6 @@ import {
 	InserterButton,
 } from '@wordpress/components';
 import { Icon, close } from '@wordpress/icons';
-import { useMemo } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -45,28 +41,25 @@ function BlockVariationPicker( { isVisible, onClose, clientId, variations } ) {
 		styles.cancelButtonDark
 	);
 
-	const leftButton = useMemo(
-		() => (
-			<TouchableWithoutFeedback onPress={ onClose } hitSlop={ hitSlop }>
-				<View>
-					{ isIOS ? (
-						<Text
-							style={ cancelButtonStyle }
-							maxFontSizeMultiplier={ 2 }
-						>
-							{ __( 'Cancel' ) }
-						</Text>
-					) : (
-						<Icon
-							icon={ close }
-							size={ 24 }
-							style={ styles.closeIcon }
-						/>
-					) }
-				</View>
-			</TouchableWithoutFeedback>
-		),
-		[ onClose, cancelButtonStyle ]
+	const leftButton = (
+		<TouchableWithoutFeedback onPress={ onClose } hitSlop={ hitSlop }>
+			<View>
+				{ isIOS ? (
+					<Text
+						style={ cancelButtonStyle }
+						maxFontSizeMultiplier={ 2 }
+					>
+						{ __( 'Cancel' ) }
+					</Text>
+				) : (
+					<Icon
+						icon={ close }
+						size={ 24 }
+						style={ styles.closeIcon }
+					/>
+				) }
+			</View>
+		</TouchableWithoutFeedback>
 	);
 
 	const onVariationSelect = ( variation ) => {
@@ -77,51 +70,38 @@ function BlockVariationPicker( { isVisible, onClose, clientId, variations } ) {
 		onClose();
 	};
 
-	return useMemo(
-		() => (
-			<BottomSheet
-				isVisible={ isVisible }
-				onClose={ onClose }
-				title={ __( 'Select a layout' ) }
-				contentStyle={ styles.contentStyle }
-				leftButton={ leftButton }
-				testID="block-variation-modal"
+	return (
+		<BottomSheet
+			isVisible={ isVisible }
+			onClose={ onClose }
+			title={ __( 'Select a layout' ) }
+			contentStyle={ styles.contentStyle }
+			leftButton={ leftButton }
+			testID="block-variation-modal"
+		>
+			<ScrollView
+				horizontal
+				showsHorizontalScrollIndicator={ false }
+				contentContainerStyle={ styles.contentContainerStyle }
+				style={ styles.containerStyle }
 			>
-				<ScrollView
-					horizontal
-					showsHorizontalScrollIndicator={ false }
-					contentContainerStyle={ styles.contentContainerStyle }
-					style={ styles.containerStyle }
-				>
-					{ variations.map( ( v ) => {
-						return (
-							<InserterButton
-								item={ v }
-								key={ v.name }
-								onSelect={ () => onVariationSelect( v ) }
-							/>
-						);
-					} ) }
-				</ScrollView>
-				<PanelBody>
-					<FooterMessageControl
-						label={ __(
-							'Note: Column layout may vary between themes and screen sizes'
-						) }
+				{ variations.map( ( v ) => (
+					<InserterButton
+						item={ v }
+						key={ v.name }
+						onSelect={ () => onVariationSelect( v ) }
 					/>
-				</PanelBody>
-			</BottomSheet>
-		),
-		[ variations, isVisible, onClose ]
+				) ) }
+			</ScrollView>
+			<PanelBody>
+				<FooterMessageControl
+					label={ __(
+						'Note: Column layout may vary between themes and screen sizes'
+					) }
+				/>
+			</PanelBody>
+		</BottomSheet>
 	);
 }
 
-export default compose(
-	withSelect( ( select, {} ) => {
-		const { getBlockVariations } = select( blocksStore );
-
-		return {
-			date: getBlockVariations( 'core/columns', 'block' ),
-		};
-	} )
-)( BlockVariationPicker );
+export default BlockVariationPicker;

package/src/components/button-block-appender/styles.native.scss

@@ -3,8 +3,8 @@
 	align-items: center;
 	justify-content: center;
 	padding: 9px;
-	margin-left: 0;
-	margin-right: 0;
+	margin-left: $grid-unit;
+	margin-right: $grid-unit;
 	border-radius: 4px;
 }
 

package/src/components/caption/README.md

@@ -0,0 +1,49 @@
+## Caption
+
+The `Caption` component renders the [caption part](https://wordpress.org/documentation/article/gallery-block/#caption) of some blocks (image, gallery...).
+
+This component encapsulates the "caption" behaviour and styles over a `<RichText>` so it can be used in other components such as the `BlockCaption` component.
+
+## Table of contents
+
+1. [Development guidelines](#development-guidelines)
+2. [Related components](#related-components)
+
+## Development guidelines
+
+### Usage
+
+Renders a Caption area:
+
+```jsx
+import { Caption } from '@wordpress/block-editor';
+const BlockCaption = ( {
+	onBlur,
+	onChange,
+	onFocus,
+	isSelected,
+	shouldDisplay,
+	text,
+	insertBlocksAfter,
+} ) => (
+	<View >
+		<Caption
+			isSelected={ isSelected }
+			onBlur={ onBlur }
+			onChange={ onChange }
+			onFocus={ onFocus }
+			shouldDisplay={ shouldDisplay }
+			value={ text }
+			insertBlocksAfter={ insertBlocksAfter }
+		/>
+	</View>
+);
+```
+
+### Props
+
+The properties `isSelected`, `onBlur`, `onChange`, `onFocus`, `shouldDisplay`, `value`, `insertBlocksAfter` of this component are passed directly to their related props of its inner `<RichText>` component ([see detailed info about the RichText component's props](https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/rich-text/README.md)).
+
+## Related components
+
+Caption components is mostly used by the [`BlockCaption`](https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/block-caption) component.

package/src/components/color-palette/test/__snapshots__/control.js.snap

@@ -172,7 +172,7 @@ exports[`ColorPaletteControl matches the snapshot 1`] = `
                   <button
                     aria-expanded="false"
                     aria-haspopup="true"
-                    aria-label="Custom color picker. The currently selected color is called "red" and has a value of "#-f-0-0"."
+                    aria-label="Custom color picker. The currently selected color is called "red" and has a value of "#f00"."
                     class="components-color-palette__custom-color-button"
                     style="background: rgb(255, 0, 0);"
                   />

package/src/components/colors-gradients/control.js

@@ -6,6 +6,7 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
+import { __ } from '@wordpress/i18n';
 import {
 	BaseControl,
 	__experimentalVStack as VStack,
@@ -28,12 +29,12 @@ const colorsAndGradientKeys = [
 
 const TAB_COLOR = {
 	name: 'color',
-	title: 'Solid',
+	title: __( 'Solid' ),
 	value: 'color',
 };
 const TAB_GRADIENT = {
 	name: 'gradient',
-	title: 'Gradient',
+	title: __( 'Gradient' ),
 	value: 'gradient',
 };
 

package/src/components/editor-styles/index.js

@@ -43,13 +43,13 @@ function useDarkThemeBodyClassName( styles ) {
 				body.appendChild( tempCanvas );
 
 				backgroundColor = defaultView
-					.getComputedStyle( tempCanvas, null )
+					?.getComputedStyle( tempCanvas, null )
 					.getPropertyValue( 'background-color' );
 
 				body.removeChild( tempCanvas );
 			} else {
 				backgroundColor = defaultView
-					.getComputedStyle( canvas, null )
+					?.getComputedStyle( canvas, null )
 					.getPropertyValue( 'background-color' );
 			}
 			const colordBackgroundColor = colord( backgroundColor );

package/src/components/font-sizes/fluid-utils.js

@@ -32,8 +32,8 @@ const DEFAULT_MINIMUM_FONT_SIZE_LIMIT = '14px';
  * ```
  *
  * @param {Object}        args
- * @param {?string}       args.minimumViewPortWidth Minimum viewport size from which type will have fluidity. Optional if fontSize is specified.
- * @param {?string}       args.maximumViewPortWidth Maximum size up to which type will have fluidity. Optional if fontSize is specified.
+ * @param {?string}       args.minimumViewportWidth Minimum viewport size from which type will have fluidity. Optional if fontSize is specified.
+ * @param {?string}       args.maximumViewportWidth Maximum size up to which type will have fluidity. Optional if fontSize is specified.
  * @param {string|number} [args.fontSize]           Size to derive maximumFontSize and minimumFontSize from, if necessary. Optional if minimumFontSize and maximumFontSize are specified.
  * @param {?string}       args.maximumFontSize      Maximum font size for any clamp() calculation. Optional.
  * @param {?string}       args.minimumFontSize      Minimum font size for any clamp() calculation. Optional.
@@ -46,8 +46,8 @@ export function getComputedFluidTypographyValue( {
 	minimumFontSize,
 	maximumFontSize,
 	fontSize,
-	minimumViewPortWidth = DEFAULT_MINIMUM_VIEWPORT_WIDTH,
-	maximumViewPortWidth = DEFAULT_MAXIMUM_VIEWPORT_WIDTH,
+	minimumViewportWidth = DEFAULT_MINIMUM_VIEWPORT_WIDTH,
+	maximumViewportWidth = DEFAULT_MAXIMUM_VIEWPORT_WIDTH,
 	scaleFactor = DEFAULT_SCALE_FACTOR,
 	minimumFontSizeLimit,
 } ) {
@@ -163,19 +163,19 @@ export function getComputedFluidTypographyValue( {
 	} );
 
 	// Viewport widths defined for fluid typography. Normalize units
-	const maximumViewPortWidthParsed = getTypographyValueAndUnit(
-		maximumViewPortWidth,
+	const maximumViewportWidthParsed = getTypographyValueAndUnit(
+		maximumViewportWidth,
 		{ coerceTo: fontSizeUnit }
 	);
-	const minumumViewPortWidthParsed = getTypographyValueAndUnit(
-		minimumViewPortWidth,
+	const minimumViewportWidthParsed = getTypographyValueAndUnit(
+		minimumViewportWidth,
 		{ coerceTo: fontSizeUnit }
 	);
 
 	// Protect against unsupported units.
 	if (
-		! maximumViewPortWidthParsed ||
-		! minumumViewPortWidthParsed ||
+		! maximumViewportWidthParsed ||
+		! minimumViewportWidthParsed ||
 		! minimumFontSizeRem
 	) {
 		return null;
@@ -183,23 +183,23 @@ export function getComputedFluidTypographyValue( {
 
 	// Build CSS rule.
 	// Borrowed from https://websemantics.uk/tools/responsive-font-calculator/.
-	const minViewPortWidthOffsetValue = roundToPrecision(
-		minumumViewPortWidthParsed.value / 100,
+	const minViewportWidthOffsetValue = roundToPrecision(
+		minimumViewportWidthParsed.value / 100,
 		3
 	);
 
-	const viewPortWidthOffset =
-		roundToPrecision( minViewPortWidthOffsetValue, 3 ) + fontSizeUnit;
+	const viewportWidthOffset =
+		roundToPrecision( minViewportWidthOffsetValue, 3 ) + fontSizeUnit;
 	const linearFactor =
 		100 *
 		( ( maximumFontSizeParsed.value - minimumFontSizeParsed.value ) /
-			( maximumViewPortWidthParsed.value -
-				minumumViewPortWidthParsed.value ) );
+			( maximumViewportWidthParsed.value -
+				minimumViewportWidthParsed.value ) );
 	const linearFactorScaled = roundToPrecision(
 		( linearFactor || 1 ) * scaleFactor,
 		3
 	);
-	const fluidTargetFontSize = `${ minimumFontSizeRem.value }${ minimumFontSizeRem.unit } + ((1vw - ${ viewPortWidthOffset }) * ${ linearFactorScaled })`;
+	const fluidTargetFontSize = `${ minimumFontSizeRem.value }${ minimumFontSizeRem.unit } + ((1vw - ${ viewportWidthOffset }) * ${ linearFactorScaled })`;
 
 	return `clamp(${ minimumFontSize }, ${ fluidTargetFontSize }, ${ maximumFontSize })`;
 }

package/src/components/font-sizes/test/fluid-utils.js

@@ -56,8 +56,8 @@ describe( 'getComputedFluidTypographyValue()', () => {
 	it( 'should return a fluid font size when given a min and max viewport width', () => {
 		const fluidTypographyValues = getComputedFluidTypographyValue( {
 			fontSize: '30px',
-			minimumViewPortWidth: '500px',
-			maximumViewPortWidth: '1000px',
+			minimumViewportWidth: '500px',
+			maximumViewportWidth: '1000px',
 		} );
 		expect( fluidTypographyValues ).toBe(
 			'clamp(18.959px, 1.185rem + ((1vw - 5px) * 2.208), 30px)'
@@ -74,18 +74,18 @@ describe( 'getComputedFluidTypographyValue()', () => {
 		);
 	} );
 
-	it( 'should return null when maximumViewPortWidth is not a supported value or unit', () => {
+	it( 'should return null when maximumViewportWidth is not a supported value or unit', () => {
 		const fluidTypographyValues = getComputedFluidTypographyValue( {
 			fontSize: '30px',
-			maximumViewPortWidth: 'min(calc(100% - 60px), 1200px)',
+			maximumViewportWidth: 'min(calc(100% - 60px), 1200px)',
 		} );
 		expect( fluidTypographyValues ).toBeNull();
 	} );
 
-	it( 'should return `null` font size when minimumViewPortWidth is not a supported value or unit', () => {
+	it( 'should return `null` font size when minimumViewportWidth is not a supported value or unit', () => {
 		const fluidTypographyValues = getComputedFluidTypographyValue( {
 			fontSize: '33px',
-			minimumViewPortWidth: 'calc(100% - 60px)',
+			minimumViewportWidth: 'calc(100% - 60px)',
 		} );
 		expect( fluidTypographyValues ).toBeNull();
 	} );

package/src/components/global-styles/behaviors-panel.js

@@ -0,0 +1,71 @@
+/**
+ * WordPress dependencies
+ */
+import { SelectControl } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+export default function ( { onChange, value, behaviors } ) {
+	const defaultBehaviors = {
+		default: {
+			value: 'default',
+			label: __( 'Default' ),
+		},
+		noBehaviors: {
+			value: '',
+			label: __( 'No behaviors' ),
+		},
+	};
+
+	const behaviorsOptions = Object.entries( behaviors ).map(
+		( [ behaviorName ] ) => ( {
+			value: behaviorName,
+			// Capitalize the first letter of the behavior name.
+			label: `${ behaviorName.charAt( 0 ).toUpperCase() }${ behaviorName
+				.slice( 1 )
+				.toLowerCase() }`,
+		} )
+	);
+
+	const options = [
+		...Object.values( defaultBehaviors ),
+		...behaviorsOptions,
+	];
+
+	const animations = [
+		{
+			value: 'zoom',
+			label: __( 'Zoom' ),
+		},
+		{
+			value: 'fade',
+			label: __( 'Fade' ),
+		},
+	];
+	return (
+		<div style={ { marginTop: '2rem' } }>
+			<SelectControl
+				label={ __( 'Behaviors' ) }
+				// At the moment we are only supporting one behavior (Lightbox)
+				value={ value }
+				options={ options }
+				onChange={ onChange }
+				hideCancelButton={ true }
+				size="__unstable-large"
+			/>
+			{ value === 'lightbox' && (
+				<SelectControl
+					label={ __( 'Animation' ) }
+					value={
+						behaviors?.lightbox.animation
+							? behaviors?.lightbox.animation
+							: ''
+					}
+					options={ animations }
+					onChange={ onChange }
+					hideCancelButton={ false }
+					size="__unstable-large"
+				/>
+			) }
+		</div>
+	);
+}

package/src/components/global-styles/color-panel.js

@@ -328,22 +328,6 @@ export default function ColorPanel( {
 			: gradientValue;
 	};
 
-	// Text Color
-	const showTextPanel = useHasTextPanel( settings );
-	const textColor = decodeValue( inheritedValue?.color?.text );
-	const userTextColor = decodeValue( value?.color?.text );
-	const hasTextColor = () => !! userTextColor;
-	const setTextColor = ( newColor ) => {
-		onChange(
-			setImmutably(
-				value,
-				[ 'color', 'text' ],
-				encodeColorValue( newColor )
-			)
-		);
-	};
-	const resetTextColor = () => setTextColor( undefined );
-
 	// BackgroundColor
 	const showBackgroundPanel = useHasBackgroundPanel( settings );
 	const backgroundColor = decodeValue( inheritedValue?.color?.background );
@@ -424,6 +408,29 @@ export default function ColorPanel( {
 		onChange( newValue );
 	};
 
+	// Text Color
+	const showTextPanel = useHasTextPanel( settings );
+	const textColor = decodeValue( inheritedValue?.color?.text );
+	const userTextColor = decodeValue( value?.color?.text );
+	const hasTextColor = () => !! userTextColor;
+	const setTextColor = ( newColor ) => {
+		let changedObject = setImmutably(
+			value,
+			[ 'color', 'text' ],
+			encodeColorValue( newColor )
+		);
+		if ( textColor === linkColor ) {
+			changedObject = setImmutably(
+				changedObject,
+				[ 'elements', 'link', 'color', 'text' ],
+				encodeColorValue( newColor )
+			);
+		}
+
+		onChange( changedObject );
+	};
+	const resetTextColor = () => setTextColor( undefined );
+
 	// Elements
 	const elements = [
 		{

package/src/components/global-styles/dimensions-panel.js

@@ -207,18 +207,24 @@ export default function DimensionsPanel( {
 	// in global styles but not in block inspector.
 	includeLayoutControls = false,
 } ) {
+	const { dimensions, spacing } = settings;
+
 	const decodeValue = ( rawValue ) => {
 		if ( rawValue && typeof rawValue === 'object' ) {
 			return Object.keys( rawValue ).reduce( ( acc, key ) => {
 				acc[ key ] = getValueFromVariable(
-					{ settings },
+					{ settings: { dimensions, spacing } },
 					'',
 					rawValue[ key ]
 				);
 				return acc;
 			}, {} );
 		}
-		return getValueFromVariable( { settings }, '', rawValue );
+		return getValueFromVariable(
+			{ settings: { dimensions, spacing } },
+			'',
+			rawValue
+		);
 	};
 
 	const showSpacingPresetsControl = useHasSpacingPresets( settings );

package/src/components/global-styles/get-block-css-selector.js

@@ -1,12 +1,8 @@
-/**
- * External dependencies
- */
-import { get } from 'lodash';
-
 /**
  * Internal dependencies
  */
 import { scopeSelector } from './utils';
+import { getValueFromObjectPath } from '../../utils/object';
 
 /**
  * Determine the CSS selector for the block type and target provided, returning
@@ -69,15 +65,15 @@ export function getBlockCSSSelector(
 		if ( hasSelectors ) {
 			// Get selector from either `feature.root` or shorthand path.
 			const featureSelector =
-				get( selectors, `${ path }.root`, null ) ||
-				get( selectors, path, null );
+				getValueFromObjectPath( selectors, `${ path }.root`, null ) ||
+				getValueFromObjectPath( selectors, path, null );
 
 			// Return feature selector if found or any available fallback.
 			return featureSelector || fallbackSelector;
 		}
 
 		// Try getting old experimental supports selector value.
-		const featureSelector = get(
+		const featureSelector = getValueFromObjectPath(
 			supports,
 			`${ path }.__experimentalSelector`,
 			null
@@ -98,7 +94,7 @@ export function getBlockCSSSelector(
 
 	// Use selectors API if available.
 	if ( hasSelectors ) {
-		subfeatureSelector = get( selectors, path, null );
+		subfeatureSelector = getValueFromObjectPath( selectors, path, null );
 	}
 
 	// Only return if we have a subfeature selector.