@wordpress/block-library 7.3.0 → 7.4.0

package/src/query/edit/index.js

@@ -2,9 +2,9 @@
  * WordPress dependencies
  */
 import { useSelect, useDispatch } from '@wordpress/data';
-import { cloneBlock } from '@wordpress/blocks';
+import { store as blocksStore, cloneBlock } from '@wordpress/blocks';
 import { useInstanceId } from '@wordpress/compose';
-import { useEffect } from '@wordpress/element';
+import { useState, useEffect } from '@wordpress/element';
 import {
 	BlockControls,
 	InspectorControls,
@@ -12,9 +12,15 @@ import {
 	useSetting,
 	store as blockEditorStore,
 	useInnerBlocksProps,
+	__experimentalGetMatchingVariation as getMatchingVariation,
 	__experimentalBlockPatternSetup as BlockPatternSetup,
 } from '@wordpress/block-editor';
-import { SelectControl } from '@wordpress/components';
+import {
+	Button,
+	SelectControl,
+	Placeholder,
+	Modal,
+} from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
 /**
@@ -27,7 +33,11 @@ import { DEFAULTS_POSTS_PER_PAGE } from '../constants';
 import { getFirstQueryClientIdFromBlocks } from '../utils';
 
 const TEMPLATE = [ [ 'core/post-template' ] ];
-export function QueryContent( { attributes, setAttributes } ) {
+export function QueryContent( {
+	attributes,
+	setAttributes,
+	openPatternSelectionModal,
+} ) {
 	const {
 		queryId,
 		query,
@@ -102,6 +112,7 @@ export function QueryContent( { attributes, setAttributes } ) {
 					attributes={ attributes }
 					setQuery={ updateQuery }
 					setDisplayLayout={ updateDisplayLayout }
+					openPatternSelectionModal={ openPatternSelectionModal }
 				/>
 			</BlockControls>
 			<InspectorControls __experimentalGroup="advanced">
@@ -124,43 +135,131 @@ export function QueryContent( { attributes, setAttributes } ) {
 	);
 }
 
-function QueryPatternSetup( props ) {
-	const { clientId, name: blockName } = props;
+function QueryPatternSetup( {
+	attributes,
+	clientId,
+	name,
+	openPatternSelectionModal,
+	setAttributes,
+} ) {
+	const [ isStartingBlank, setIsStartingBlank ] = useState( false );
 	const blockProps = useBlockProps();
-	const { replaceBlock, selectBlock } = useDispatch( blockEditorStore );
-	const onBlockPatternSelect = ( blocks ) => {
-		const clonedBlocks = blocks.map( ( block ) => cloneBlock( block ) );
-		const firstQueryClientId = getFirstQueryClientIdFromBlocks(
-			clonedBlocks
+
+	const { blockType, allVariations, hasPatterns } = useSelect(
+		( select ) => {
+			const { getBlockVariations, getBlockType } = select( blocksStore );
+			const {
+				getBlockRootClientId,
+				__experimentalGetPatternsByBlockTypes,
+			} = select( blockEditorStore );
+			const rootClientId = getBlockRootClientId( clientId );
+
+			return {
+				blockType: getBlockType( name ),
+				allVariations: getBlockVariations( name ),
+				hasPatterns: !! __experimentalGetPatternsByBlockTypes(
+					name,
+					rootClientId
+				).length,
+			};
+		},
+		[ name, clientId ]
+	);
+
+	const matchingVariation = getMatchingVariation( attributes, allVariations );
+	const icon = matchingVariation?.icon || blockType?.icon?.src;
+	const label = matchingVariation?.title || blockType?.title;
+	if ( isStartingBlank ) {
+		return (
+			<QueryPlaceholder
+				clientId={ clientId }
+				name={ name }
+				setAttributes={ setAttributes }
+				icon={ icon }
+				label={ label }
+			/>
 		);
-		replaceBlock( clientId, clonedBlocks );
-		if ( firstQueryClientId ) {
-			selectBlock( firstQueryClientId );
-		}
-	};
-	// `startBlankComponent` is what to render when clicking `Start blank`
-	// or if no matched patterns are found.
+	}
 	return (
 		<div { ...blockProps }>
-			<BlockPatternSetup
-				blockName={ blockName }
-				clientId={ clientId }
-				startBlankComponent={ <QueryPlaceholder { ...props } /> }
-				onBlockPatternSelect={ onBlockPatternSelect }
-			/>
+			<Placeholder
+				icon={ icon }
+				label={ label }
+				instructions={ __(
+					'Choose a pattern for the query loop or start blank.'
+				) }
+			>
+				{ !! hasPatterns && (
+					<Button
+						variant="primary"
+						onClick={ openPatternSelectionModal }
+					>
+						{ __( 'Choose' ) }
+					</Button>
+				) }
+
+				<Button
+					variant="secondary"
+					onClick={ () => {
+						setIsStartingBlank( true );
+					} }
+				>
+					{ __( 'Start blank' ) }
+				</Button>
+			</Placeholder>
 		</div>
 	);
 }
 
 const QueryEdit = ( props ) => {
-	const { clientId } = props;
+	const { clientId, name } = props;
+	const [
+		isPatternSelectionModalOpen,
+		setIsPatternSelectionModalOpen,
+	] = useState( false );
+	const { replaceBlock, selectBlock } = useDispatch( blockEditorStore );
 	const hasInnerBlocks = useSelect(
 		( select ) =>
 			!! select( blockEditorStore ).getBlocks( clientId ).length,
 		[ clientId ]
 	);
 	const Component = hasInnerBlocks ? QueryContent : QueryPatternSetup;
-	return <Component { ...props } />;
+	const onBlockPatternSelect = ( blocks ) => {
+		const clonedBlocks = blocks.map( ( block ) => cloneBlock( block ) );
+		const firstQueryClientId = getFirstQueryClientIdFromBlocks(
+			clonedBlocks
+		);
+		replaceBlock( clientId, clonedBlocks );
+		if ( firstQueryClientId ) {
+			selectBlock( firstQueryClientId );
+		}
+	};
+	return (
+		<>
+			<Component
+				{ ...props }
+				openPatternSelectionModal={ () =>
+					setIsPatternSelectionModalOpen( true )
+				}
+			/>
+			{ isPatternSelectionModalOpen && (
+				<Modal
+					className="block-editor-query-pattern__selection-modal"
+					title={ __( 'Choose a pattern' ) }
+					closeLabel={ __( 'Cancel' ) }
+					onRequestClose={ () =>
+						setIsPatternSelectionModalOpen( false )
+					}
+				>
+					<BlockPatternSetup
+						blockName={ name }
+						clientId={ clientId }
+						onBlockPatternSelect={ onBlockPatternSelect }
+					/>
+				</Modal>
+			) }
+		</>
+	);
 };
 
 export default QueryEdit;

package/src/query/edit/query-placeholder.js

@@ -5,7 +5,6 @@ import { useSelect, useDispatch } from '@wordpress/data';
 import {
 	useBlockProps,
 	__experimentalBlockVariationPicker,
-	__experimentalGetMatchingVariation as getMatchingVariation,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import {
@@ -13,13 +12,8 @@ import {
 	store as blocksStore,
 } from '@wordpress/blocks';
 
-const QueryPlaceholder = ( { clientId, name, attributes, setAttributes } ) => {
-	const {
-		blockType,
-		defaultVariation,
-		scopeVariations,
-		allVariations,
-	} = useSelect(
+function QueryPlaceholder( { clientId, name, setAttributes, icon, label } ) {
+	const { defaultVariation, scopeVariations } = useSelect(
 		( select ) => {
 			const {
 				getBlockVariations,
@@ -31,16 +25,12 @@ const QueryPlaceholder = ( { clientId, name, attributes, setAttributes } ) => {
 				blockType: getBlockType( name ),
 				defaultVariation: getDefaultBlockVariation( name, 'block' ),
 				scopeVariations: getBlockVariations( name, 'block' ),
-				allVariations: getBlockVariations( name ),
 			};
 		},
 		[ name ]
 	);
 	const { replaceInnerBlocks } = useDispatch( blockEditorStore );
 	const blockProps = useBlockProps();
-	const matchingVariation = getMatchingVariation( attributes, allVariations );
-	const icon = matchingVariation?.icon || blockType?.icon?.src;
-	const label = matchingVariation?.title || blockType?.title;
 	return (
 		<div { ...blockProps }>
 			<__experimentalBlockVariationPicker
@@ -64,6 +54,6 @@ const QueryPlaceholder = ( { clientId, name, attributes, setAttributes } ) => {
 			/>
 		</div>
 	);
-};
+}
 
 export default QueryPlaceholder;

package/src/query/edit/query-toolbar.js

@@ -16,6 +16,7 @@ export default function QueryToolbar( {
 	attributes: { query, displayLayout },
 	setQuery,
 	setDisplayLayout,
+	openPatternSelectionModal,
 } ) {
 	const maxPageInputId = useInstanceId(
 		QueryToolbar,
@@ -128,6 +129,11 @@ export default function QueryToolbar( {
 					/>
 				</ToolbarGroup>
 			) }
+			<ToolbarGroup className="wp-block-template-part__block-control-group">
+				<ToolbarButton onClick={ openPatternSelectionModal }>
+					{ __( 'Replace' ) }
+				</ToolbarButton>
+			</ToolbarGroup>
 			<ToolbarGroup controls={ displayLayoutControls } />
 		</>
 	);

package/src/query/editor.scss

@@ -5,3 +5,41 @@
 .wp-block-query__create-new-link {
 	padding: 0 $grid-unit-20 $grid-unit-20 56px;
 }
+
+.block-library-query__pattern-selection-content .block-editor-block-patterns-list {
+	display: grid;
+	grid-template-columns: 1fr 1fr 1fr;
+	grid-gap: $grid-unit-10;
+
+	.block-editor-block-patterns-list__list-item {
+		margin-bottom: 0;
+		.block-editor-block-preview__container {
+			max-height: 250px;
+		}
+	}
+}
+
+.block-editor-query-pattern__selection-modal .components-modal__content {
+	overflow: hidden;
+	padding: 0;
+	&::before {
+		margin-bottom: 0;
+	}
+}
+
+.block-editor-query-pattern__selection-modal {
+	// To keep modal dimensions consistent as subsections are navigated, width
+	// and height are used instead of max-(width/height).
+	@include break-small() {
+		width: calc(100% - #{ $grid-unit-20 * 2 });
+		height: calc(100% - #{ $header-height * 2 });
+	}
+	@include break-medium() {
+		width: $break-medium - $grid-unit-20 * 2;
+	}
+	@include break-large() {
+		height: 80%;
+		width: 80%;
+		max-height: none;
+	}
+}

package/src/quote/index.js

@@ -16,7 +16,7 @@ import settingsV2 from './v2';
 
 const { name } = metadata;
 
-export { metadata, name };
+export { metadata, name, settingsV2 };
 
 export const settingsV1 = {
 	icon,
@@ -53,6 +53,10 @@ export const settingsV1 = {
 	deprecated,
 };
 
-export const settings = window?.__experimentalEnableQuoteBlockV2
-	? settingsV2
-	: settingsV1;
+let settings = settingsV1;
+if ( process.env.IS_GUTENBERG_PLUGIN ) {
+	settings = window?.__experimentalEnableQuoteBlockV2
+		? settingsV2
+		: settingsV1;
+}
+export { settings };

package/src/quote/v2/edit.js

@@ -74,6 +74,7 @@ export default function QuoteEdit( {
 	insertBlocksAfter,
 	clientId,
 	className,
+	style,
 } ) {
 	const { citation, align } = attributes;
 
@@ -88,6 +89,7 @@ export default function QuoteEdit( {
 		className: classNames( className, {
 			[ `has-text-align-${ align }` ]: align,
 		} ),
+		...( ! isWebPlatform && { style } ),
 	} );
 	const innerBlocksProps = useInnerBlocksProps( blockProps, {
 		template: TEMPLATE,
@@ -128,6 +130,7 @@ export default function QuoteEdit( {
 						__unstableOnSplitAtEnd={ () =>
 							insertBlocksAfter( createBlock( 'core/paragraph' ) )
 						}
+						{ ...( ! isWebPlatform ? { textAlign: align } : {} ) }
 					/>
 				) }
 			</BlockQuotation>

package/src/rss/edit.js

@@ -109,7 +109,7 @@ export default function RSSEdit( { attributes, setAttributes } ) {
 				<ToolbarGroup controls={ toolbarControls } />
 			</BlockControls>
 			<InspectorControls>
-				<PanelBody title={ __( 'RSS settings' ) }>
+				<PanelBody title={ __( 'Settings' ) }>
 					<RangeControl
 						label={ __( 'Number of items' ) }
 						value={ itemsToShow }

package/src/search/edit.js

@@ -103,8 +103,6 @@ export default function SearchEdit( {
 		} );
 	}, [ insertedInNavigationBlock ] );
 	const borderRadius = style?.border?.radius;
-	const borderColor = style?.border?.color;
-	const borderWidth = style?.border?.width;
 	const borderProps = useBorderProps( attributes );
 
 	// Check for old deprecated numerical border radius. Done as a separate
@@ -392,10 +390,18 @@ export default function SearchEdit( {
 		radius ? `calc(${ radius } + ${ DEFAULT_INNER_PADDING })` : undefined;
 
 	const getWrapperStyles = () => {
-		const styles = {
-			borderColor,
-			borderWidth: isButtonPositionInside ? borderWidth : undefined,
-		};
+		const styles = isButtonPositionInside
+			? borderProps.style
+			: {
+					borderRadius: borderProps.style?.borderRadius,
+					borderTopLeftRadius: borderProps.style?.borderTopLeftRadius,
+					borderTopRightRadius:
+						borderProps.style?.borderTopRightRadius,
+					borderBottomLeftRadius:
+						borderProps.style?.borderBottomLeftRadius,
+					borderBottomRightRadius:
+						borderProps.style?.borderBottomRightRadius,
+			  };
 
 		const isNonZeroBorderRadius =
 			borderRadius !== undefined && parseInt( borderRadius, 10 ) !== 0;
@@ -417,11 +423,11 @@ export default function SearchEdit( {
 				} = borderRadius;
 
 				return {
+					...styles,
 					borderTopLeftRadius: padBorderRadius( topLeft ),
 					borderTopRightRadius: padBorderRadius( topRight ),
 					borderBottomLeftRadius: padBorderRadius( bottomLeft ),
 					borderBottomRightRadius: padBorderRadius( bottomRight ),
-					...styles,
 				};
 			}
 

package/src/search/index.php

@@ -171,6 +171,75 @@ function classnames_for_block_core_search( $attributes ) {
 	return implode( ' ', $classnames );
 }
 
+/**
+ * This generates a CSS rule for the given border property and side if provided.
+ * Based on whether the Search block is configured to display the button inside
+ * or not, the generated rule is injected into the appropriate collection of
+ * styles for later application in the block's markup.
+ *
+ * @param array  $attributes     The block attributes.
+ * @param string $property       Border property to generate rule for e.g. width or color.
+ * @param string $side           Optional side border. The dictates the value retrieved and final CSS property.
+ * @param array  $wrapper_styles Current collection of wrapper styles.
+ * @param array  $button_styles  Current collection of button styles.
+ * @param array  $input_styles   Current collection of input styles.
+ *
+ * @return void
+ */
+function apply_block_core_search_border_style( $attributes, $property, $side, &$wrapper_styles, &$button_styles, &$input_styles ) {
+	$is_button_inside = 'button-inside' === _wp_array_get( $attributes, array( 'buttonPosition' ), false );
+
+	$path = array( 'style', 'border', $property );
+
+	if ( $side ) {
+		array_splice( $path, 2, 0, $side );
+	}
+
+	$value = _wp_array_get( $attributes, $path, false );
+
+	if ( empty( $value ) ) {
+		return;
+	}
+
+	if ( 'color' === $property && $side ) {
+		$has_color_preset = strpos( $value, 'var:preset|color|' ) !== false;
+		if ( $has_color_preset ) {
+			$named_color_value = substr( $value, strrpos( $value, '|' ) + 1 );
+			$value             = sprintf( 'var(--wp--preset--color--%s)', $named_color_value );
+		}
+	}
+
+	$property_suffix = $side ? sprintf( '%s-%s', $side, $property ) : $property;
+
+	if ( $is_button_inside ) {
+		$wrapper_styles[] = sprintf( 'border-%s: %s;', $property_suffix, esc_attr( $value ) );
+	} else {
+		$button_styles[] = sprintf( 'border-%s: %s;', $property_suffix, esc_attr( $value ) );
+		$input_styles[]  = sprintf( 'border-%s: %s;', $property_suffix, esc_attr( $value ) );
+	}
+}
+
+/**
+ * This adds CSS rules for a given border property e.g. width or color. It
+ * injects rules into the provided wrapper, button and input style arrays for
+ * uniform "flat" borders or those with individual sides configured.
+ *
+ * @param array  $attributes     The block attributes.
+ * @param string $property       Border property to generate rule for e.g. width or color.
+ * @param array  $wrapper_styles Current collection of wrapper styles.
+ * @param array  $button_styles  Current collection of button styles.
+ * @param array  $input_styles   Current collection of input styles.
+ *
+ * @return void
+ */
+function apply_block_core_search_border_styles( $attributes, $property, &$wrapper_styles, &$button_styles, &$input_styles ) {
+	apply_block_core_search_border_style( $attributes, $property, null, $wrapper_styles, $button_styles, $input_styles );
+	apply_block_core_search_border_style( $attributes, $property, 'top', $wrapper_styles, $button_styles, $input_styles );
+	apply_block_core_search_border_style( $attributes, $property, 'right', $wrapper_styles, $button_styles, $input_styles );
+	apply_block_core_search_border_style( $attributes, $property, 'bottom', $wrapper_styles, $button_styles, $input_styles );
+	apply_block_core_search_border_style( $attributes, $property, 'left', $wrapper_styles, $button_styles, $input_styles );
+}
+
 /**
  * Builds an array of inline styles for the search block.
  *
@@ -201,19 +270,10 @@ function styles_for_block_core_search( $attributes ) {
 		);
 	}
 
-	// Add border width styles.
-	$has_border_width = ! empty( $attributes['style']['border']['width'] );
-
-	if ( $has_border_width ) {
-		$border_width = $attributes['style']['border']['width'];
-
-		if ( $is_button_inside ) {
-			$wrapper_styles[] = sprintf( 'border-width: %s;', esc_attr( $border_width ) );
-		} else {
-			$button_styles[] = sprintf( 'border-width: %s;', esc_attr( $border_width ) );
-			$input_styles[]  = sprintf( 'border-width: %s;', esc_attr( $border_width ) );
-		}
-	}
+	// Add border width and color styles.
+	apply_block_core_search_border_styles( $attributes, 'width', $wrapper_styles, $button_styles, $input_styles );
+	apply_block_core_search_border_styles( $attributes, 'color', $wrapper_styles, $button_styles, $input_styles );
+	apply_block_core_search_border_styles( $attributes, 'style', $wrapper_styles, $button_styles, $input_styles );
 
 	// Add border radius styles.
 	$has_border_radius = ! empty( $attributes['style']['border']['radius'] );
@@ -269,21 +329,6 @@ function styles_for_block_core_search( $attributes ) {
 		}
 	}
 
-	// Add border color styles.
-	$has_border_color = ! empty( $attributes['style']['border']['color'] );
-
-	if ( $has_border_color ) {
-		$border_color = $attributes['style']['border']['color'];
-
-		// Apply wrapper border color if button placed inside.
-		if ( $is_button_inside ) {
-			$wrapper_styles[] = sprintf( 'border-color: %s;', esc_attr( $border_color ) );
-		} else {
-			$button_styles[] = sprintf( 'border-color: %s;', esc_attr( $border_color ) );
-			$input_styles[]  = sprintf( 'border-color: %s;', esc_attr( $border_color ) );
-		}
-	}
-
 	// Add color styles.
 	$has_text_color = ! empty( $attributes['style']['color']['text'] );
 	if ( $has_text_color ) {
@@ -315,13 +360,19 @@ function styles_for_block_core_search( $attributes ) {
  * @return string The border color classnames to be applied to the block elements.
  */
 function get_border_color_classes_for_block_core_search( $attributes ) {
+	$border_color_classes    = array();
 	$has_custom_border_color = ! empty( $attributes['style']['border']['color'] );
-	$border_color_classes    = ! empty( $attributes['borderColor'] ) ? sprintf( 'has-border-color has-%s-border-color', $attributes['borderColor'] ) : '';
-	// If there's a border color style and no `borderColor` text string, we still want to add the generic `has-border-color` class name to the element.
-	if ( $has_custom_border_color && empty( $attributes['borderColor'] ) ) {
-		$border_color_classes = 'has-border-color';
+	$has_named_border_color  = ! empty( $attributes['borderColor'] );
+
+	if ( $has_custom_border_color || $has_named_border_color ) {
+		$border_color_classes[] = 'has-border-color';
+	}
+
+	if ( $has_named_border_color ) {
+		$border_color_classes[] = sprintf( 'has-%s-border-color', esc_attr( $attributes['borderColor'] ) );
 	}
-	return $border_color_classes;
+
+	return implode( ' ', $border_color_classes );
 }
 
 /**

package/src/spacer/constants.js

@@ -0,0 +1 @@
+export const MIN_SPACER_SIZE = 0;

package/src/spacer/controls.js

@@ -15,7 +15,7 @@ import { useInstanceId } from '@wordpress/compose';
 /**
  * Internal dependencies
  */
-import { MIN_SPACER_SIZE } from './edit';
+import { MIN_SPACER_SIZE } from './constants';
 
 function DimensionInput( { label, onChange, isResizing, value = '' } ) {
 	const inputId = useInstanceId( UnitControl, 'block-spacer-height-input' );
@@ -75,7 +75,7 @@ export default function SpacerControls( {
 } ) {
 	return (
 		<InspectorControls>
-			<PanelBody title={ __( 'Spacer settings' ) }>
+			<PanelBody title={ __( 'Settings' ) }>
 				{ orientation === 'horizontal' && (
 					<DimensionInput
 						label={ __( 'Width' ) }

package/src/spacer/controls.native.js

@@ -14,7 +14,7 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import { MIN_SPACER_SIZE } from './edit.js';
+import { MIN_SPACER_SIZE } from './constants';
 import styles from './style.scss';
 
 const DEFAULT_VALUES = { px: 100, em: 10, rem: 10, vw: 10, vh: 25 };

package/src/spacer/edit.js

@@ -15,8 +15,7 @@ import { View } from '@wordpress/primitives';
  * Internal dependencies
  */
 import SpacerControls from './controls';
-
-export const MIN_SPACER_SIZE = 0;
+import { MIN_SPACER_SIZE } from './constants';
 
 const ResizableSpacer = ( {
 	orientation,

package/src/table/edit.js

@@ -25,6 +25,7 @@ import {
 	TextControl,
 	ToggleControl,
 	ToolbarDropdownMenu,
+	__experimentalHasSplitBorders as hasSplitBorders,
 } from '@wordpress/components';
 import {
 	alignLeft,
@@ -451,7 +452,7 @@ function TableEdit( {
 			{ ! isEmpty && (
 				<InspectorControls>
 					<PanelBody
-						title={ __( 'Table settings' ) }
+						title={ __( 'Settings' ) }
 						className="blocks-table-settings"
 					>
 						<ToggleControl
@@ -477,7 +478,15 @@ function TableEdit( {
 					className={ classnames(
 						colorProps.className,
 						borderProps.className,
-						{ 'has-fixed-layout': hasFixedLayout }
+						{
+							'has-fixed-layout': hasFixedLayout,
+							// This is required in the editor only to overcome
+							// the fact the editor rewrites individual border
+							// widths into a shorthand format.
+							'has-individual-borders': hasSplitBorders(
+								attributes?.style?.border
+							),
+						}
 					) }
 					style={ { ...colorProps.style, ...borderProps.style } }
 				>

package/src/table/editor.scss

@@ -43,6 +43,19 @@
 	figcaption {
 		@include caption-style-theme();
 	}
+
+	// This is only required in the editor to overcome the fact the editor
+	// rewrites border width styles into shorthand.
+	table.has-individual-borders {
+		> *,
+		tr,
+		th,
+		td {
+			border-width: $border-width;
+			border-style: solid;
+			border-color: currentColor;
+		}
+	}
 }
 
 .blocks-table__placeholder-form.blocks-table__placeholder-form {