@wordpress/block-library 7.1.1 → 7.2.0

package/src/pullquote/style.scss

@@ -46,11 +46,6 @@
 	text-align: right;
 }
 
-// .is-style-solid-color is deprecated.
-.wp-block-pullquote:not(.is-style-solid-color) {
-	background: none;
-}
-
 // .is-style-solid-color is deprecated.
 .wp-block-pullquote.is-style-solid-color {
 	border: none;

package/src/query/variations.js

@@ -66,6 +66,7 @@ const variations = [
 				[ [ 'core/post-title' ], [ 'core/post-date' ] ],
 			],
 			[ 'core/query-pagination' ],
+			[ 'core/query-no-results' ],
 		],
 		scope: [ 'block' ],
 	},
@@ -81,6 +82,7 @@ const variations = [
 				[ [ 'core/post-title' ], [ 'core/post-excerpt' ] ],
 			],
 			[ 'core/query-pagination' ],
+			[ 'core/query-no-results' ],
 		],
 		scope: [ 'block' ],
 	},
@@ -100,6 +102,7 @@ const variations = [
 				],
 			],
 			[ 'core/query-pagination' ],
+			[ 'core/query-no-results' ],
 		],
 		scope: [ 'block' ],
 	},
@@ -119,6 +122,7 @@ const variations = [
 				],
 			],
 			[ 'core/query-pagination' ],
+			[ 'core/query-no-results' ],
 		],
 		scope: [ 'block' ],
 	},

package/src/query-no-results/block.json

@@ -0,0 +1,20 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 2,
+	"name": "core/query-no-results",
+	"title": "No results",
+	"category": "theme",
+	"description": "Contains the block elements used to render content when no query results are found.",
+	"parent": [ "core/query" ],
+	"textdomain": "default",
+	"usesContext": [ "queryId", "query" ],
+	"supports": {
+		"align": true,
+		"reusable": false,
+		"html": false,
+		"color": {
+			"gradients": true,
+			"link": true
+		}
+	}
+}

package/src/query-no-results/edit.js

