@wordpress/block-library 9.11.0 → 9.12.1-next.082ed6819.0

package/src/query/test/utils.js

@@ -2,7 +2,11 @@
  * Internal dependencies
  */
 import { terms } from './fixtures';
-import { getEntitiesInfo, getValueFromObjectPath } from '../utils';
+import {
+	getEntitiesInfo,
+	getValueFromObjectPath,
+	getQueryContextFromTemplate,
+} from '../utils';
 
 describe( 'Query block utils', () => {
 	describe( 'getEntitiesInfo', () => {
@@ -61,4 +65,58 @@ describe( 'Query block utils', () => {
 			expect( result ).toBe( 'test' );
 		} );
 	} );
+
+	describe( 'getQueryContextFromTemplate', () => {
+		it( 'should return the correct query context based on template slug', () => {
+			expect( getQueryContextFromTemplate() ).toStrictEqual( {
+				isSingular: true,
+			} );
+			expect( getQueryContextFromTemplate( '404' ) ).toStrictEqual( {
+				isSingular: true,
+				templateType: '404',
+			} );
+			expect( getQueryContextFromTemplate( 'blank' ) ).toStrictEqual( {
+				isSingular: true,
+				templateType: 'blank',
+			} );
+			expect( getQueryContextFromTemplate( 'single' ) ).toStrictEqual( {
+				isSingular: true,
+				templateType: 'single',
+			} );
+			expect(
+				getQueryContextFromTemplate( 'single-film' )
+			).toStrictEqual( {
+				isSingular: true,
+				templateType: 'single',
+			} );
+			expect( getQueryContextFromTemplate( 'page' ) ).toStrictEqual( {
+				isSingular: true,
+				templateType: 'page',
+			} );
+			expect( getQueryContextFromTemplate( 'wp' ) ).toStrictEqual( {
+				isSingular: true,
+				templateType: 'custom',
+			} );
+			expect( getQueryContextFromTemplate( 'category' ) ).toStrictEqual( {
+				isSingular: false,
+				templateType: 'category',
+			} );
+			expect(
+				getQueryContextFromTemplate( 'category-dog' )
+			).toStrictEqual( {
+				isSingular: false,
+				templateType: 'category',
+			} );
+			expect( getQueryContextFromTemplate( 'archive' ) ).toStrictEqual( {
+				isSingular: false,
+				templateType: 'archive',
+			} );
+			expect(
+				getQueryContextFromTemplate( 'archive-film' )
+			).toStrictEqual( {
+				isSingular: false,
+				templateType: 'archive',
+			} );
+		} );
+	} );
 } );

package/src/query/utils.js

