@wordpress/block-library 8.31.0 → 8.32.0

package/src/post-featured-image/block.json

@@ -61,7 +61,6 @@
 	"supports": {
 		"align": [ "left", "right", "center", "wide", "full" ],
 		"color": {
-			"__experimentalDuotone": "img, .wp-block-post-featured-image__placeholder, .components-placeholder__illustration, .components-placeholder::before",
 			"text": false,
 			"background": false
 		},
@@ -69,7 +68,6 @@
 			"color": true,
 			"radius": true,
 			"width": true,
-			"__experimentalSelector": "img, .block-editor-media-placeholder, .wp-block-post-featured-image__overlay",
 			"__experimentalSkipSerialization": true,
 			"__experimentalDefaultControls": {
 				"color": true,
@@ -77,6 +75,9 @@
 				"width": true
 			}
 		},
+		"filter": {
+			"duotone": true
+		},
 		"shadow": {
 			"__experimentalSkipSerialization": true
 		},
@@ -90,7 +91,11 @@
 		}
 	},
 	"selectors": {
-		"shadow": ".wp-block-post-featured-image img, .wp-block-post-featured-image .components-placeholder"
+		"border": ".wp-block-post-featured-image img, .wp-block-post-featured-image .block-editor-media-placeholder, .wp-block-post-featured-image .wp-block-post-featured-image__overlay",
+		"shadow": ".wp-block-post-featured-image img, .wp-block-post-featured-image .components-placeholder",
+		"filter": {
+			"duotone": ".wp-block-post-featured-image img, .wp-block-post-featured-image .wp-block-post-featured-image__placeholder, .wp-block-post-featured-image .components-placeholder__illustration, .wp-block-post-featured-image .components-placeholder::before"
+		}
 	},
 	"editorStyle": "wp-block-post-featured-image-editor",
 	"style": "wp-block-post-featured-image"

package/src/post-featured-image/edit.js

@@ -36,6 +36,7 @@ import { store as noticesStore } from '@wordpress/notices';
  * Internal dependencies
  */
 import DimensionControls from './dimension-controls';
+import OverlayControls from './overlay-controls';
 import Overlay from './overlay';
 
 const ALLOWED_MEDIA_TYPES = [ 'image' ];
