@wordpress/block-library 8.31.0 → 8.33.0

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/post-title/edit.js

@@ -18,12 +18,8 @@ import {
 import { ToggleControl, TextControl, PanelBody } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { createBlock, getDefaultBlockName } from '@wordpress/blocks';
-import { useEntityProp } from '@wordpress/core-data';
-
-/**
- * Internal dependencies
- */
-import { useCanEditEntity } from '../utils/hooks';
+import { useEntityProp, store as coreStore } from '@wordpress/core-data';
+import { useSelect } from '@wordpress/data';
 
 export default function PostTitleEdit( {
 	attributes: { level, textAlign, isLink, rel, linkTarget },
@@ -31,18 +27,28 @@ export default function PostTitleEdit( {
 	context: { postType, postId, queryId },
 	insertBlocksAfter,
 } ) {
-	const TagName = 'h' + level;
+	const TagName = level === 0 ? 'p' : `h${ level }`;
 	const isDescendentOfQueryLoop = Number.isFinite( queryId );
-	/**
-	 * Hack: useCanEditEntity may trigger an OPTIONS request to the REST API via the canUser resolver.
-	 * However, when the Post Title is a descendant of a Query Loop block, the title cannot be edited.
-	 * In order to avoid these unnecessary requests, we call the hook without
-	 * the proper data, resulting in returning early without making them.
-	 */
-	const userCanEdit = useCanEditEntity(
-		'postType',
-		! isDescendentOfQueryLoop && postType,
-		postId
+	const userCanEdit = useSelect(
+		( select ) => {
+			/**
+			 * useCanEditEntity may trigger an OPTIONS request to the REST API
+			 * via the canUser resolver. However, when the Post Title is a
+			 * descendant of a Query Loop block, the title cannot be edited. In
+			 * order to avoid these unnecessary requests, we call the hook
+			 * without the proper data, resulting in returning early without
+			 * making them.
+			 */
+			if ( isDescendentOfQueryLoop ) {
+				return false;
+			}
+			return select( coreStore ).canUserEditEntityRecord(
+				'postType',
+				postType,
+				postId
+			);
+		},
+		[ isDescendentOfQueryLoop, postType, postId ]
 	);
 	const [ rawTitle = '', setTitle, fullTitle ] = useEntityProp(
 		'postType',

package/src/post-title/index.php

@@ -33,7 +33,7 @@ function render_block_core_post_title( $attributes, $content, $block ) {
 
 	$tag_name = 'h2';
 	if ( isset( $attributes['level'] ) ) {
-		$tag_name = 'h' . $attributes['level'];
+		$tag_name = 0 === $attributes['level'] ? 'p' : 'h' . (int) $attributes['level'];
 	}
 
 	if ( isset( $attributes['isLink'] ) && $attributes['isLink'] ) {

package/src/pullquote/style.scss

@@ -1,5 +1,4 @@
 .wp-block-pullquote {
-	padding: 4em 0;
 	text-align: center; // Default text-alignment where the `textAlign` attribute value isn't specified.
 	overflow-wrap: break-word; // Break long strings of text without spaces so they don't overflow the block.
 	box-sizing: border-box;
@@ -36,9 +35,10 @@
 	}
 }
 
-// Lowest specificity to avoid overriding layout styles.
+// Lowest specificity to avoid overriding layout and global styles.
 :where(.wp-block-pullquote) {
 	margin: 0 0 1em 0;
+	padding: 4em 0;
 }
 
 // Ensure that we are reasonably specific to override theme defaults.

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/edit/enhanced-pagination-modal.js

@@ -43,7 +43,7 @@ export default function EnhancedPaginationModal( {
 	if ( hasBlocksFromPlugins ) {
 		notice =
 			__(
-				'Currently, avoiding full page reloads is not possible when blocks from plugins are present inside the Query block.'
+				'Currently, avoiding full page reloads is not possible when non-interactive or non-client Navigation compatible blocks from plugins are present inside the Query block.'
 			) +
 			' ' +
 			notice;

package/src/query/utils.js

@@ -6,7 +6,11 @@ import { useMemo } from '@wordpress/element';
 import { store as coreStore } from '@wordpress/core-data';
 import { store as blockEditorStore } from '@wordpress/block-editor';
 import { decodeEntities } from '@wordpress/html-entities';
-import { cloneBlock, store as blocksStore } from '@wordpress/blocks';
+import {
+	cloneBlock,
+	getBlockSupport,
+	store as blocksStore,
+} from '@wordpress/blocks';
 
 /** @typedef {import('@wordpress/blocks').WPBlockVariation} WPBlockVariation */
 
@@ -375,7 +379,24 @@ export const useUnsupportedBlocks = ( clientId ) => {
 			getClientIdsOfDescendants( clientId ).forEach(
 				( descendantClientId ) => {
 					const blockName = getBlockName( descendantClientId );
-					if ( ! blockName.startsWith( 'core/' ) ) {
+					/*
+					 * Client side navigation can be true in two states:
+					 *  - supports.interactivity = true;
+					 *  - supports.interactivity.clientNavigation = true;
+					 */
+					const blockSupportsInteractivity = Object.is(
+						getBlockSupport( blockName, 'interactivity' ),
+						true
+					);
+					const blockSupportsInteractivityClientNavigation =
+						getBlockSupport(
+							blockName,
+							'interactivity.clientNavigation'
+						);
+					const blockInteractivity =
+						blockSupportsInteractivity ||
+						blockSupportsInteractivityClientNavigation;
+					if ( ! blockInteractivity ) {
 						blocks.hasBlocksFromPlugins = true;
 					} else if ( blockName === 'core/post-content' ) {
 						blocks.hasPostContentBlock = true;

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' : 'p' }
+					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/separator/style.scss

@@ -1,12 +1,4 @@
 .wp-block-separator {
-	border-top: 2px solid currentColor;
-	// Default, thin style, is stored in theme.scss so it can be opted out of
-
-	// Unset the left, right and bottom borders by default, otherwise some browsers will render them as "inset".
-	border-left: none;
-	border-right: none;
-	border-bottom: none;
-
 	// Dots style
 	&.is-style-dots {
 		// Override any background themes often set on the hr tag for this style.
@@ -28,3 +20,14 @@
 		}
 	}
 }
+
+// Lowest specificity to avoid overriding global styles.
+:where(.wp-block-separator) {
+	border-top: 2px solid currentColor;
+	// Default, thin style, is stored in theme.scss so it can be opted out of
+
+	// Unset the left, right and bottom borders by default, otherwise some browsers will render them as "inset".
+	border-left: none;
+	border-right: none;
+	border-bottom: none;
+}