@@ -272,32 +272,31 @@ export const getTransformedBlocksFromPattern = (
  * @return {string} The block name to be used in the patterns suggestions.
  */
 export function useBlockNameForPatterns( clientId, attributes ) {
-	const activeVariationName = useSelect(
-		( select ) =>
-			select( blocksStore ).getActiveBlockVariation(
-				'core/query',
-				attributes
-			)?.name,
-		[ attributes ]
-	);
-	const blockName = `core/query/${ activeVariationName }`;
-	const hasActiveVariationPatterns = useSelect(
+	return useSelect(
 		( select ) => {
+			const activeVariationName = select(
+				blocksStore
+			).getActiveBlockVariation( 'core/query', attributes )?.name;
+
 			if ( ! activeVariationName ) {
-				return false;
+				return 'core/query';
 			}
+
 			const { getBlockRootClientId, getPatternsByBlockTypes } =
 				select( blockEditorStore );
+
 			const rootClientId = getBlockRootClientId( clientId );
 			const activePatterns = getPatternsByBlockTypes(
-				blockName,
+				`core/query/${ activeVariationName }`,
 				rootClientId
 			);
-			return activePatterns.length > 0;
+
+			return activePatterns.length > 0
+				? `core/query/${ activeVariationName }`
+				: 'core/query';
 		},
-		[ clientId, activeVariationName, blockName ]
+		[ clientId, attributes ]
 	);
-	return hasActiveVariationPatterns ? blockName : 'core/query';
 }
 
 /**
@@ -435,3 +434,32 @@ export const useUnsupportedBlocks = ( clientId ) => {
 		[ clientId ]
 	);
 };
+
+/**
+ * Helper function that returns the query context from the editor based on the
+ * available template slug.
+ *
+ * @param {string} templateSlug Current template slug based on context.
+ * @return {Object} An object with isSingular and templateType properties.
+ */
+export function getQueryContextFromTemplate( templateSlug ) {
+	// In the Post Editor, the template slug is not available.
+	if ( ! templateSlug ) {
+		return { isSingular: true };
+	}
+	let isSingular = false;
+	let templateType = templateSlug === 'wp' ? 'custom' : templateSlug;
+	const singularTemplates = [ '404', 'blank', 'single', 'page', 'custom' ];
+	const templateTypeFromSlug = templateSlug.includes( '-' )
+		? templateSlug.split( '-', 1 )[ 0 ]
+		: templateSlug;
+	const queryFromTemplateSlug = templateSlug.includes( '-' )
+		? templateSlug.split( '-' ).slice( 1 ).join( '-' )
+		: '';
+	if ( queryFromTemplateSlug ) {
+		templateType = templateTypeFromSlug;
+	}
+	isSingular = singularTemplates.includes( templateType );
+
+	return { isSingular, templateType };
+}

package/src/rss/index.php

@@ -61,17 +61,20 @@ function render_block_core_rss( $attributes ) {
 			$author = $item->get_author();
 			if ( is_object( $author ) ) {
 				$author = $author->get_name();
-				$author = '<span class="wp-block-rss__item-author">' . sprintf(
-					/* translators: byline. %s: author. */
-					__( 'by %s' ),
-					esc_html( strip_tags( $author ) )
-				) . '</span>';
+				if ( ! empty( $author ) ) {
+					$author = '<span class="wp-block-rss__item-author">' . sprintf(
+						/* translators: byline. %s: author. */
+						__( 'by %s' ),
+						esc_html( strip_tags( $author ) )
+					) . '</span>';
+				}
 			}
 		}
 
-		$excerpt = '';
-		if ( $attributes['displayExcerpt'] ) {
-			$excerpt = html_entity_decode( $item->get_description(), ENT_QUOTES, get_option( 'blog_charset' ) );
+		$excerpt     = '';
+		$description = $item->get_description();
+		if ( $attributes['displayExcerpt'] && ! empty( $description ) ) {
+			$excerpt = html_entity_decode( $description, ENT_QUOTES, get_option( 'blog_charset' ) );
 			$excerpt = esc_attr( wp_trim_words( $excerpt, $attributes['excerptLength'], ' [&hellip;]' ) );
 
 			// Change existing [...] to [&hellip;].

package/src/search/index.php

@@ -31,8 +31,8 @@ function render_block_core_search( $attributes ) {
 
 	$input_id            = wp_unique_id( 'wp-block-search__input-' );
 	$classnames          = classnames_for_block_core_search( $attributes );
-	$show_label          = ( ! empty( $attributes['showLabel'] ) ) ? true : false;
-	$use_icon_button     = ( ! empty( $attributes['buttonUseIcon'] ) ) ? true : false;
+	$show_label          = ! empty( $attributes['showLabel'] );
+	$use_icon_button     = ! empty( $attributes['buttonUseIcon'] );
 	$show_button         = ( ! empty( $attributes['buttonPosition'] ) && 'no-button' === $attributes['buttonPosition'] ) ? false : true;
 	$button_position     = $show_button ? $attributes['buttonPosition'] : null;
 	$query_params        = ( ! empty( $attributes['query'] ) ) ? $attributes['query'] : array();

package/src/search/style.scss

@@ -58,11 +58,9 @@ $button-spacing-y: math.div($grid-unit-15, 2); // 6px
 		// Prevent unintended text wrapping.
 		flex-shrink: 0;
 		max-width: 100%;
-	}
-
-	// Ensure minimum input field width in small viewports.
-	.wp-block-search__button[aria-expanded="true"] {
-		max-width: calc(100% - 100px);
+		box-sizing: border-box;
+		display: flex;
+		justify-content: center;
 	}
 
 	.wp-block-search__inside-wrapper {

package/src/social-link/edit.js

@@ -6,7 +6,7 @@ import clsx from 'clsx';
 /**
  * WordPress dependencies
  */
-import { DELETE, BACKSPACE } from '@wordpress/keycodes';
+import { DELETE, BACKSPACE, ENTER } from '@wordpress/keycodes';
 import { useDispatch } from '@wordpress/data';
 
 import {
@@ -16,7 +16,7 @@ import {
 	useBlockProps,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
-import { useState } from '@wordpress/element';
+import { useState, useRef } from '@wordpress/element';
 import {
 	Button,
 	PanelBody,
@@ -24,6 +24,7 @@ import {
 	TextControl,
 	__experimentalInputControlSuffixWrapper as InputControlSuffixWrapper,
 } from '@wordpress/components';
+import { useMergeRefs } from '@wordpress/compose';
 import { __ } from '@wordpress/i18n';
 import { keyboardReturn } from '@wordpress/icons';
 
@@ -112,12 +113,19 @@ const SocialLinkEdit = ( {
 		iconBackgroundColorValue,
 	} = context;
 	const [ showURLPopover, setPopover ] = useState( false );
-	const classes = clsx( 'wp-social-link', 'wp-social-link-' + service, {
-		'wp-social-link__is-incomplete': ! url,
-		[ `has-${ iconColor }-color` ]: iconColor,
-		[ `has-${ iconBackgroundColor }-background-color` ]:
-			iconBackgroundColor,
-	} );
+	const wrapperClasses = clsx(
+		'wp-social-link',
+		// Manually adding this class for backwards compatibility of CSS when moving the
+		// blockProps from the li to the button: https://github.com/WordPress/gutenberg/pull/64883
+		'wp-block-social-link',
+		'wp-social-link-' + service,
+		{
+			'wp-social-link__is-incomplete': ! url,
+			[ `has-${ iconColor }-color` ]: iconColor,
+			[ `has-${ iconBackgroundColor }-background-color` ]:
+				iconBackgroundColor,
+		}
+	);
 
 	// Use internal state instead of a ref to make sure that the component
 	// re-renders when the popover's anchor updates.
@@ -131,11 +139,16 @@ const SocialLinkEdit = ( {
 	// spaces. The PHP render callback fallbacks to the social name as well.
 	const socialLinkText = label.trim() === '' ? socialLinkName : label;
 
+	const ref = useRef();
 	const blockProps = useBlockProps( {
-		className: classes,
-		style: {
-			color: iconColorValue,
-			backgroundColor: iconBackgroundColorValue,
+		className: 'wp-block-social-link-anchor',
+		ref: useMergeRefs( [ setPopoverAnchor, ref ] ),
+		onClick: () => setPopover( true ),
+		onKeyDown: ( event ) => {
+			if ( event.keyCode === ENTER ) {
+				event.preventDefault();
+				setPopover( true );
+			}
 		},
 	} );
 
@@ -169,13 +182,27 @@ const SocialLinkEdit = ( {
 					onChange={ ( value ) => setAttributes( { rel: value } ) }
 				/>
 			</InspectorControls>
-			<li { ...blockProps }>
-				<button
-					className="wp-block-social-link-anchor"
-					ref={ setPopoverAnchor }
-					onClick={ () => setPopover( true ) }
-					aria-haspopup="dialog"
-				>
+			{ /*
+			 * Because the `<ul>` element has a role=document, the `<li>` is
+			 * not semantically correct, so adding role=presentation is cleaner.
+			 * https://github.com/WordPress/gutenberg/pull/64883#issuecomment-2472874551
+			 */ }
+			<li
+				role="presentation"
+				className={ wrapperClasses }
+				style={ {
+					color: iconColorValue,
+					backgroundColor: iconBackgroundColorValue,
+				} }
+			>
+				{ /*
+				 * Disable reason: The `button` ARIA role is redundant but
+				 * blockProps has a role of `document` automatically applied
+				 * which breaks the semantics of this button since it removes
+				 * the information about the popover.
+				 */
+				/* eslint-disable jsx-a11y/no-redundant-roles */ }
+				<button aria-haspopup="dialog" { ...blockProps } role="button">
 					<IconComponent />
 					<span
 						className={ clsx( 'wp-block-social-link-label', {
@@ -185,6 +212,7 @@ const SocialLinkEdit = ( {
 						{ socialLinkText }
 					</span>
 				</button>
+				{ /* eslint-enable jsx-a11y/no-redundant-roles */ }
 				{ isSelected && showURLPopover && (
 					<SocialLinkURLPopover
 						url={ url }

package/src/social-link/editor.scss

@@ -14,6 +14,8 @@
 	font-size: inherit;
 	color: currentColor;
 	height: auto;
+	font-weight: inherit;
+	font-family: inherit;
 
 	// This rule ensures social link buttons display correctly in template parts.
 	opacity: 1;
@@ -21,13 +23,10 @@
 	// This rule is duplicated from the style.scss and needs to be the same as there.
 	padding: 0.25em;
 
-	// Focus styles replicate the `@wordpress/components` button component.
-	&:focus:not(:disabled) {
-		border-radius: 2px;
-		box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-
-		// Windows High Contrast mode will show this outline, but not the box-shadow.
-		outline: 3px solid transparent;
+	// Override the shared `.wp-block-social-link` class used on both the li and button
+	// due to backwards compatibility from moving the blockProps from the li to the button.
+	&:hover {
+		transform: none;
 	}
 }
 

package/src/template-part/edit/advanced-controls.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { useEntityProp } from '@wordpress/core-data';
+import { useEntityProp, store as coreStore } from '@wordpress/core-data';
 import { SelectControl, TextControl } from '@wordpress/components';
 import { sprintf, __ } from '@wordpress/i18n';
 import { useSelect } from '@wordpress/data';
@@ -54,19 +54,19 @@ export function TemplatePartAdvancedControls( {
 		templatePartId
 	);
 
-	const definedAreas = useSelect( ( select ) => {
-		// FIXME: @wordpress/block-library should not depend on @wordpress/editor.
-		// Blocks can be loaded into a *non-post* block editor.
-		/* eslint-disable-next-line @wordpress/data-no-store-string-literals */
-		return select(
-			'core/editor'
-		).__experimentalGetDefaultTemplatePartAreas();
-	}, [] );
+	const defaultTemplatePartAreas = useSelect(
+		( select ) =>
+			select( coreStore ).getEntityRecord( 'root', '__unstableBase' )
+				?.default_template_part_areas || [],
+		[]
+	);
 
-	const areaOptions = definedAreas.map( ( { label, area: _area } ) => ( {
-		label,
-		value: _area,
-	} ) );
+	const areaOptions = defaultTemplatePartAreas.map(
+		( { label, area: _area } ) => ( {
+			label,
+			value: _area,
+		} )
+	);
 
 	return (
 		<>

package/src/template-part/edit/index.js

@@ -21,7 +21,6 @@ import {
 	MenuItem,
 	ToolbarButton,
 } from '@wordpress/components';
-import { useAsyncList } from '@wordpress/compose';
 import { __, sprintf } from '@wordpress/i18n';
 import { store as coreStore } from '@wordpress/core-data';
 import { useState } from '@wordpress/element';
@@ -85,7 +84,6 @@ function TemplatesList( { area, clientId, isEntityAvailable, onSelect } ) {
 		isEntityAvailable &&
 		!! blockPatterns.length &&
 		( area === 'header' || area === 'footer' );
-	const shownTemplates = useAsyncList( blockPatterns );
 
 	if ( ! canReplace ) {
 		return null;
@@ -96,9 +94,8 @@ function TemplatesList( { area, clientId, isEntityAvailable, onSelect } ) {
 			<BlockPatternsList
 				label={ __( 'Templates' ) }
 				blockPatterns={ blockPatterns }
-				shownPatterns={ shownTemplates }
 				onClickPattern={ onSelect }
-				showTitle={ false }
+				showTitlesAsTooltip
 			/>
 		</PanelBody>
 	);

package/src/template-part/edit/selection-modal.js

@@ -5,7 +5,6 @@ import { useMemo, useState } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
 import { store as noticesStore } from '@wordpress/notices';
 import { useDispatch } from '@wordpress/data';
-import { useAsyncList } from '@wordpress/compose';
 import { __experimentalBlockPatternsList as BlockPatternsList } from '@wordpress/block-editor';
 import {
 	SearchControl,
@@ -43,7 +42,6 @@ export default function TemplatePartSelectionModal( {
 
 		return searchPatterns( partsAsPatterns, searchValue );
 	}, [ templateParts, searchValue ] );
-	const shownTemplateParts = useAsyncList( filteredTemplateParts );
 	const blockPatterns = useAlternativeBlockPatterns( area, clientId );
 	const filteredBlockPatterns = useMemo( () => {
 		return searchPatterns( blockPatterns, searchValue );
@@ -89,7 +87,6 @@ export default function TemplatePartSelectionModal( {
 					<h2>{ __( 'Existing template parts' ) }</h2>
 					<BlockPatternsList
 						blockPatterns={ filteredTemplateParts }
-						shownPatterns={ shownTemplateParts }
 						onClickPattern={ ( pattern ) => {
 							onTemplatePartSelect( pattern.templatePart );
 						} }

package/src/template-part/edit/utils/get-template-part-icon.js

@@ -0,0 +1,20 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	header as headerIcon,
+	footer as footerIcon,
+	sidebar as sidebarIcon,
+	symbolFilled as symbolFilledIcon,
+} from '@wordpress/icons';
+
+export const getTemplatePartIcon = ( iconName ) => {
+	if ( 'header' === iconName ) {
+		return headerIcon;
+	} else if ( 'footer' === iconName ) {
+		return footerIcon;
+	} else if ( 'sidebar' === iconName ) {
+		return sidebarIcon;
+	}
+	return symbolFilledIcon;
+};

package/src/template-part/edit/utils/hooks.js

@@ -136,14 +136,9 @@ export function useCreateTemplatePartFromBlocks( area, setAttributes ) {
 export function useTemplatePartArea( area ) {
 	return useSelect(
 		( select ) => {
-			// FIXME: @wordpress/block-library should not depend on @wordpress/editor.
-			// Blocks can be loaded into a *non-post* block editor.
-			/* eslint-disable @wordpress/data-no-store-string-literals */
 			const definedAreas =
-				select(
-					'core/editor'
-				).__experimentalGetDefaultTemplatePartAreas();
-			/* eslint-enable @wordpress/data-no-store-string-literals */
+				select( coreStore ).getEntityRecord( 'root', '__unstableBase' )
+					?.default_template_part_areas || [];
 
 			const selectedArea = definedAreas.find(
 				( definedArea ) => definedArea.area === area

package/src/template-part/variations.js

@@ -3,23 +3,11 @@
  */
 import { store as coreDataStore } from '@wordpress/core-data';
 import { select } from '@wordpress/data';
-import {
-	header as headerIcon,
-	footer as footerIcon,
-	sidebar as sidebarIcon,
-	symbolFilled as symbolFilledIcon,
-} from '@wordpress/icons';
 
-function getTemplatePartIcon( iconName ) {
-	if ( 'header' === iconName ) {
-		return headerIcon;
-	} else if ( 'footer' === iconName ) {
-		return footerIcon;
-	} else if ( 'sidebar' === iconName ) {
-		return sidebarIcon;
-	}
-	return symbolFilledIcon;
-}
+/**
+ * Internal dependencies
+ */
+import { getTemplatePartIcon } from './edit/utils/get-template-part-icon';
 
 export function enhanceTemplatePartVariations( settings, name ) {
 	if ( name !== 'core/template-part' ) {

package/src/video/edit.js

@@ -141,7 +141,7 @@ function VideoEdit( {
 				icon={ icon }
 				label={ __( 'Video' ) }
 				instructions={ __(
-					'Upload a video file, pick one from your media library, or add one with a URL.'
+					'Drag and drop a video, upload, or choose from your library.'
 				) }
 			>
 				{ content }

package/src/video/editor.scss

@@ -37,6 +37,7 @@
 	max-width: 240px;
 }
 
+.block-library-video-tracks-editor__tracks-informative-message-title,
 .block-library-video-tracks-editor__single-track-editor-edit-track-label {
 	margin-top: $grid-unit-05;
 	color: $gray-700;
@@ -56,3 +57,11 @@
 		padding: 0;
 	}
 }
+
+.block-library-video-tracks-editor__tracks-informative-message {
+	padding: $grid-unit-10;
+
+	&-description {
+		margin-bottom: 0;
+	}
+}

package/src/video/test/__snapshots__/transforms.native.js.snap

@@ -12,7 +12,7 @@ exports[`Video block transforms to Columns block 1`] = `
 
 exports[`Video block transforms to Cover block 1`] = `
 "<!-- wp:cover {"url":"https://i.cloudup.com/YtZFJbuQCE.mov","dimRatio":50,"backgroundType":"video"} -->
-<div class="wp-block-cover"><span aria-hidden="true" class="wp-block-cover__background has-background-dim"></span><video class="wp-block-cover__video-background intrinsic-ignore" autoplay muted loop playsinline src="https://i.cloudup.com/YtZFJbuQCE.mov" data-object-fit="cover"></video><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","fontSize":"large"} -->
+<div class="wp-block-cover"><video class="wp-block-cover__video-background intrinsic-ignore" autoplay muted loop playsinline src="https://i.cloudup.com/YtZFJbuQCE.mov" data-object-fit="cover"></video><span aria-hidden="true" class="wp-block-cover__background has-background-dim"></span><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","fontSize":"large"} -->
 <p class="has-text-align-center has-large-font-size">Cloudup video</p>
 <!-- /wp:paragraph --></div></div>
 <!-- /wp:cover -->"