@@ -0,0 +1,28 @@
+/**
+ * WordPress dependencies
+ */
+import { useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor';
+import { __ } from '@wordpress/i18n';
+
+const TEMPLATE = [
+	[
+		'core/paragraph',
+		{
+			placeholder: __(
+				'Add a text or blocks that will display when the query returns no results.'
+			),
+		},
+	],
+];
+
+export default function QueryNoResultsEdit() {
+	const blockProps = useBlockProps();
+	const innerBlocksProps = useInnerBlocksProps( blockProps, {
+		template: TEMPLATE,
+	} );
+	return (
+		<>
+			<div { ...innerBlocksProps } />
+		</>
+	);
+}

package/src/query-no-results/index.js

@@ -0,0 +1,20 @@
+/**
+ * WordPress dependencies
+ */
+import { loop as icon } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import metadata from './block.json';
+import edit from './edit';
+import save from './save';
+
+const { name } = metadata;
+export { metadata, name };
+
+export const settings = {
+	icon,
+	edit,
+	save,
+};

package/src/query-no-results/index.php

@@ -0,0 +1,59 @@
+<?php
+/**
+ * Server-side rendering of the `core/query-no-results` block.
+ *
+ * @package WordPress
+ */
+
+/**
+ * Renders the `core/query-no-results` block on the server.
+ *
+ * @param array    $attributes Block attributes.
+ * @param string   $content    Block default content.
+ * @param WP_Block $block      Block instance.
+ *
+ * @return string Returns the wrapper for the no results block.
+ */
+function render_block_core_query_no_results( $attributes, $content, $block ) {
+	if ( empty( trim( $content ) ) ) {
+		return '';
+	}
+
+	$page_key   = isset( $block->context['queryId'] ) ? 'query-' . $block->context['queryId'] . '-page' : 'query-page';
+	$page       = empty( $_GET[ $page_key ] ) ? 1 : (int) $_GET[ $page_key ];
+	$query_args = build_query_vars_from_query_block( $block, $page );
+	// Override the custom query with the global query if needed.
+	$use_global_query = ( isset( $block->context['query']['inherit'] ) && $block->context['query']['inherit'] );
+	if ( $use_global_query ) {
+		global $wp_query;
+		if ( $wp_query && isset( $wp_query->query_vars ) && is_array( $wp_query->query_vars ) ) {
+			$query_args = wp_parse_args( $wp_query->query_vars, $query_args );
+		}
+	}
+	$query = new WP_Query( $query_args );
+
+	if ( $query->have_posts() ) {
+		return '';
+	}
+
+	wp_reset_postdata();
+
+	return sprintf(
+		'<div %1$s>%2$s</div>',
+		get_block_wrapper_attributes(),
+		$content
+	);
+}
+
+/**
+ * Registers the `core/query-no-results` block on the server.
+ */
+function register_block_core_query_no_results() {
+	register_block_type_from_metadata(
+		__DIR__ . '/query-no-results',
+		array(
+			'render_callback' => 'render_block_core_query_no_results',
+		)
+	);
+}
+add_action( 'init', 'register_block_core_query_no_results' );

package/src/query-no-results/save.js

@@ -0,0 +1,8 @@
+/**
+ * WordPress dependencies
+ */
+import { InnerBlocks } from '@wordpress/block-editor';
+
+export default function QueryNoResultsSave() {
+	return <InnerBlocks.Content />;
+}

package/src/search/edit.js

@@ -12,7 +12,6 @@ import {
 	InspectorControls,
 	RichText,
 	__experimentalUseBorderProps as useBorderProps,
-	__experimentalUnitControl as UnitControl,
 	__experimentalUseColorProps as useColorProps,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
@@ -28,6 +27,7 @@ import {
 	PanelBody,
 	BaseControl,
 	__experimentalUseCustomUnits as useCustomUnits,
+	__experimentalUnitControl as UnitControl,
 } from '@wordpress/components';
 import { useInstanceId } from '@wordpress/compose';
 import { Icon, search } from '@wordpress/icons';
@@ -352,7 +352,6 @@ export default function SearchEdit( {
 							} }
 							style={ { maxWidth: 80 } }
 							value={ `${ width }${ widthUnit }` }
-							unit={ widthUnit }
 							units={ units }
 						/>
 

package/src/separator/block.json

@@ -8,16 +8,23 @@
 	"keywords": [ "horizontal-line", "hr", "divider" ],
 	"textdomain": "default",
 	"attributes": {
-		"color": {
-			"type": "string"
-		},
-		"customColor": {
-			"type": "string"
+		"opacity": {
+			"type": "string",
+			"default": "alpha-channel"
 		}
 	},
 	"supports": {
 		"anchor": true,
-		"align": [ "center", "wide", "full" ]
+		"align": [ "center", "wide", "full" ],
+		"color": {
+			"__experimentalSkipSerialization": true,
+			"gradients": true,
+			"background": true,
+			"text": false,
+			"__experimentalDefaultControls": {
+				"background": true
+			}
+		}
 	},
 	"styles": [
 		{ "name": "default", "label": "Default", "isDefault": true },

package/src/separator/deprecated.js

@@ -0,0 +1,57 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+import { omit } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { getColorClassName, useBlockProps } from '@wordpress/block-editor';
+
+const v1 = {
+	attributes: {
+		color: {
+			type: 'string',
+		},
+		customColor: {
+			type: 'string',
+		},
+	},
+	save( { attributes } ) {
+		const { color, customColor } = attributes;
+
+		// the hr support changing color using border-color, since border-color
+		// is not yet supported in the color palette, we use background-color
+		const backgroundClass = getColorClassName( 'background-color', color );
+		// the dots styles uses text for the dots, to change those dots color is
+		// using color, not backgroundColor
+		const colorClass = getColorClassName( 'color', color );
+
+		const className = classnames( {
+			'has-text-color has-background': color || customColor,
+			[ backgroundClass ]: backgroundClass,
+			[ colorClass ]: colorClass,
+		} );
+
+		const style = {
+			backgroundColor: backgroundClass ? undefined : customColor,
+			color: colorClass ? undefined : customColor,
+		};
+
+		return <hr { ...useBlockProps.save( { className, style } ) } />;
+	},
+	migrate( attributes ) {
+		const { color, customColor } = attributes;
+		return {
+			...omit( attributes, [ 'color', 'customColor' ] ),
+			backgroundColor: color ? color : undefined,
+			opacity: 'css',
+			style: customColor
+				? { color: { background: customColor } }
+				: undefined,
+		};
+	},
+};
+
+export default [ v1 ];

package/src/separator/deprecated.scss

@@ -0,0 +1,6 @@
+.wp-block-separator {
+	// V1 version of the block expects a default opactiy of 0.4 to be set.
+	&.has-css-opacity {
+		opacity: 0.4;
+	}
+}

package/src/separator/edit.js

@@ -7,30 +7,52 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import { HorizontalRule } from '@wordpress/components';
-import { withColors, useBlockProps } from '@wordpress/block-editor';
+import {
+	useBlockProps,
+	getColorClassName,
+	__experimentalUseColorProps as useColorProps,
+} from '@wordpress/block-editor';
+
 /**
  * Internal dependencies
  */
-import SeparatorSettings from './separator-settings';
+import useDeprecatedOpacity from './use-deprecated-opacity';
+
+export default function SeparatorEdit( { attributes, setAttributes } ) {
+	const { backgroundColor, opacity, style } = attributes;
+	const colorProps = useColorProps( attributes );
+	const currentColor = colorProps?.style?.backgroundColor;
+	const hasCustomColor = !! style?.color?.background;
+
+	useDeprecatedOpacity( opacity, currentColor, setAttributes );
+
+	// The dots styles uses text for the dots, to change those dots color is
+	// using color, not backgroundColor.
+	const colorClass = getColorClassName( 'color', backgroundColor );
+
+	const className = classnames(
+		{
+			'has-text-color': backgroundColor || currentColor,
+			[ colorClass ]: colorClass,
+			'has-css-opacity': opacity === 'css',
+			'has-alpha-channel-opacity': opacity === 'alpha-channel',
+		},
+		colorProps.classname
+	);
+
+	const styles = {
+		color: currentColor,
+		backgroundColor: currentColor,
+	};
 
-function SeparatorEdit( { color, setColor, className } ) {
 	return (
 		<>
 			<HorizontalRule
 				{ ...useBlockProps( {
-					className: classnames( className, {
-						'has-background': color.color,
-						[ color.class ]: color.class,
-					} ),
-					style: {
-						backgroundColor: color.color,
-						color: color.color,
-					},
+					className,
+					style: hasCustomColor ? styles : undefined,
 				} ) }
 			/>
-			<SeparatorSettings color={ color } setColor={ setColor } />
 		</>
 	);
 }
-
-export default withColors( 'color', { textColor: 'color' } )( SeparatorEdit );

package/src/separator/editor.scss

@@ -2,4 +2,10 @@
 	// Prevent margin collapsing so the area to select the separator is bigger.
 	padding-top: 0.1px;
 	padding-bottom: 0.1px;
+
+	// This is also set in style.scss, but needs a higher specificity in editor
+	// due to the way that color block supports adds additional background color styles.
+	&.wp-block-separator.is-style-dots {
+		background: none !important;
+	}
 }

package/src/separator/index.js

@@ -10,6 +10,7 @@ import edit from './edit';
 import metadata from './block.json';
 import save from './save';
 import transforms from './transforms';
+import deprecated from './deprecated';
 
 const { name } = metadata;
 
@@ -26,4 +27,5 @@ export const settings = {
 	transforms,
 	edit,
 	save,
+	deprecated,
 };

package/src/separator/save.js

@@ -6,28 +6,36 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { getColorClassName, useBlockProps } from '@wordpress/block-editor';
+import {
+	getColorClassName,
+	useBlockProps,
+	__experimentalGetColorClassesAndStyles as getColorClassesAndStyles,
+} from '@wordpress/block-editor';
 
 export default function separatorSave( { attributes } ) {
-	const { color, customColor } = attributes;
-
+	const { backgroundColor, style, opacity } = attributes;
+	const customColor = style?.color?.background;
+	const colorProps = getColorClassesAndStyles( attributes );
 	// The hr support changing color using border-color, since border-color
 	// is not yet supported in the color palette, we use background-color.
-	const backgroundClass = getColorClassName( 'background-color', color );
+
 	// The dots styles uses text for the dots, to change those dots color is
 	// using color, not backgroundColor.
-	const colorClass = getColorClassName( 'color', color );
+	const colorClass = getColorClassName( 'color', backgroundColor );
 
-	const className = classnames( {
-		'has-text-color has-background': color || customColor,
-		[ backgroundClass ]: backgroundClass,
-		[ colorClass ]: colorClass,
-	} );
+	const className = classnames(
+		{
+			'has-text-color': backgroundColor || customColor,
+			[ colorClass ]: colorClass,
+			'has-css-opacity': opacity === 'css',
+			'has-alpha-channel-opacity': opacity === 'alpha-channel',
+		},
+		colorProps.className
+	);
 
-	const style = {
-		backgroundColor: backgroundClass ? undefined : customColor,
+	const styles = {
+		backgroundColor: colorProps?.style?.backgroundColor,
 		color: colorClass ? undefined : customColor,
 	};
-
-	return <hr { ...useBlockProps.save( { className, style } ) } />;
+	return <hr { ...useBlockProps.save( { className, style: styles } ) } />;
 }

package/src/separator/test/edit.js

@@ -0,0 +1,113 @@
+/**
+ * External dependencies
+ */
+import { render } from '@testing-library/react';
+
+/**
+ * WordPress dependencies
+ */
+import { useBlockProps } from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import SeparatorEdit from '../edit';
+
+jest.mock( '@wordpress/block-editor', () => ( {
+	...jest.requireActual( '@wordpress/block-editor' ),
+	useBlockProps: jest.fn(),
+} ) );
+
+const defaultAttributes = {
+	backgroundColor: undefined,
+	opacity: 'alpha-channel',
+	style: {},
+	className: '',
+};
+const defaultProps = {
+	attributes: defaultAttributes,
+	setAttributes: jest.fn(),
+};
+
+describe( 'Separator block edit method', () => {
+	beforeEach( () => {
+		useBlockProps.mockClear();
+	} );
+
+	test( 'should add the has-alpha-channel-opacity class and no inline styles by default', () => {
+		render( <SeparatorEdit { ...defaultProps } /> );
+		expect( useBlockProps ).toHaveBeenCalledWith( {
+			className: 'has-alpha-channel-opacity',
+			style: undefined,
+		} );
+	} );
+
+	test( 'should add has-css-opacity class and no inline styles for deprecated block with no color specified', () => {
+		const props = {
+			...defaultProps,
+			attributes: { ...defaultAttributes, opacity: 'css' },
+		};
+		render( <SeparatorEdit { ...props } /> );
+		expect( useBlockProps ).toHaveBeenCalledWith( {
+			className: 'has-css-opacity',
+			style: undefined,
+		} );
+	} );
+
+	test( 'should add inline background style for block without dots style selected and custom color specified', () => {
+		const props = {
+			...defaultProps,
+			attributes: {
+				...defaultAttributes,
+				style: { color: { background: '#ff0000' } },
+			},
+		};
+		render( <SeparatorEdit { ...props } /> );
+		expect( useBlockProps ).toHaveBeenCalledWith( {
+			// For backwards compatibility the has-text-color class is also added even though it is only needed for
+			// is-style-dots as this class was always added to v1 blocks, so may be expected by themes and plugins.
+			className: 'has-text-color has-alpha-channel-opacity',
+			style: {
+				backgroundColor: '#ff0000',
+				color: '#ff0000',
+			},
+		} );
+	} );
+
+	test( 'should add inline color style for block with dots style selected and custom color specified', () => {
+		const props = {
+			...defaultProps,
+			attributes: {
+				...defaultAttributes,
+				className: 'is-style-dots',
+				style: { color: { background: '#ff0000' } },
+			},
+		};
+		render( <SeparatorEdit { ...props } /> );
+		expect( useBlockProps ).toHaveBeenCalledWith( {
+			className: 'has-text-color has-alpha-channel-opacity',
+			style: {
+				backgroundColor: '#ff0000',
+				color: '#ff0000',
+			},
+		} );
+	} );
+
+	test( 'should add color class when color from palette specified', () => {
+		const props = {
+			...defaultProps,
+			attributes: {
+				...defaultAttributes,
+				backgroundColor: 'banana',
+			},
+		};
+		render( <SeparatorEdit { ...props } /> );
+		// Note that only the manual addition of the text color class can be checked as the
+		// background color classes are added by useBlockProps which has to be mocked.
+		expect( useBlockProps ).toHaveBeenCalledWith( {
+			className:
+				'has-text-color has-banana-color has-alpha-channel-opacity',
+			style: undefined,
+		} );
+	} );
+} );

package/src/separator/theme.scss

@@ -1,9 +1,15 @@
+// Import styles for rendering the static content of deprecated block versions.
+@import "./deprecated.scss";
+
 .wp-block-separator {
 	border: none;
 	border-bottom: 2px solid currentColor;
 	margin-left: auto;
 	margin-right: auto;
-	opacity: 0.4;
+
+	&.has-alpha-channel-opacity {
+		opacity: initial;
+	}
 
 	// Default, thin style
 	&:not(.is-style-wide):not(.is-style-dots) {

package/src/separator/use-deprecated-opacity.js

@@ -0,0 +1,41 @@
+/**
+ * WordPress dependencies
+ */
+import { useEffect, useState } from '@wordpress/element';
+import { usePrevious } from '@wordpress/compose';
+
+export default function useDeprecatedOpacity(
+	opacity,
+	currentColor,
+	setAttributes
+) {
+	const [
+		deprecatedOpacityWithNoColor,
+		setDeprecatedOpacityWithNoColor,
+	] = useState( false );
+	const previousColor = usePrevious( currentColor );
+
+	// A separator with no color set will always have previousColor set to undefined,
+	// and we need to differentiate these from those with color set that will return
+	// previousColor as undefined on the first render.
+	useEffect( () => {
+		if ( opacity === 'css' && ! currentColor && ! previousColor ) {
+			setDeprecatedOpacityWithNoColor( true );
+		}
+	}, [ currentColor, previousColor, opacity ] );
+
+	// For deprecated blocks, that have a default 0.4 css opacity set, we
+	// need to remove this if the current color is changed, or a color is added.
+	// In these instances the opacity attribute is set back to the default of
+	// alpha-channel which allows a new custom opacity to be set via the color picker.
+	useEffect( () => {
+		if (
+			opacity === 'css' &&
+			( ( deprecatedOpacityWithNoColor && currentColor ) ||
+				( previousColor && currentColor !== previousColor ) )
+		) {
+			setAttributes( { opacity: 'alpha-channel' } );
+			setDeprecatedOpacityWithNoColor( false );
+		}
+	}, [ deprecatedOpacityWithNoColor, currentColor, previousColor ] );
+}

package/src/site-logo/editor.scss

@@ -1,4 +1,5 @@
-.wp-block[data-align="center"] > .wp-block-site-logo {
+.wp-block[data-align="center"] > .wp-block-site-logo,
+.wp-block-site-logo.aligncenter > div {
 	display: table;
 	margin-left: auto;
 	margin-right: auto;
@@ -45,6 +46,7 @@
 
 	// Style the placeholder.
 	.components-placeholder {
+		display: flex;
 		justify-content: center;
 		align-items: center;
 		box-shadow: none;

package/src/social-links/block.json

@@ -56,7 +56,7 @@
 			}
 		},
 		"spacing": {
-			"blockGap": true,
+			"blockGap": [ "horizontal", "vertical" ],
 			"margin": [ "top", "bottom" ],
 			"units": [ "px", "em", "rem", "vh", "vw" ],
 			"__experimentalDefaultControls": {