@wordpress/block-editor 11.2.0 → 11.3.0

package/src/components/block-vertical-alignment-control/ui.js

@@ -7,7 +7,13 @@ import { ToolbarGroup, ToolbarDropdownMenu } from '@wordpress/components';
 /**
  * Internal dependencies
  */
-import { alignTop, alignCenter, alignBottom } from './icons';
+import {
+	alignTop,
+	alignCenter,
+	alignBottom,
+	alignStretch,
+	spaceBetween,
+} from './icons';
 
 const BLOCK_ALIGNMENTS_CONTROLS = {
 	top: {
@@ -22,15 +28,19 @@ const BLOCK_ALIGNMENTS_CONTROLS = {
 		icon: alignBottom,
 		title: _x( 'Align bottom', 'Block vertical alignment setting' ),
 	},
+	stretch: {
+		icon: alignStretch,
+		title: _x( 'Stretch to fill', 'Block vertical alignment setting' ),
+	},
+	'space-between': {
+		icon: spaceBetween,
+		title: _x( 'Space between', 'Block vertical alignment setting' ),
+	},
 };
 
 const DEFAULT_CONTROLS = [ 'top', 'center', 'bottom' ];
 const DEFAULT_CONTROL = 'top';
 
-const POPOVER_PROPS = {
-	variant: 'toolbar',
-};
-
 function BlockVerticalAlignmentUI( {
 	value,
 	onChange,
@@ -49,7 +59,7 @@ function BlockVerticalAlignmentUI( {
 	const UIComponent = isToolbar ? ToolbarGroup : ToolbarDropdownMenu;
 	const extraProps = isToolbar
 		? { isCollapsed }
-		: { popoverProps: { POPOVER_PROPS } };
+		: { popoverProps: { variant: 'toolbar' } };
 
 	return (
 		<UIComponent

package/src/components/color-style-selector/index.js

@@ -87,7 +87,7 @@ const BlockColorsStyleSelector = ( { children, ...other } ) => {
 
 	return (
 		<Dropdown
-			position="bottom right"
+			popoverProps={ { placement: 'bottom-start' } }
 			className="block-library-colors-selector"
 			contentClassName="block-library-colors-selector__popover"
 			renderToggle={ renderToggleComponent( other ) }

package/src/components/colors/test/with-colors.js

@@ -9,8 +9,6 @@ import userEvent from '@testing-library/user-event';
  */
 import { createCustomColorsHOC } from '../with-colors';
 
-jest.useFakeTimers();
-
 describe( 'createCustomColorsHOC', () => {
 	it( 'provides the wrapped component with color values and setter functions as props', () => {
 		const withCustomColors = createCustomColorsHOC( [
@@ -44,9 +42,7 @@ describe( 'createCustomColorsHOC', () => {
 	} );
 
 	it( 'setting the color to a value in the provided custom color array updated the backgroundColor attribute', async () => {
-		const user = userEvent.setup( {
-			advanceTimers: jest.advanceTimersByTime,
-		} );
+		const user = userEvent.setup();
 		const withCustomColors = createCustomColorsHOC( [
 			{ name: 'Red', slug: 'red', color: 'ff0000' },
 		] );
@@ -76,9 +72,7 @@ describe( 'createCustomColorsHOC', () => {
 	} );
 
 	it( 'setting the color to a value not in the provided custom color array updates customBackgroundColor attribute', async () => {
-		const user = userEvent.setup( {
-			advanceTimers: jest.advanceTimersByTime,
-		} );
+		const user = userEvent.setup();
 		const withCustomColors = createCustomColorsHOC( [
 			{ name: 'Red', slug: 'red', color: 'ff0000' },
 		] );

package/src/components/date-format-picker/index.js

@@ -9,8 +9,8 @@ import {
 	ExternalLink,
 	VisuallyHidden,
 	CustomSelectControl,
-	BaseControl,
 	ToggleControl,
+	__experimentalVStack as VStack,
 } from '@wordpress/components';
 
 // So that we can illustrate the different formats in the dropdown properly,
@@ -110,31 +110,30 @@ function NonDefaultControls( { format, onChange } ) {
 	);
 
 	return (
-		<>
-			<BaseControl className="block-editor-date-format-picker__custom-format-select-control">
-				<CustomSelectControl
-					__nextUnconstrainedWidth
-					label={ __( 'Choose a format' ) }
-					options={ [ ...suggestedOptions, customOption ] }
-					value={
-						isCustom
-							? customOption
-							: suggestedOptions.find(
-									( option ) => option.format === format
-							  ) ?? customOption
+		<VStack>
+			<CustomSelectControl
+				__nextUnconstrainedWidth
+				label={ __( 'Choose a format' ) }
+				options={ [ ...suggestedOptions, customOption ] }
+				value={
+					isCustom
+						? customOption
+						: suggestedOptions.find(
+								( option ) => option.format === format
+						  ) ?? customOption
+				}
+				onChange={ ( { selectedItem } ) => {
+					if ( selectedItem === customOption ) {
+						setIsCustom( true );
+					} else {
+						setIsCustom( false );
+						onChange( selectedItem.format );
 					}
-					onChange={ ( { selectedItem } ) => {
-						if ( selectedItem === customOption ) {
-							setIsCustom( true );
-						} else {
-							setIsCustom( false );
-							onChange( selectedItem.format );
-						}
-					} }
-				/>
-			</BaseControl>
+				} }
+			/>
 			{ isCustom && (
 				<TextControl
+					__nextHasNoMarginBottom
 					label={ __( 'Custom format' ) }
 					hideLabelFromVision
 					help={ createInterpolateElement(
@@ -155,6 +154,6 @@ function NonDefaultControls( { format, onChange } ) {
 					onChange={ ( value ) => onChange( value ) }
 				/>
 			) }
-		</>
+		</VStack>
 	);
 }

package/src/components/date-format-picker/style.scss

@@ -7,12 +7,6 @@
 	display: block;
 }
 
-.block-editor-date-format-picker__custom-format-select-control {
-	&.components-base-control {
-		margin-bottom: 0;
-	}
-}
-
 .block-editor-date-format-picker__custom-format-select-control__custom-option {
 	border-top: 1px solid $gray-300;
 

package/src/components/default-block-appender/content.scss

@@ -30,6 +30,23 @@
 	.components-drop-zone__content-icon {
 		display: none;
 	}
+
+	.block-editor-inserter__toggle.components-button.has-icon {
+		// Basic look
+		background: $gray-900;
+		border-radius: $radius-block-ui;
+		color: $white;
+		padding: 0;
+
+		// Special dimensions for this button.
+		min-width: $button-size-small;
+		height: $button-size-small;
+
+		&:hover {
+			color: $white;
+			background: var(--wp-admin-theme-color);
+		}
+	}
 }
 
 // The black plus that shows up on the right side of an empty paragraph block, or the initial appender
@@ -78,6 +95,7 @@
 		box-shadow: none;
 		height: $button-size-small;
 		width: $button-size-small;
+		min-width: $button-size-small;
 
 		// Hide by default, then we unhide it when the selected block is a direct ancestor.
 		display: none;

package/src/components/default-block-appender/test/index.js

@@ -9,8 +9,6 @@ import userEvent from '@testing-library/user-event';
  */
 import { DefaultBlockAppender, ZWNBSP } from '../';
 
-jest.useFakeTimers();
-
 describe( 'DefaultBlockAppender', () => {
 	it( 'should match snapshot', () => {
 		const onAppend = jest.fn();
@@ -23,9 +21,7 @@ describe( 'DefaultBlockAppender', () => {
 	} );
 
 	it( 'should append a default block when input focused', async () => {
-		const user = userEvent.setup( {
-			advanceTimers: jest.advanceTimersByTime,
-		} );
+		const user = userEvent.setup();
 		const onAppend = jest.fn();
 
 		const { container } = render(
@@ -44,9 +40,7 @@ describe( 'DefaultBlockAppender', () => {
 	} );
 
 	it( 'should optionally show without prompt', async () => {
-		const user = userEvent.setup( {
-			advanceTimers: jest.advanceTimersByTime,
-		} );
+		const user = userEvent.setup();
 		const onAppend = jest.fn();
 
 		const { container } = render(

package/src/components/font-family/index.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { isEmpty } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -25,7 +20,7 @@ export default function FontFamilyControl( {
 		fontFamilies = blockLevelFontFamilies;
 	}
 
-	if ( isEmpty( fontFamilies ) ) {
+	if ( ! fontFamilies || fontFamilies.length === 0 ) {
 		return null;
 	}
 

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

@@ -12,7 +12,7 @@ const DEFAULT_MINIMUM_FONT_SIZE_FACTOR = 0.75;
 const DEFAULT_MINIMUM_FONT_SIZE_LIMIT = '14px';
 
 /**
- * Computes a fluid font-size value that uses clamp(). A minimum and maxinmum
+ * Computes a fluid font-size value that uses clamp(). A minimum and maximum
  * font size OR a single font size can be specified.
  *
  * If a single font size is specified, it is scaled up and down by

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

@@ -56,7 +56,7 @@ export function getFontSizeObjectByValue( fontSizes, value ) {
  *
  * @param {string} fontSizeSlug Slug of the fontSize.
  *
- * @return {string} String with the class corresponding to the fontSize passed.
+ * @return {string | undefined} String with the class corresponding to the fontSize passed.
  *                  The class is generated by appending 'has-' followed by fontSizeSlug in kebabCase and ending with '-font-size'.
  */
 export function getFontSizeClass( fontSizeSlug ) {

package/src/components/global-styles/README.md

@@ -0,0 +1,77 @@
+# Global Styles
+
+This folder contains all the necessary APIs to manipulate the global styles data. It can be potentially extracted to its own package.
+
+# Available public APIs
+
+## useGlobalStylesReset
+
+A React hook used to retrieve whether the Global Styles have been edited and a callback to reset to the default theme values.
+
+```js
+import { useGlobalStylesReset } from '@wordpress/block-editor';
+
+function MyComponent() {
+	const [ canReset, reset ] = useGlobalStylesReset();
+
+	return canReset 
+		? <Button onClick={ () => reset() }>Reset</Button> 
+		: null;
+}
+```
+
+## useGlobalStylesOutput
+
+A React hook used to retrieve the styles array and settings to provide for block editor instances based on the current global styles.
+
+```js
+import { useGlobalStylesOutput, BlockEditorProvider, BlockList } from '@wordpress/block-editor';
+
+function MyComponent() {
+	const [ styles, settings ] = useGlobalStylesOutput();
+
+	return <BlockEditorProvider settings={{
+		styles,
+		__experimentalFeatures: settings
+	}}>
+		<BlockList />
+	</BlockEditorProvider>
+}
+```
+
+## useGlobalStyle
+
+A react hook used to retrieve the style applied to a given context.
+
+```js
+import { useGlobalStyle } from '@wordpress/block-editor';
+
+function MyComponent() {
+	// Text color for the site root.
+	const [ color, setColor ] = useGlobalStyle( 'color.text' ); 
+
+	// The user modified color for the core paragraph block.
+	const [ pColor, setPColor ] = useGlobalStyle( 'color.text', 'core/paragraph', 'user' ); 
+
+	return "Something";
+}
+```
+
+## useGlobalSetting
+
+A react hook used to retrieve the setting applied to a given context.
+
+```js
+import { useGlobalSetting } from '@wordpress/block-editor';
+
+function MyComponent() {
+	// The theme color palette.
+	const [ colorPalette, setColorPalette ] = useGlobalSetting( 'color.palette.theme' ); 
+
+	// The theme color palette for the paragraph block, ignoring user changes.
+	// If the palette is not defined for the paragraph block, the root one is returned.
+	const [ pColor, setPColor ] = useGlobalSetting( 'color.palette.theme', 'core/paragraph', 'base' ); 
+
+	return "Something";
+}
+```

package/src/components/global-styles/context.js

@@ -0,0 +1,15 @@
+/**
+ * WordPress dependencies
+ */
+import { createContext } from '@wordpress/element';
+
+export const DEFAULT_GLOBAL_STYLES_CONTEXT = {
+	user: {},
+	base: {},
+	merged: {},
+	setUserConfig: () => {},
+};
+
+export const GlobalStylesContext = createContext(
+	DEFAULT_GLOBAL_STYLES_CONTEXT
+);

package/src/components/global-styles/hooks.js

@@ -0,0 +1,145 @@
+/**
+ * External dependencies
+ */
+import fastDeepEqual from 'fast-deep-equal/es6';
+import { get, set } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { useContext, useCallback } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { getValueFromVariable, getPresetVariableFromValue } from './utils';
+import { GlobalStylesContext } from './context';
+
+const EMPTY_CONFIG = { settings: {}, styles: {} };
+
+export const useGlobalStylesReset = () => {
+	const { user: config, setUserConfig } = useContext( GlobalStylesContext );
+	const canReset = !! config && ! fastDeepEqual( config, EMPTY_CONFIG );
+	return [
+		canReset,
+		useCallback(
+			() => setUserConfig( () => EMPTY_CONFIG ),
+			[ setUserConfig ]
+		),
+	];
+};
+
+export function useGlobalSetting( path, blockName, source = 'all' ) {
+	const {
+		merged: mergedConfig,
+		base: baseConfig,
+		user: userConfig,
+		setUserConfig,
+	} = useContext( GlobalStylesContext );
+
+	const fullPath = ! blockName
+		? `settings.${ path }`
+		: `settings.blocks.${ blockName }.${ path }`;
+
+	const setSetting = ( newValue ) => {
+		setUserConfig( ( currentConfig ) => {
+			// Deep clone `currentConfig` to avoid mutating it later.
+			const newUserConfig = JSON.parse( JSON.stringify( currentConfig ) );
+			set( newUserConfig, fullPath, newValue );
+
+			return newUserConfig;
+		} );
+	};
+
+	const getSettingValueForContext = ( name ) => {
+		const currentPath = ! name
+			? `settings.${ path }`
+			: `settings.blocks.${ name }.${ path }`;
+
+		let result;
+		switch ( source ) {
+			case 'all':
+				result = get( mergedConfig, currentPath );
+				break;
+			case 'user':
+				result = get( userConfig, currentPath );
+				break;
+			case 'base':
+				result = get( baseConfig, currentPath );
+				break;
+			default:
+				throw 'Unsupported source';
+		}
+
+		return result;
+	};
+
+	// Unlike styles settings get inherited from top level settings.
+	const resultWithFallback =
+		getSettingValueForContext( blockName ) ?? getSettingValueForContext();
+
+	return [ resultWithFallback, setSetting ];
+}
+
+export function useGlobalStyle( path, blockName, source = 'all' ) {
+	const {
+		merged: mergedConfig,
+		base: baseConfig,
+		user: userConfig,
+		setUserConfig,
+	} = useContext( GlobalStylesContext );
+	const finalPath = ! blockName
+		? `styles.${ path }`
+		: `styles.blocks.${ blockName }.${ path }`;
+
+	const setStyle = ( newValue ) => {
+		setUserConfig( ( currentConfig ) => {
+			// Deep clone `currentConfig` to avoid mutating it later.
+			const newUserConfig = JSON.parse( JSON.stringify( currentConfig ) );
+			set(
+				newUserConfig,
+				finalPath,
+				getPresetVariableFromValue(
+					mergedConfig.settings,
+					blockName,
+					path,
+					newValue
+				)
+			);
+			return newUserConfig;
+		} );
+	};
+
+	let result;
+	switch ( source ) {
+		case 'all':
+			result = getValueFromVariable(
+				mergedConfig,
+				blockName,
+				// The stlyes.css path is allowed to be empty, so don't revert to base if undefined.
+				finalPath === 'styles.css'
+					? get( userConfig, finalPath )
+					: get( userConfig, finalPath ) ??
+							get( baseConfig, finalPath )
+			);
+			break;
+		case 'user':
+			result = getValueFromVariable(
+				mergedConfig,
+				blockName,
+				get( userConfig, finalPath )
+			);
+			break;
+		case 'base':
+			result = getValueFromVariable(
+				baseConfig,
+				blockName,
+				get( baseConfig, finalPath )
+			);
+			break;
+		default:
+			throw 'Unsupported source';
+	}
+
+	return [ result, setStyle ];
+}

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

@@ -0,0 +1,7 @@
+export {
+	useGlobalStylesReset,
+	useGlobalSetting,
+	useGlobalStyle,
+} from './hooks';
+export { useGlobalStylesOutput } from './use-global-styles-output';
+export { GlobalStylesContext } from './context';