@wordpress/block-editor 11.0.0 → 11.2.0

package/src/components/warning/test/index.js

@@ -9,6 +9,8 @@ import userEvent from '@testing-library/user-event';
  */
 import Warning from '../index';
 
+jest.useFakeTimers();
+
 describe( 'Warning', () => {
 	it( 'should match snapshot', () => {
 		const { container } = render( <Warning>error</Warning> );

package/src/components/writing-flow/index.js

@@ -44,7 +44,7 @@ export function useWritingFlow() {
 			useArrowNav(),
 			useRefEffect(
 				( node ) => {
-					node.tabIndex = -1;
+					node.tabIndex = 0;
 					node.contentEditable = hasMultiSelection;
 
 					if ( ! hasMultiSelection ) {

package/src/components/writing-flow/use-arrow-nav.js

@@ -167,6 +167,12 @@ export default function useArrowNav() {
 		}
 
 		function onKeyDown( event ) {
+			// Abort if navigation has already been handled (e.g. RichText
+			// inline boundaries).
+			if ( event.defaultPrevented ) {
+				return;
+			}
+
 			const { keyCode, target, shiftKey, ctrlKey, altKey, metaKey } =
 				event;
 			const isUp = keyCode === UP;
@@ -182,24 +188,20 @@ export default function useArrowNav() {
 			const { ownerDocument } = node;
 			const { defaultView } = ownerDocument;
 
+			if ( ! isNav ) {
+				return;
+			}
+
 			// If there is a multi-selection, the arrow keys should collapse the
 			// selection to the start or end of the selection.
 			if ( hasMultiSelection() ) {
-				// Only handle if we have a full selection (not a native partial
-				// selection).
-				if ( ! __unstableIsFullySelected() ) {
-					return;
-				}
-
-				if ( event.defaultPrevented ) {
-					return;
-				}
-
-				if ( ! isNav ) {
+				if ( shiftKey ) {
 					return;
 				}
 
-				if ( shiftKey ) {
+				// Only handle if we have a full selection (not a native partial
+				// selection).
+				if ( ! __unstableIsFullySelected() ) {
 					return;
 				}
 
@@ -214,6 +216,12 @@ export default function useArrowNav() {
 				return;
 			}
 
+			// Abort if our current target is not a candidate for navigation
+			// (e.g. preserve native input behaviors).
+			if ( ! isNavigationCandidate( target, keyCode, hasModifier ) ) {
+				return;
+			}
+
 			// When presing any key other than up or down, the initial vertical
 			// position must ALWAYS be reset. The vertical position is saved so
 			// it can be restored as well as possible on sebsequent vertical
@@ -227,22 +235,6 @@ export default function useArrowNav() {
 				verticalRect = computeCaretRect( defaultView );
 			}
 
-			// Abort if navigation has already been handled (e.g. RichText
-			// inline boundaries).
-			if ( event.defaultPrevented ) {
-				return;
-			}
-
-			if ( ! isNav ) {
-				return;
-			}
-
-			// Abort if our current target is not a candidate for navigation
-			// (e.g. preserve native input behaviors).
-			if ( ! isNavigationCandidate( target, keyCode, hasModifier ) ) {
-				return;
-			}
-
 			// In the case of RTL scripts, right means previous and left means
 			// next, which is the exact reverse of LTR.
 			const isReverseDir = isRTL( target ) ? ! isReverse : isReverse;

package/src/content.scss

@@ -3,6 +3,7 @@
 @import "./components/block-content-overlay/content.scss";
 @import "./components/block-draggable/content.scss";
 @import "./components/block-preview/content.scss";
+@import "./components/button-block-appender/content.scss";
 @import "./components/default-block-appender/content.scss";
 @import "./components/inner-blocks/content.scss";
 @import "./components/media-placeholder/content.scss";

package/src/hooks/border.js

@@ -274,7 +274,6 @@ export function BorderPanel( props ) {
 						popoverPlacement="left-start"
 						size="__unstable-large"
 						value={ hydratedBorder }
-						__experimentalHasMultipleOrigins={ true }
 						__experimentalIsRenderedInSidebar={ true }
 					/>
 				</ToolsPanelItem>

package/src/hooks/color-panel.js

@@ -81,7 +81,6 @@ export default function ColorPanel( {
 				panelId={ clientId }
 				settings={ settings }
 				__experimentalIsItemGroup={ false }
-				__experimentalHasMultipleOrigins
 				__experimentalIsRenderedInSidebar
 				{ ...colorGradientSettings }
 			/>

package/src/hooks/color.js

@@ -522,8 +522,6 @@ export function ColorEdit( props ) {
 									allSolids,
 									style?.elements?.link?.color?.text
 								),
-								clearable:
-									!! style?.elements?.link?.color?.text,
 								isShownByDefault: defaultColorControls?.link,
 								resetAllFilter: resetAllLinkFilter,
 							},

package/src/hooks/font-family.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { find, kebabCase } from 'lodash';
+import { kebabCase } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -111,14 +111,12 @@ export function FontFamilyEdit( {
 } ) {
 	const fontFamilies = useSetting( 'typography.fontFamilies' );
 
-	const value = find(
-		fontFamilies,
+	const value = fontFamilies?.find(
 		( { slug } ) => fontFamily === slug
 	)?.fontFamily;
 
 	function onChange( newValue ) {
-		const predefinedFontFamily = find(
-			fontFamilies,
+		const predefinedFontFamily = fontFamilies?.find(
 			( { fontFamily: f } ) => f === newValue
 		);
 		setAttributes( {

package/src/hooks/font-size.js

@@ -324,13 +324,22 @@ function addEditPropsForFluidCustomFontSizes( blockType ) {
 		// BlockListContext.Provider. If we set fontSize using editor.
 		// BlockListBlock instead of using getEditWrapperProps then the value is
 		// clobbered when the core/style/addEditProps filter runs.
-		const isFluidTypographyEnabled =
-			!! select( blockEditorStore ).getSettings().__experimentalFeatures
+		const fluidTypographyConfig =
+			select( blockEditorStore ).getSettings().__experimentalFeatures
 				?.typography?.fluid;
 
+		const fluidTypographySettings =
+			typeof fluidTypographyConfig === 'object'
+				? fluidTypographyConfig
+				: {};
+
 		const newFontSize =
-			fontSize && isFluidTypographyEnabled
-				? getComputedFluidTypographyValue( { fontSize } )
+			fontSize && !! fluidTypographyConfig
+				? getComputedFluidTypographyValue( {
+						fontSize,
+						minimumFontSizeLimit:
+							fluidTypographySettings?.minFontSize,
+				  } )
 				: null;
 
 		if ( newFontSize === null ) {

package/src/hooks/index.js

@@ -14,6 +14,7 @@ import './color';
 import './duotone';
 import './font-size';
 import './border';
+import './position';
 import './layout';
 import './content-lock-ui';
 import './metadata';

package/src/hooks/metadata.js

@@ -27,8 +27,7 @@ export function addMetaAttribute( blockTypeSettings ) {
 
 	const supportsBlockNaming = hasBlockMetadataSupport(
 		blockTypeSettings,
-		'name',
-		false
+		'name'
 	);
 
 	if ( supportsBlockNaming ) {

package/src/hooks/position.js

@@ -0,0 +1,375 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import { __, sprintf } from '@wordpress/i18n';
+import { getBlockSupport, hasBlockSupport } from '@wordpress/blocks';
+import { BaseControl, CustomSelectControl } from '@wordpress/components';
+import { createHigherOrderComponent, useInstanceId } from '@wordpress/compose';
+import {
+	useContext,
+	useMemo,
+	createPortal,
+	Platform,
+} from '@wordpress/element';
+import { addFilter } from '@wordpress/hooks';
+
+/**
+ * Internal dependencies
+ */
+import BlockList from '../components/block-list';
+import useSetting from '../components/use-setting';
+import InspectorControls from '../components/inspector-controls';
+import { cleanEmptyObject } from './utils';
+
+const POSITION_SUPPORT_KEY = 'position';
+
+const OPTION_CLASSNAME =
+	'block-editor-hooks__position-selection__select-control__option';
+
+const DEFAULT_OPTION = {
+	key: 'default',
+	value: '',
+	name: __( 'Default' ),
+	className: OPTION_CLASSNAME,
+};
+
+const STICKY_OPTION = {
+	key: 'sticky',
+	value: 'sticky',
+	name: __( 'Sticky' ),
+	className: OPTION_CLASSNAME,
+	__experimentalHint: __(
+		'The block will stick to the top of the window instead of scrolling.'
+	),
+};
+
+const FIXED_OPTION = {
+	key: 'fixed',
+	value: 'fixed',
+	name: __( 'Fixed' ),
+	className: OPTION_CLASSNAME,
+	__experimentalHint: __(
+		'The block will not move when the page is scrolled.'
+	),
+};
+
+const POSITION_SIDES = [ 'top', 'right', 'bottom', 'left' ];
+const VALID_POSITION_TYPES = [ 'sticky', 'fixed' ];
+
+/**
+ * Get calculated position CSS.
+ *
+ * @param {Object} props          Component props.
+ * @param {string} props.selector Selector to use.
+ * @param {Object} props.style    Style object.
+ * @return {string} The generated CSS rules.
+ */
+export function getPositionCSS( { selector, style } ) {
+	let output = '';
+
+	const { type: positionType } = style?.position || {};
+
+	if ( ! VALID_POSITION_TYPES.includes( positionType ) ) {
+		return output;
+	}
+
+	output += `${ selector } {`;
+	output += `position: ${ positionType };`;
+
+	POSITION_SIDES.forEach( ( side ) => {
+		if ( style?.position?.[ side ] !== undefined ) {
+			output += `${ side }: ${ style.position[ side ] };`;
+		}
+	} );
+
+	if ( positionType === 'sticky' || positionType === 'fixed' ) {
+		// TODO: Replace hard-coded z-index value with a z-index preset approach in theme.json.
+		output += `z-index: 10`;
+	}
+	output += `}`;
+
+	return output;
+}
+
+/**
+ * Determines if there is sticky position support.
+ *
+ * @param {string|Object} blockType Block name or Block Type object.
+ *
+ * @return {boolean} Whether there is support.
+ */
+export function hasStickyPositionSupport( blockType ) {
+	const support = getBlockSupport( blockType, POSITION_SUPPORT_KEY );
+	return !! ( true === support || support?.sticky );
+}
+
+/**
+ * Determines if there is fixed position support.
+ *
+ * @param {string|Object} blockType Block name or Block Type object.
+ *
+ * @return {boolean} Whether there is support.
+ */
+export function hasFixedPositionSupport( blockType ) {
+	const support = getBlockSupport( blockType, POSITION_SUPPORT_KEY );
+	return !! ( true === support || support?.fixed );
+}
+
+/**
+ * Determines if there is position support.
+ *
+ * @param {string|Object} blockType Block name or Block Type object.
+ *
+ * @return {boolean} Whether there is support.
+ */
+export function hasPositionSupport( blockType ) {
+	const support = getBlockSupport( blockType, POSITION_SUPPORT_KEY );
+	return !! support;
+}
+
+/**
+ * Checks if there is a current value in the position block support attributes.
+ *
+ * @param {Object} props Block props.
+ * @return {boolean} Whether or not the block has a position value set.
+ */
+export function hasPositionValue( props ) {
+	return props.attributes.style?.position?.type !== undefined;
+}
+
+/**
+ * Checks if the block is currently set to a sticky or fixed position.
+ * This check is helpful for determining how to position block toolbars or other elements.
+ *
+ * @param {Object} attributes Block attributes.
+ * @return {boolean} Whether or not the block is set to a sticky or fixed position.
+ */
+export function hasStickyOrFixedPositionValue( attributes ) {
+	const positionType = attributes.style?.position?.type;
+	return positionType === 'sticky' || positionType === 'fixed';
+}
+
+/**
+ * Resets the position block support attributes. This can be used when disabling
+ * the position support controls for a block via a `ToolsPanel`.
+ *
+ * @param {Object} props               Block props.
+ * @param {Object} props.attributes    Block's attributes.
+ * @param {Object} props.setAttributes Function to set block's attributes.
+ */
+export function resetPosition( { attributes = {}, setAttributes } ) {
+	const { style = {} } = attributes;
+
+	setAttributes( {
+		style: cleanEmptyObject( {
+			...style,
+			position: {
+				...style?.position,
+				type: undefined,
+				top: undefined,
+				right: undefined,
+				bottom: undefined,
+				left: undefined,
+			},
+		} ),
+	} );
+}
+
+/**
+ * Custom hook that checks if position settings have been disabled.
+ *
+ * @param {string} name The name of the block.
+ *
+ * @return {boolean} Whether padding setting is disabled.
+ */
+export function useIsPositionDisabled( { name: blockName } = {} ) {
+	const allowFixed = useSetting( 'position.fixed' );
+	const allowSticky = useSetting( 'position.sticky' );
+	const isDisabled = ! allowFixed && ! allowSticky;
+
+	return ! hasPositionSupport( blockName ) || isDisabled;
+}
+
+/*
+ * Position controls to be rendered in an inspector control panel.
+ *
+ * @param {Object} props
+ *
+ * @return {WPElement} Padding edit element.
+ */
+export function PositionEdit( props ) {
+	const {
+		attributes: { style = {} },
+		name: blockName,
+		setAttributes,
+	} = props;
+
+	const allowFixed = hasFixedPositionSupport( blockName );
+	const allowSticky = hasStickyPositionSupport( blockName );
+	const value = style?.position?.type;
+
+	const options = useMemo( () => {
+		const availableOptions = [ DEFAULT_OPTION ];
+		if ( allowSticky || value === STICKY_OPTION.value ) {
+			availableOptions.push( STICKY_OPTION );
+		}
+		if ( allowFixed || value === FIXED_OPTION.value ) {
+			availableOptions.push( FIXED_OPTION );
+		}
+		return availableOptions;
+	}, [ allowFixed, allowSticky, value ] );
+
+	const onChangeType = ( next ) => {
+		// For now, use a hard-coded `0px` value for the position.
+		// `0px` is preferred over `0` as it can be used in `calc()` functions.
+		// In the future, it could be useful to allow for an offset value.
+		const placementValue = '0px';
+
+		const newStyle = {
+			...style,
+			position: {
+				...style?.position,
+				type: next,
+				top:
+					next === 'sticky' || next === 'fixed'
+						? placementValue
+						: undefined,
+			},
+		};
+
+		setAttributes( {
+			style: cleanEmptyObject( newStyle ),
+		} );
+	};
+
+	const selectedOption = value
+		? options.find( ( option ) => option.value === value ) || DEFAULT_OPTION
+		: DEFAULT_OPTION;
+
+	return Platform.select( {
+		web: (
+			<>
+				<BaseControl className="block-editor-hooks__position-selection">
+					<CustomSelectControl
+						__nextUnconstrainedWidth
+						__next36pxDefaultSize
+						className="block-editor-hooks__position-selection__select-control"
+						label={ __( 'Position' ) }
+						hideLabelFromVision
+						describedBy={ sprintf(
+							// translators: %s: Currently selected font size.
+							__( 'Currently selected position: %s' ),
+							selectedOption.name
+						) }
+						options={ options }
+						value={ selectedOption }
+						__experimentalShowSelectedHint
+						onChange={ ( { selectedItem } ) => {
+							onChangeType( selectedItem.value );
+						} }
+						size={ '__unstable-large' }
+					/>
+				</BaseControl>
+			</>
+		),
+		native: null,
+	} );
+}
+
+/**
+ * Override the default edit UI to include position controls.
+ *
+ * @param {Function} BlockEdit Original component.
+ *
+ * @return {Function} Wrapped component.
+ */
+export const withInspectorControls = createHigherOrderComponent(
+	( BlockEdit ) => ( props ) => {
+		const { name: blockName } = props;
+		const positionSupport = hasBlockSupport(
+			blockName,
+			POSITION_SUPPORT_KEY
+		);
+		const showPositionControls =
+			positionSupport && ! useIsPositionDisabled( props );
+
+		return [
+			showPositionControls && (
+				<InspectorControls
+					key="position"
+					__experimentalGroup="position"
+				>
+					<PositionEdit { ...props } />
+				</InspectorControls>
+			),
+			<BlockEdit key="edit" { ...props } />,
+		];
+	},
+	'withInspectorControls'
+);
+
+/**
+ * Override the default block element to add the position styles.
+ *
+ * @param {Function} BlockListBlock Original component.
+ *
+ * @return {Function} Wrapped component.
+ */
+export const withPositionStyles = createHigherOrderComponent(
+	( BlockListBlock ) => ( props ) => {
+		const { name, attributes } = props;
+		const hasPositionBlockSupport = hasBlockSupport(
+			name,
+			POSITION_SUPPORT_KEY
+		);
+		const allowPositionStyles =
+			hasPositionBlockSupport && ! useIsPositionDisabled( props );
+
+		const id = useInstanceId( BlockListBlock );
+		const element = useContext( BlockList.__unstableElementContext );
+
+		// Higher specificity to override defaults in editor UI.
+		const positionSelector = `.wp-container-${ id }.wp-container-${ id }`;
+
+		// Get CSS string for the current position values.
+		let css;
+		if ( allowPositionStyles ) {
+			css =
+				getPositionCSS( {
+					selector: positionSelector,
+					style: attributes?.style,
+				} ) || '';
+		}
+
+		// Attach a `wp-container-` id-based class name.
+		const className = classnames( props?.className, {
+			[ `wp-container-${ id }` ]: allowPositionStyles && !! css, // Only attach a container class if there is generated CSS to be attached.
+		} );
+
+		return (
+			<>
+				{ allowPositionStyles &&
+					element &&
+					!! css &&
+					createPortal( <style>{ css }</style>, element ) }
+				<BlockListBlock { ...props } className={ className } />
+			</>
+		);
+	}
+);
+
+addFilter(
+	'editor.BlockListBlock',
+	'core/editor/position/with-position-styles',
+	withPositionStyles
+);
+addFilter(
+	'editor.BlockEdit',
+	'core/editor/position/with-inspector-controls',
+	withInspectorControls
+);

package/src/hooks/position.scss

@@ -0,0 +1,18 @@
+.block-editor-hooks__position-selection__select-control {
+	.components-custom-select-control__hint {
+		display: none;
+	}
+}
+
+.block-editor-hooks__position-selection__select-control__option {
+	&.has-hint {
+		grid-template-columns: auto 30px;
+		line-height: $default-line-height;
+		margin-bottom: 0;
+	}
+
+	.components-custom-select-control__item-hint {
+		grid-row: 2;
+		text-align: left;
+	}
+}