@wordpress/block-editor 7.0.4 → 8.0.3

package/src/components/duotone-control/index.js

@@ -24,6 +24,7 @@ function DuotoneControl( {
 			popoverProps={ {
 				className: 'block-editor-duotone-control__popover',
 				headerTitle: __( 'Duotone' ),
+				isAlternate: true,
 			} }
 			renderToggle={ ( { isOpen, onToggle } ) => {
 				const openOnArrowDown = ( event ) => {
@@ -46,6 +47,11 @@ function DuotoneControl( {
 			} }
 			renderContent={ () => (
 				<MenuGroup label={ __( 'Duotone' ) }>
+					<div className="block-editor-duotone-control__description">
+						{ __(
+							'Create a two-tone color effect without losing your original image.'
+						) }
+					</div>
 					<DuotonePicker
 						colorPalette={ colorPalette }
 						duotonePalette={ duotonePalette }

package/src/components/duotone-control/style.scss

@@ -1,23 +1,38 @@
+// Must equal $color-palette-circle-size and $color-palette-circle-spacing from:
+// @wordpress/components/src/circular-option-picker/style.scss
+$swatch-size: 28px;
+$swatch-gap: 12px;
+
+$popover-width: $sidebar-width;
+$popover-padding: $grid-unit-20;
+
+$swatch-columns: math.floor(math.div($popover-width + $swatch-gap - 2 * $popover-padding, $swatch-size + $swatch-gap));
+
 .block-editor-duotone-control__popover {
-	.components-popover__content {
-		border: $border-width solid $gray-900;
-		min-width: 214px;
+	> .components-popover__content > div {
+		padding: $popover-padding;
+		width: $popover-width;
 	}
 
-	.components-circular-option-picker {
-		padding: $grid-unit-15;
+	.components-menu-group__label {
+		padding: 0;
 	}
 
-	.components-menu-group__label {
-		padding: $grid-unit-15 $grid-unit-15 0 $grid-unit-15;
-		width: 100%;
-		box-sizing: border-box;
+	.components-custom-gradient-picker__gradient-bar {
+		margin: $grid-unit-20 0 $grid-unit-15;
+	}
+
+	.components-circular-option-picker__swatches {
+		display: grid;
+		grid-template-columns: repeat($swatch-columns, $swatch-size);
+		gap: $swatch-gap;
+		justify-content: space-between;
 	}
 }
 
-.block-editor-duotone-control__popover > .components-popover__content {
-	// Matches 8 swatches in width.
-	width: 334px;
+.block-editor-duotone-control__description {
+	margin: $grid-unit-20 0;
+	font-size: $helptext-font-size;
 }
 
 // Better align the popover under the swatch.

package/src/components/font-appearance-control/index.js

@@ -55,6 +55,26 @@ const FONT_WEIGHTS = [
 	},
 ];
 
+/**
+ * Adjusts font appearance field label in case either font styles or weights
+ * are disabled.
+ *
+ * @param {boolean} hasFontStyles  Whether font styles are enabled and present.
+ * @param {boolean} hasFontWeights Whether font weights are enabled and present.
+ * @return {string} A label representing what font appearance is being edited.
+ */
+export const getFontAppearanceLabel = ( hasFontStyles, hasFontWeights ) => {
+	if ( ! hasFontStyles ) {
+		return __( 'Font weight' );
+	}
+
+	if ( ! hasFontWeights ) {
+		return __( 'Font style' );
+	}
+
+	return __( 'Appearance' );
+};
+
 /**
  * Control to display unified font style and weight options.
  *
@@ -70,6 +90,7 @@ export default function FontAppearanceControl( props ) {
 		value: { fontStyle, fontWeight },
 	} = props;
 	const hasStylesOrWeights = hasFontStyles || hasFontWeights;
+	const label = getFontAppearanceLabel( hasFontStyles, hasFontWeights );
 	const defaultOption = {
 		key: 'default',
 		name: __( 'Default' ),
@@ -152,19 +173,6 @@ export default function FontAppearanceControl( props ) {
 				option.style.fontWeight === fontWeight
 		) || selectOptions[ 0 ];
 
-	// Adjusts field label in case either styles or weights are disabled.
-	const getLabel = () => {
-		if ( ! hasFontStyles ) {
-			return __( 'Font weight' );
-		}
-
-		if ( ! hasFontWeights ) {
-			return __( 'Font style' );
-		}
-
-		return __( 'Appearance' );
-	};
-
 	// Adjusts screen reader description based on styles or weights.
 	const getDescribedBy = () => {
 		if ( ! currentSelection ) {
@@ -198,7 +206,7 @@ export default function FontAppearanceControl( props ) {
 		hasStylesOrWeights && (
 			<CustomSelectControl
 				className="components-font-appearance-control"
-				label={ getLabel() }
+				label={ label }
 				describedBy={ getDescribedBy() }
 				options={ selectOptions }
 				value={ currentSelection }

package/src/components/iframe/index.js

@@ -76,7 +76,7 @@ function styleSheetsCompat( doc ) {
 
 		if ( isMatch && ! doc.getElementById( ownerNode.id ) ) {
 			// eslint-disable-next-line no-console
-			console.error(
+			console.warn(
 				`Stylesheet ${ ownerNode.id } was not properly added.
 For blocks, use the block API's style (https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/#style) or editorStyle (https://developer.wordpress.org/block-editor/reference-guides/block-api/block-metadata/#editor-style).
 For themes, use add_editor_style (https://developer.wordpress.org/block-editor/how-to-guides/themes/theme-support/#editor-styles).`,

package/src/components/index.js

@@ -45,6 +45,8 @@ export { default as __experimentalDuotoneControl } from './duotone-control';
 export { default as __experimentalFontAppearanceControl } from './font-appearance-control';
 export { default as __experimentalFontFamilyControl } from './font-family';
 export { default as __experimentalLetterSpacingControl } from './letter-spacing-control';
+export { default as __experimentalTextDecorationControl } from './text-decoration-control';
+export { default as __experimentalTextTransformControl } from './text-transform-control';
 export { default as __experimentalColorGradientControl } from './colors-gradients/control';
 export { default as __experimentalPanelColorGradientSettings } from './colors-gradients/panel-color-gradient-settings';
 export {
@@ -52,10 +54,7 @@ export {
 	ImageEditingProvider as __experimentalImageEditingProvider,
 } from './image-editor';
 export { default as __experimentalImageSizeControl } from './image-size-control';
-export {
-	default as InnerBlocks,
-	useInnerBlocksProps as __experimentalUseInnerBlocksProps,
-} from './inner-blocks';
+export { default as InnerBlocks, useInnerBlocksProps } from './inner-blocks';
 export {
 	default as InspectorControls,
 	InspectorAdvancedControls,

package/src/components/index.native.js

@@ -18,10 +18,7 @@ export * from './colors';
 export * from './gradients';
 export * from './font-sizes';
 export { AlignmentControl, AlignmentToolbar } from './alignment-control';
-export {
-	default as InnerBlocks,
-	useInnerBlocksProps as __experimentalUseInnerBlocksProps,
-} from './inner-blocks';
+export { default as InnerBlocks, useInnerBlocksProps } from './inner-blocks';
 export {
 	default as InspectorControls,
 	InspectorAdvancedControls,

package/src/components/inner-blocks/index.js

@@ -12,7 +12,7 @@ import { useSelect } from '@wordpress/data';
 import {
 	getBlockType,
 	store as blocksStore,
-	withBlockContentContext,
+	__unstableGetInnerBlocksProps as getInnerBlocksProps,
 } from '@wordpress/blocks';
 
 /**
@@ -210,13 +210,13 @@ export function useInnerBlocksProps( props = {}, options = {} ) {
 	};
 }
 
+useInnerBlocksProps.save = getInnerBlocksProps;
+
 // Expose default appender placeholders as components.
 ForwardedInnerBlocks.DefaultBlockAppender = DefaultBlockAppender;
 ForwardedInnerBlocks.ButtonBlockAppender = ButtonBlockAppender;
 
-ForwardedInnerBlocks.Content = withBlockContentContext(
-	( { BlockContent } ) => <BlockContent />
-);
+ForwardedInnerBlocks.Content = () => useInnerBlocksProps.save().children;
 
 /**
  * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/inner-blocks/README.md

package/src/components/inner-blocks/index.native.js

@@ -2,7 +2,10 @@
  * WordPress dependencies
  */
 import { useSelect } from '@wordpress/data';
-import { getBlockType, withBlockContentContext } from '@wordpress/blocks';
+import {
+	getBlockType,
+	__unstableGetInnerBlocksProps as getInnerBlocksProps,
+} from '@wordpress/blocks';
 import { useRef } from '@wordpress/element';
 
 /**
@@ -189,9 +192,9 @@ const InnerBlocks = ( props ) => {
 InnerBlocks.DefaultBlockAppender = DefaultBlockAppender;
 InnerBlocks.ButtonBlockAppender = ButtonBlockAppender;
 
-InnerBlocks.Content = withBlockContentContext( ( { BlockContent } ) => (
-	<BlockContent />
-) );
+useInnerBlocksProps.save = getInnerBlocksProps;
+
+InnerBlocks.Content = () => useInnerBlocksProps.save().children;
 
 /**
  * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/inner-blocks/README.md

package/src/components/inserter/block-patterns-explorer/explorer.js

@@ -0,0 +1,50 @@
+/**
+ * WordPress dependencies
+ */
+import { Modal } from '@wordpress/components';
+import { useState } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import PatternExplorerSidebar from './sidebar';
+import PatternList from './patterns-list';
+
+function PatternsExplorer( { initialCategory, patternCategories } ) {
+	const [ filterValue, setFilterValue ] = useState( '' );
+	const [ selectedCategory, setSelectedCategory ] = useState(
+		initialCategory?.name
+	);
+	return (
+		<div className="block-editor-block-patterns-explorer">
+			<PatternExplorerSidebar
+				selectedCategory={ selectedCategory }
+				patternCategories={ patternCategories }
+				onClickCategory={ setSelectedCategory }
+				filterValue={ filterValue }
+				setFilterValue={ setFilterValue }
+			/>
+			<PatternList
+				filterValue={ filterValue }
+				selectedCategory={ selectedCategory }
+				patternCategories={ patternCategories }
+			/>
+		</div>
+	);
+}
+
+function PatternsExplorerModal( { onModalClose, ...restProps } ) {
+	return (
+		<Modal
+			title={ __( 'Patterns' ) }
+			closeLabel={ __( 'Close' ) }
+			onRequestClose={ onModalClose }
+			isFullScreen
+		>
+			<PatternsExplorer { ...restProps } />
+		</Modal>
+	);
+}
+
+export default PatternsExplorerModal;

package/src/components/inserter/block-patterns-explorer/patterns-list.js

@@ -0,0 +1,122 @@
+/**
+ * WordPress dependencies
+ */
+import { useMemo, useEffect } from '@wordpress/element';
+import { _n, sprintf } from '@wordpress/i18n';
+import { useDebounce, useAsyncList } from '@wordpress/compose';
+import { __experimentalHeading as Heading } from '@wordpress/components';
+import { speak } from '@wordpress/a11y';
+
+/**
+ * Internal dependencies
+ */
+import BlockPatternsList from '../../block-patterns-list';
+import InserterNoResults from '../no-results';
+import useInsertionPoint from '../hooks/use-insertion-point';
+import usePatternsState from '../hooks/use-patterns-state';
+import InserterListbox from '../../inserter-listbox';
+import { searchItems } from '../search-items';
+
+const INITIAL_INSERTER_RESULTS = 2;
+
+function PatternsListHeader( { filterValue, filteredBlockPatternsLength } ) {
+	if ( ! filterValue ) {
+		return null;
+	}
+	return (
+		<Heading
+			level={ 2 }
+			lineHeight={ '48px' }
+			className="block-editor-block-patterns-explorer__search-results-count"
+		>
+			{ sprintf(
+				/* translators: %d: number of patterns. %s: block pattern search query */
+				_n(
+					'%1$d pattern found for "%2$s"',
+					'%1$d patterns found for "%2$s"',
+					filteredBlockPatternsLength
+				),
+				filteredBlockPatternsLength,
+				filterValue
+			) }
+		</Heading>
+	);
+}
+
+function PatternList( { filterValue, selectedCategory, patternCategories } ) {
+	const debouncedSpeak = useDebounce( speak, 500 );
+	const [ destinationRootClientId, onInsertBlocks ] = useInsertionPoint( {
+		shouldFocusBlock: true,
+	} );
+	const [ allPatterns, , onSelectBlockPattern ] = usePatternsState(
+		onInsertBlocks,
+		destinationRootClientId
+	);
+	const registeredPatternCategories = useMemo(
+		() =>
+			patternCategories.map(
+				( patternCategory ) => patternCategory.name
+			),
+		[ patternCategories ]
+	);
+
+	const filteredBlockPatterns = useMemo( () => {
+		if ( ! filterValue ) {
+			return allPatterns.filter( ( pattern ) =>
+				selectedCategory === 'uncategorized'
+					? ! pattern.categories?.length ||
+					  pattern.categories.every(
+							( category ) =>
+								! registeredPatternCategories.includes(
+									category
+								)
+					  )
+					: pattern.categories?.includes( selectedCategory )
+			);
+		}
+		return searchItems( allPatterns, filterValue );
+	}, [ filterValue, selectedCategory, allPatterns ] );
+
+	// Announce search results on change.
+	useEffect( () => {
+		if ( ! filterValue ) {
+			return;
+		}
+		const count = filteredBlockPatterns.length;
+		const resultsFoundMessage = sprintf(
+			/* translators: %d: number of results. */
+			_n( '%d result found.', '%d results found.', count ),
+			count
+		);
+		debouncedSpeak( resultsFoundMessage );
+	}, [ filterValue, debouncedSpeak ] );
+
+	const currentShownPatterns = useAsyncList( filteredBlockPatterns, {
+		step: INITIAL_INSERTER_RESULTS,
+	} );
+
+	const hasItems = !! filteredBlockPatterns?.length;
+	return (
+		<div className="block-editor-block-patterns-explorer__list">
+			{ hasItems && (
+				<PatternsListHeader
+					filterValue={ filterValue }
+					filteredBlockPatternsLength={ filteredBlockPatterns.length }
+				/>
+			) }
+			<InserterListbox>
+				{ ! hasItems && <InserterNoResults /> }
+				{ hasItems && (
+					<BlockPatternsList
+						shownPatterns={ currentShownPatterns }
+						blockPatterns={ filteredBlockPatterns }
+						onClickPattern={ onSelectBlockPattern }
+						isDraggable={ false }
+					/>
+				) }
+			</InserterListbox>
+		</div>
+	);
+}
+
+export default PatternList;

package/src/components/inserter/block-patterns-explorer/sidebar.js

@@ -0,0 +1,73 @@
+/**
+ * WordPress dependencies
+ */
+import { Button, SearchControl } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+function PatternCategoriesList( {
+	selectedCategory,
+	patternCategories,
+	onClickCategory,
+} ) {
+	const baseClassName = 'block-editor-block-patterns-explorer__sidebar';
+	return (
+		<div className={ `${ baseClassName }__categories-list` }>
+			{ patternCategories.map( ( { name, label } ) => {
+				return (
+					<Button
+						key={ name }
+						label={ label }
+						className={ `${ baseClassName }__categories-list__item` }
+						isPressed={ selectedCategory === name }
+						onClick={ () => {
+							onClickCategory( name );
+						} }
+					>
+						{ label }
+					</Button>
+				);
+			} ) }
+		</div>
+	);
+}
+
+function PatternsExplorerSearch( { filterValue, setFilterValue } ) {
+	const baseClassName = 'block-editor-block-patterns-explorer__search';
+	return (
+		<div className={ baseClassName }>
+			<SearchControl
+				onChange={ setFilterValue }
+				value={ filterValue }
+				label={ __( 'Search for patterns' ) }
+				placeholder={ __( 'Search' ) }
+			/>
+		</div>
+	);
+}
+
+function PatternExplorerSidebar( {
+	selectedCategory,
+	patternCategories,
+	onClickCategory,
+	filterValue,
+	setFilterValue,
+} ) {
+	const baseClassName = 'block-editor-block-patterns-explorer__sidebar';
+	return (
+		<div className={ baseClassName }>
+			<PatternsExplorerSearch
+				filterValue={ filterValue }
+				setFilterValue={ setFilterValue }
+			/>
+			{ ! filterValue && (
+				<PatternCategoriesList
+					selectedCategory={ selectedCategory }
+					patternCategories={ patternCategories }
+					onClickCategory={ onClickCategory }
+				/>
+			) }
+		</div>
+	);
+}
+
+export default PatternExplorerSidebar;