@@ -181,7 +182,7 @@ export default function PostFeaturedImageEdit( {
 
 	const controls = blockEditingMode === 'default' && (
 		<>
-			<Overlay
+			<OverlayControls
 				attributes={ attributes }
 				setAttributes={ setAttributes }
 				clientId={ clientId }
@@ -262,6 +263,11 @@ export default function PostFeaturedImageEdit( {
 					) : (
 						placeholder()
 					) }
+					<Overlay
+						attributes={ attributes }
+						setAttributes={ setAttributes }
+						clientId={ clientId }
+					/>
 				</div>
 			</>
 		);
@@ -367,6 +373,11 @@ export default function PostFeaturedImageEdit( {
 				) : (
 					image
 				) }
+				<Overlay
+					attributes={ attributes }
+					setAttributes={ setAttributes }
+					clientId={ clientId }
+				/>
 			</figure>
 		</>
 	);

package/src/post-featured-image/editor.scss

@@ -1,5 +1,5 @@
 // Provide special styling for the placeholder.
-// @todo: this particular minimal style of placeholder could be componentized further.
+// @todo this particular minimal style of placeholder could be componentized further.
 .wp-block-post-featured-image {
 	.block-editor-media-placeholder {
 		z-index: 1; // Need to put it above the overlay so the upload button works.

package/src/post-featured-image/overlay-controls.js

@@ -0,0 +1,88 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	RangeControl,
+	__experimentalToolsPanelItem as ToolsPanelItem,
+} from '@wordpress/components';
+import {
+	InspectorControls,
+	withColors,
+	__experimentalColorGradientSettingsDropdown as ColorGradientSettingsDropdown,
+	__experimentalUseGradient,
+	__experimentalUseMultipleOriginColorsAndGradients as useMultipleOriginColorsAndGradients,
+} from '@wordpress/block-editor';
+import { compose } from '@wordpress/compose';
+import { __ } from '@wordpress/i18n';
+
+const Overlay = ( {
+	clientId,
+	attributes,
+	setAttributes,
+	overlayColor,
+	setOverlayColor,
+} ) => {
+	const { dimRatio } = attributes;
+	const { gradientValue, setGradient } = __experimentalUseGradient();
+	const colorGradientSettings = useMultipleOriginColorsAndGradients();
+
+	if ( ! colorGradientSettings.hasColorsOrGradients ) {
+		return null;
+	}
+
+	return (
+		<InspectorControls group="color">
+			<ColorGradientSettingsDropdown
+				__experimentalIsRenderedInSidebar
+				settings={ [
+					{
+						colorValue: overlayColor.color,
+						gradientValue,
+						label: __( 'Overlay' ),
+						onColorChange: setOverlayColor,
+						onGradientChange: setGradient,
+						isShownByDefault: true,
+						resetAllFilter: () => ( {
+							overlayColor: undefined,
+							customOverlayColor: undefined,
+							gradient: undefined,
+							customGradient: undefined,
+						} ),
+					},
+				] }
+				panelId={ clientId }
+				{ ...colorGradientSettings }
+			/>
+			<ToolsPanelItem
+				hasValue={ () => dimRatio !== undefined }
+				label={ __( 'Overlay opacity' ) }
+				onDeselect={ () => setAttributes( { dimRatio: 0 } ) }
+				resetAllFilter={ () => ( {
+					dimRatio: 0,
+				} ) }
+				isShownByDefault
+				panelId={ clientId }
+			>
+				<RangeControl
+					__nextHasNoMarginBottom
+					label={ __( 'Overlay opacity' ) }
+					value={ dimRatio }
+					onChange={ ( newDimRatio ) =>
+						setAttributes( {
+							dimRatio: newDimRatio,
+						} )
+					}
+					min={ 0 }
+					max={ 100 }
+					step={ 10 }
+					required
+					__next40pxDefaultSize
+				/>
+			</ToolsPanelItem>
+		</InspectorControls>
+	);
+};
+
+export default compose( [
+	withColors( { overlayColor: 'background-color' } ),
+] )( Overlay );

package/src/post-featured-image/overlay.js

@@ -7,35 +7,21 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import {
-	RangeControl,
-	__experimentalToolsPanelItem as ToolsPanelItem,
-} from '@wordpress/components';
-import {
-	InspectorControls,
 	withColors,
-	__experimentalColorGradientSettingsDropdown as ColorGradientSettingsDropdown,
 	__experimentalUseGradient,
 	__experimentalUseMultipleOriginColorsAndGradients as useMultipleOriginColorsAndGradients,
 	__experimentalUseBorderProps as useBorderProps,
 } from '@wordpress/block-editor';
 import { compose } from '@wordpress/compose';
-import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
 import { dimRatioToClass } from './utils';
 
-const Overlay = ( {
-	clientId,
-	attributes,
-	setAttributes,
-	overlayColor,
-	setOverlayColor,
-} ) => {
+const Overlay = ( { attributes, overlayColor } ) => {
 	const { dimRatio } = attributes;
-	const { gradientClass, gradientValue, setGradient } =
-		__experimentalUseGradient();
+	const { gradientClass, gradientValue } = __experimentalUseGradient();
 	const colorGradientSettings = useMultipleOriginColorsAndGradients();
 
 	const borderProps = useBorderProps( attributes );
@@ -45,79 +31,26 @@ const Overlay = ( {
 		...borderProps.style,
 	};
 
-	if ( ! colorGradientSettings.hasColorsOrGradients ) {
+	if ( ! colorGradientSettings.hasColorsOrGradients || ! dimRatio ) {
 		return null;
 	}
 
 	return (
-		<>
-			{ !! dimRatio && (
-				<span
-					aria-hidden="true"
-					className={ classnames(
-						'wp-block-post-featured-image__overlay',
-						dimRatioToClass( dimRatio ),
-						{
-							[ overlayColor.class ]: overlayColor.class,
-							'has-background-dim': dimRatio !== undefined,
-							'has-background-gradient': gradientValue,
-							[ gradientClass ]: gradientClass,
-						},
-						borderProps.className
-					) }
-					style={ overlayStyles }
-				/>
+		<span
+			aria-hidden="true"
+			className={ classnames(
+				'wp-block-post-featured-image__overlay',
+				dimRatioToClass( dimRatio ),
+				{
+					[ overlayColor.class ]: overlayColor.class,
+					'has-background-dim': dimRatio !== undefined,
+					'has-background-gradient': gradientValue,
+					[ gradientClass ]: gradientClass,
+				},
+				borderProps.className
 			) }
-			<InspectorControls group="color">
-				<ColorGradientSettingsDropdown
-					__experimentalIsRenderedInSidebar
-					settings={ [
-						{
-							colorValue: overlayColor.color,
-							gradientValue,
-							label: __( 'Overlay' ),
-							onColorChange: setOverlayColor,
-							onGradientChange: setGradient,
-							isShownByDefault: true,
-							resetAllFilter: () => ( {
-								overlayColor: undefined,
-								customOverlayColor: undefined,
-								gradient: undefined,
-								customGradient: undefined,
-							} ),
-						},
-					] }
-					panelId={ clientId }
-					{ ...colorGradientSettings }
-				/>
-				<ToolsPanelItem
-					hasValue={ () => dimRatio !== undefined }
-					label={ __( 'Overlay opacity' ) }
-					onDeselect={ () => setAttributes( { dimRatio: 0 } ) }
-					resetAllFilter={ () => ( {
-						dimRatio: 0,
-					} ) }
-					isShownByDefault
-					panelId={ clientId }
-				>
-					<RangeControl
-						__nextHasNoMarginBottom
-						label={ __( 'Overlay opacity' ) }
-						value={ dimRatio }
-						onChange={ ( newDimRatio ) =>
-							setAttributes( {
-								dimRatio: newDimRatio,
-							} )
-						}
-						min={ 0 }
-						max={ 100 }
-						step={ 10 }
-						required
-						__next40pxDefaultSize
-					/>
-				</ToolsPanelItem>
-			</InspectorControls>
-		</>
+			style={ overlayStyles }
+		/>
 	);
 };
 

package/src/pullquote/theme.scss

@@ -1,9 +1,11 @@
-.wp-block-pullquote {
+:where(.wp-block-pullquote) {
 	border-top: 4px solid currentColor;
 	border-bottom: 4px solid currentColor;
 	margin-bottom: 1.75em;
 	color: currentColor;
+}
 
+.wp-block-pullquote {
 	cite,
 	footer,
 	&__citation {

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

@@ -10,6 +10,8 @@
  *
  * @since 6.0.0
  *
+ * @global WP_Query $wp_query WordPress Query object.
+ *
  * @param array    $attributes Block attributes.
  * @param string   $content    Block default content.
  * @param WP_Block $block      Block instance.

package/src/query-pagination-next/index.php

@@ -10,6 +10,8 @@
  *
  * @since 5.8.0
  *
+ * @global WP_Query $wp_query WordPress Query object.
+ *
  * @param array    $attributes Block attributes.
  * @param string   $content    Block default content.
  * @param WP_Block $block      Block instance.

package/src/query-pagination-numbers/index.php

@@ -10,6 +10,8 @@
  *
  * @since 5.8.0
  *
+ * @global WP_Query $wp_query WordPress Query object.
+ *
  * @param array    $attributes Block attributes.
  * @param string   $content    Block default content.
  * @param WP_Block $block      Block instance.

package/src/quote/edit.js

@@ -10,21 +10,21 @@ import { __ } from '@wordpress/i18n';
 import {
 	AlignmentControl,
 	BlockControls,
-	RichText,
 	useBlockProps,
 	useInnerBlocksProps,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import { BlockQuotation } from '@wordpress/components';
-import { useDispatch, useSelect, useRegistry } from '@wordpress/data';
-import { createBlock, getDefaultBlockName } from '@wordpress/blocks';
+import { useDispatch, useRegistry } from '@wordpress/data';
 import { Platform, useEffect } from '@wordpress/element';
 import deprecated from '@wordpress/deprecated';
+import { verse } from '@wordpress/icons';
 
 /**
  * Internal dependencies
  */
 import { migrateToQuoteV2 } from './deprecated';
+import { Caption } from '../utils/caption';
 
 const isWebPlatform = Platform.OS === 'web';
 
@@ -73,23 +73,12 @@ export default function QuoteEdit( {
 	clientId,
 	className,
 	style,
+	isSelected,
 } ) {
-	const { textAlign, citation } = attributes;
+	const { textAlign } = attributes;
 
 	useMigrateOnLoad( attributes, clientId );
 
-	const hasSelection = useSelect(
-		( select ) => {
-			const { isBlockSelected, hasSelectedInnerBlock } =
-				select( blockEditorStore );
-			return (
-				hasSelectedInnerBlock( clientId, true ) ||
-				isBlockSelected( clientId )
-			);
-		},
-		[ clientId ]
-	);
-
 	const blockProps = useBlockProps( {
 		className: classNames( className, {
 			[ `has-text-align-${ textAlign }` ]: textAlign,
@@ -100,6 +89,7 @@ export default function QuoteEdit( {
 		template: TEMPLATE,
 		templateInsertUpdatesSelection: true,
 		__experimentalCaptureToolbars: true,
+		renderAppender: false,
 	} );
 
 	return (
@@ -114,33 +104,27 @@ export default function QuoteEdit( {
 			</BlockControls>
 			<BlockQuotation { ...innerBlocksProps }>
 				{ innerBlocksProps.children }
-				{ ( ! RichText.isEmpty( citation ) || hasSelection ) && (
-					<RichText
-						identifier="citation"
-						tagName={ isWebPlatform ? 'cite' : undefined }
-						style={ { display: 'block' } }
-						value={ citation }
-						onChange={ ( nextCitation ) => {
-							setAttributes( {
-								citation: nextCitation,
-							} );
-						} }
-						__unstableMobileNoFocusOnMount
-						aria-label={ __( 'Quote citation' ) }
-						placeholder={
-							// translators: placeholder text used for the
-							// citation
-							__( 'Add citation' )
-						}
-						className="wp-block-quote__citation"
-						__unstableOnSplitAtEnd={ () =>
-							insertBlocksAfter(
-								createBlock( getDefaultBlockName() )
-							)
-						}
-						{ ...( ! isWebPlatform ? { textAlign } : {} ) }
-					/>
-				) }
+				<Caption
+					attributeKey="citation"
+					tagName={ isWebPlatform ? 'cite' : undefined }
+					style={ isWebPlatform && { display: 'block' } }
+					isSelected={ isSelected }
+					attributes={ attributes }
+					setAttributes={ setAttributes }
+					__unstableMobileNoFocusOnMount
+					icon={ verse }
+					label={ __( 'Quote citation' ) }
+					placeholder={
+						// translators: placeholder text used for the
+						// citation
+						__( 'Add citation' )
+					}
+					addLabel={ __( 'Add citation' ) }
+					removeLabel={ __( 'Remove citation' ) }
+					className="wp-block-quote__citation"
+					insertBlocksAfter={ insertBlocksAfter }
+					{ ...( ! isWebPlatform ? { textAlign } : {} ) }
+				/>
 			</BlockQuotation>
 		</>
 	);

package/src/quote/test/edit.native.js

@@ -10,7 +10,6 @@ import {
 	getEditorHtml,
 	fireEvent,
 	within,
-	waitFor,
 	typeInRichText,
 } from 'test/helpers';
 
@@ -40,14 +39,9 @@ describe( 'Quote', () => {
 				},
 			}
 		);
-		// Await inner blocks to be rendered
-		const citationBlock = await waitFor( () =>
-			screen.getByPlaceholderText( 'Add citation' )
-		);
 
 		// Act
 		fireEvent.press( quoteBlock );
-		// screen.debug();
 		let quoteTextInput =
 			within( quoteBlock ).getByPlaceholderText( 'Start writing…' );
 		typeInRichText( quoteTextInput, 'A great statement.' );
@@ -61,6 +55,10 @@ describe( 'Quote', () => {
 				'Start writing…'
 			)[ 1 ];
 		typeInRichText( quoteTextInput, 'Again.' );
+		fireEvent.press( screen.getByLabelText( 'Navigate Up' ) );
+		fireEvent.press( screen.getByLabelText( 'Add citation' ) );
+		const citationBlock =
+			await screen.findByPlaceholderText( 'Add citation' );
 		const citationTextInput =
 			within( citationBlock ).getByPlaceholderText( 'Add citation' );
 		typeInRichText( citationTextInput, 'A person' );

package/src/quote/theme.scss

@@ -1,8 +1,7 @@
-.wp-block-quote {
+:where(.wp-block-quote) {
 	border-left: 0.25em solid currentColor;
 	margin: 0 0 1.75em 0;
 	padding-left: 1em;
-
 	cite,
 	footer {
 		color: currentColor;

package/src/search/style.scss

@@ -97,6 +97,17 @@ $button-spacing-y: math.div($grid-unit-15, 2); // 6px
 	}
 }
 
+// We are lowering the specificity so that the input element can override the rule for the input element inside the search block.
+:where(.wp-block-search__input) {
+	font-family: inherit;
+	font-weight: inherit;
+	font-size: inherit;
+	line-height: inherit;
+	letter-spacing: inherit;
+	text-transform: inherit;
+	font-style: inherit;
+}
+
 // We are lowering the specificity so that the button element can override the rule for the button inside the search block.
 :where(.wp-block-search__button-inside .wp-block-search__inside-wrapper) {
 	padding: $grid-unit-05;

package/src/site-logo/editor.scss

@@ -31,7 +31,7 @@
 }
 
 // Provide special styling for the placeholder.
-// @todo: this particular minimal style of placeholder could be componentized further.
+// @todo this particular minimal style of placeholder could be componentized further.
 .wp-block-site-logo.wp-block-site-logo {
 
 	&.is-default-size .components-placeholder {
@@ -54,7 +54,7 @@
 		border-radius: inherit;
 
 		// Provide a minimum size for the placeholder, for when the logo is resized.
-		// @todo: resizing is currently only possible by adding an image, resizing,
+		// @todo resizing is currently only possible by adding an image, resizing,
 		// and then removing the image again. We might want to enable resizing on the
 		// placeholder itself.
 		min-height: $grid-unit-60;

package/src/site-tagline/block.json

@@ -10,6 +10,10 @@
 	"attributes": {
 		"textAlign": {
 			"type": "string"
+		},
+		"level": {
+			"type": "number",
+			"default": 0
 		}
 	},
 	"example": {},

package/src/site-tagline/edit.js

@@ -12,17 +12,20 @@ import {
 	AlignmentControl,
 	useBlockProps,
 	BlockControls,
+	HeadingLevelDropdown,
 	RichText,
 } from '@wordpress/block-editor';
 import { __ } from '@wordpress/i18n';
 import { createBlock, getDefaultBlockName } from '@wordpress/blocks';
 
+const HEADING_LEVELS = [ 0, 1, 2, 3, 4, 5, 6 ];
+
 export default function SiteTaglineEdit( {
 	attributes,
 	setAttributes,
 	insertBlocksAfter,
 } ) {
-	const { textAlign } = attributes;
+	const { textAlign, level } = attributes;
 	const { canUserEdit, tagline } = useSelect( ( select ) => {
 		const { canUser, getEntityRecord, getEditedEntityRecord } =
 			select( coreStore );
@@ -38,6 +41,7 @@ export default function SiteTaglineEdit( {
 		};
 	}, [] );
 
+	const TagName = level === 0 ? 'p' : `h${ level }`;
 	const { editEntityRecord } = useDispatch( coreStore );
 
 	function setTagline( newTagline ) {
@@ -58,7 +62,7 @@ export default function SiteTaglineEdit( {
 			onChange={ setTagline }
 			aria-label={ __( 'Site tagline text' ) }
 			placeholder={ __( 'Write site tagline…' ) }
-			tagName="p"
+			tagName={ TagName }
 			value={ tagline }
 			disableLineBreaks
 			__unstableOnSplitAtEnd={ () =>
@@ -67,11 +71,20 @@ export default function SiteTaglineEdit( {
 			{ ...blockProps }
 		/>
 	) : (
-		<p { ...blockProps }>{ tagline || __( 'Site Tagline placeholder' ) }</p>
+		<TagName { ...blockProps }>
+			{ tagline || __( 'Site Tagline placeholder' ) }
+		</TagName>
 	);
 	return (
 		<>
 			<BlockControls group="block">
+				<HeadingLevelDropdown
+					options={ HEADING_LEVELS }
+					value={ level }
+					onChange={ ( newLevel ) =>
+						setAttributes( { level: newLevel } )
+					}
+				/>
 				<AlignmentControl
 					onChange={ ( newAlign ) =>
 						setAttributes( { textAlign: newAlign } )

package/src/site-tagline/index.php

@@ -19,11 +19,18 @@ function render_block_core_site_tagline( $attributes ) {
 	if ( ! $site_tagline ) {
 		return;
 	}
+
+	$tag_name           = 'p';
 	$align_class_name   = empty( $attributes['textAlign'] ) ? '' : "has-text-align-{$attributes['textAlign']}";
 	$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => $align_class_name ) );
 
+	if ( isset( $attributes['level'] ) && 0 !== $attributes['level'] ) {
+		$tag_name = 'h' . (int) $attributes['level'];
+	}
+
 	return sprintf(
-		'<p %1$s>%2$s</p>',
+		'<%1$s %2$s>%3$s</%1$s>',
+		$tag_name,
 		$wrapper_attributes,
 		$site_tagline
 	);
@@ -42,4 +49,5 @@ function register_block_core_site_tagline() {
 		)
 	);
 }
+
 add_action( 'init', 'register_block_core_site_tagline' );

package/src/social-links/editor.scss

@@ -4,13 +4,6 @@
 		display: inline-block;
 		margin-left: $grid-unit-10;
 	}
-
-	// Unset background colors that can be inherited from Global Styles.
-	// This is a duplicate of a rule in style.scss, as it needs higher specificity in the editor.
-	// The rule can be removed if editor styles get lowered in specificity.
-	&.wp-block-social-links {
-		background: none;
-	}
 }
 
 // Prevent toolbar from jumping when selecting / hovering a link.
@@ -74,7 +67,6 @@
 .wp-block-social-links .wp-block-social-links__social-prompt {
 	min-height: $button-size-small;
 	list-style: none;
-	order: 2; // Move after the appender button. Because this element is non-interactive, it does not affect tab order.
 
 	// Show as block UI.
 	font-family: $default-font;
@@ -93,7 +85,7 @@
 }
 
 // Improve the preview, ensure buttons are fully opaque despite being disabled.
-// @todo: Look at improving the preview component to make this unnecessary.
+// @todo Look at improving the preview component to make this unnecessary.
 .block-editor-block-preview__content .components-button:disabled {
 	opacity: 1;
 }