@wordpress/block-library 8.33.0 → 8.34.0

package/src/navigation-link/link-ui.js

@@ -148,7 +148,6 @@ function LinkUIBlockInserter( { clientId, onBack, onSelectBlock } ) {
 export function LinkUI( props ) {
 	const [ addingBlock, setAddingBlock ] = useState( false );
 	const [ focusAddBlockButton, setFocusAddBlockButton ] = useState( false );
-	const [ showBackdrop, setShowBackdrop ] = useState( true );
 	const { saveEntityRecord } = useDispatch( coreStore );
 	const pagesPermissions = useResourcePermissions( 'pages' );
 	const postsPermissions = useResourcePermissions( 'posts' );
@@ -214,102 +213,88 @@ export function LinkUI( props ) {
 	const { onClose: onSelectBlock } = props;
 
 	return (
-		<>
-			{ showBackdrop && (
+		<Popover
+			placement="bottom"
+			onClose={ props.onClose }
+			anchor={ props.anchor }
+			shift
+		>
+			{ ! addingBlock && (
 				<div
-					className="components-popover-pointer-events-trap"
-					aria-hidden="true"
-					onClick={ () => setShowBackdrop( false ) }
-				/>
-			) }
-			<Popover
-				placement="bottom"
-				onClose={ props.onClose }
-				anchor={ props.anchor }
-				shift
-			>
-				{ ! addingBlock && (
-					<div
-						role="dialog"
-						aria-labelledby={ dialogTitleId }
-						aria-describedby={ dialogDescritionId }
-					>
-						<VisuallyHidden>
-							<h2 id={ dialogTitleId }>{ __( 'Add link' ) }</h2>
+					role="dialog"
+					aria-labelledby={ dialogTitleId }
+					aria-describedby={ dialogDescritionId }
+				>
+					<VisuallyHidden>
+						<h2 id={ dialogTitleId }>{ __( 'Add link' ) }</h2>
 
-							<p id={ dialogDescritionId }>
-								{ __(
-									'Search for and add a link to your Navigation.'
-								) }
-							</p>
-						</VisuallyHidden>
-						<LinkControl
-							hasTextControl
-							hasRichPreviews
-							value={ link }
-							showInitialSuggestions
-							withCreateSuggestion={ userCanCreate }
-							createSuggestion={ handleCreate }
-							createSuggestionButtonText={ ( searchTerm ) => {
-								let format;
-
-								if ( type === 'post' ) {
-									/* translators: %s: search term. */
-									format = __(
-										'Create draft post: <mark>%s</mark>'
-									);
-								} else {
-									/* translators: %s: search term. */
-									format = __(
-										'Create draft page: <mark>%s</mark>'
-									);
-								}
+						<p id={ dialogDescritionId }>
+							{ __(
+								'Search for and add a link to your Navigation.'
+							) }
+						</p>
+					</VisuallyHidden>
+					<LinkControl
+						hasTextControl
+						hasRichPreviews
+						value={ link }
+						showInitialSuggestions
+						withCreateSuggestion={ userCanCreate }
+						createSuggestion={ handleCreate }
+						createSuggestionButtonText={ ( searchTerm ) => {
+							let format;
 
-								return createInterpolateElement(
-									sprintf( format, searchTerm ),
-									{
-										mark: <mark />,
-									}
+							if ( type === 'post' ) {
+								/* translators: %s: search term. */
+								format = __(
+									'Create draft post: <mark>%s</mark>'
+								);
+							} else {
+								/* translators: %s: search term. */
+								format = __(
+									'Create draft page: <mark>%s</mark>'
 								);
-							} }
-							noDirectEntry={ !! type }
-							noURLSuggestion={ !! type }
-							suggestionsQuery={ getSuggestionsQuery(
-								type,
-								kind
-							) }
-							onChange={ props.onChange }
-							onRemove={ props.onRemove }
-							onCancel={ props.onCancel }
-							renderControlBottom={ () =>
-								! link?.url?.length && (
-									<LinkUITools
-										focusAddBlockButton={
-											focusAddBlockButton
-										}
-										setAddingBlock={ () => {
-											setAddingBlock( true );
-											setFocusAddBlockButton( false );
-										} }
-									/>
-								)
 							}
-						/>
-					</div>
-				) }
 
-				{ addingBlock && (
-					<LinkUIBlockInserter
-						clientId={ props.clientId }
-						onBack={ () => {
-							setAddingBlock( false );
-							setFocusAddBlockButton( true );
+							return createInterpolateElement(
+								sprintf( format, searchTerm ),
+								{
+									mark: <mark />,
+								}
+							);
 						} }
-						onSelectBlock={ onSelectBlock }
+						noDirectEntry={ !! type }
+						noURLSuggestion={ !! type }
+						suggestionsQuery={ getSuggestionsQuery( type, kind ) }
+						onChange={ props.onChange }
+						onRemove={ props.onRemove }
+						onCancel={ props.onCancel }
+						renderControlBottom={ () =>
+							! link?.url?.length && (
+								<LinkUITools
+									focusAddBlockButton={ focusAddBlockButton }
+									setAddingBlock={ () => {
+										setAddingBlock( true );
+										setFocusAddBlockButton( false );
+									} }
+								/>
+							)
+						}
 					/>
-				) }
-			</Popover>
-		</>
+				</div>
+			) }
+
+			{ addingBlock && (
+				<LinkUIBlockInserter
+					clientId={ props.clientId }
+					onBack={ () => {
+						setAddingBlock( false );
+						setFocusAddBlockButton( true );
+					} }
+					onSelectBlock={ onSelectBlock }
+				/>
+			) }
+		</Popover>
 	);
 }
 

package/src/navigation-link/style.scss

@@ -28,15 +28,3 @@
 	margin-left: $grid-unit-10;
 	text-transform: uppercase;
 }
-
-// Ensure Popover `onClose` is fired for clicks on the canvas iframe.
-// See https: //github.com/WordPress/gutenberg/pull/57756#discussion_r1475852009.
-.components-popover-pointer-events-trap {
-	// Same z-index as popover, but rendered before the popover element
-	// in DOM order = it will display just under the popover
-	z-index: z-index(".components-popover");
-	position: fixed;
-	inset: 0;
-	background-color: transparent;
-	cursor: pointer;
-}

package/src/paragraph/block.json

@@ -7,7 +7,6 @@
 	"description": "Start with the basic building block of all narrative.",
 	"keywords": [ "text" ],
 	"textdomain": "default",
-	"usesContext": [ "postId" ],
 	"attributes": {
 		"align": {
 			"type": "string"

package/src/post-excerpt/edit.js

@@ -89,7 +89,9 @@ export default function PostExcerptEditor( {
 	 * excerpt has been produced from the content.
 	 */
 	const strippedRenderedExcerpt = useMemo( () => {
-		if ( ! renderedExcerpt ) return '';
+		if ( ! renderedExcerpt ) {
+			return '';
+		}
 		const document = new window.DOMParser().parseFromString(
 			renderedExcerpt,
 			'text/html'

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

@@ -81,7 +81,9 @@ const DimensionControls = ( {
 		 * we don't want to set the attribute, as it would
 		 * end up having the unit as value without any number.
 		 */
-		if ( isNaN( parsedValue ) && nextValue ) return;
+		if ( isNaN( parsedValue ) && nextValue ) {
+			return;
+		}
 		setAttributes( {
 			[ dimension ]: parsedValue < 0 ? '0' : nextValue,
 		} );

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

@@ -21,6 +21,7 @@
 
 		// Style the upload button.
 		.components-button {
+			margin: auto;
 			padding: 0;
 			display: flex;
 			justify-content: center;

package/src/post-navigation-link/variations.js

@@ -34,7 +34,9 @@ const variations = [
  *  Block by providing its attributes.
  */
 variations.forEach( ( variation ) => {
-	if ( variation.isActive ) return;
+	if ( variation.isActive ) {
+		return;
+	}
 	variation.isActive = ( blockAttributes, variationAttributes ) =>
 		blockAttributes.type === variationAttributes.type;
 } );

package/src/post-template/edit.js

@@ -27,9 +27,9 @@ const TEMPLATE = [
 	[ 'core/post-excerpt' ],
 ];
 
-function PostTemplateInnerBlocks() {
+function PostTemplateInnerBlocks( { classList } ) {
 	const innerBlocksProps = useInnerBlocksProps(
-		{ className: 'wp-block-post' },
+		{ className: classnames( 'wp-block-post', classList ) },
 		{ template: TEMPLATE, __unstableDisableLayoutClassNames: true }
 	);
 	return <li { ...innerBlocksProps } />;
@@ -38,13 +38,14 @@ function PostTemplateInnerBlocks() {
 function PostTemplateBlockPreview( {
 	blocks,
 	blockContextId,
+	classList,
 	isHidden,
 	setActiveBlockContextId,
 } ) {
 	const blockPreviewProps = useBlockPreview( {
 		blocks,
 		props: {
-			className: 'wp-block-post',
+			className: classnames( 'wp-block-post', classList ),
 		},
 	} );
 
@@ -213,6 +214,7 @@ export default function PostTemplateEdit( {
 			posts?.map( ( post ) => ( {
 				postType: post.type,
 				postId: post.id,
+				classList: post.class_list ?? '',
 			} ) ),
 		[ posts ]
 	);
@@ -280,11 +282,14 @@ export default function PostTemplateEdit( {
 							{ blockContext.postId ===
 							( activeBlockContextId ||
 								blockContexts[ 0 ]?.postId ) ? (
-								<PostTemplateInnerBlocks />
+								<PostTemplateInnerBlocks
+									classList={ blockContext.classList }
+								/>
 							) : null }
 							<MemoizedPostTemplateBlockPreview
 								blocks={ blocks }
 								blockContextId={ blockContext.postId }
+								classList={ blockContext.classList }
 								setActiveBlockContextId={
 									setActiveBlockContextId
 								}

package/src/post-terms/edit.js

@@ -49,7 +49,9 @@ export default function PostTermsEdit( {
 
 	const selectedTerm = useSelect(
 		( select ) => {
-			if ( ! term ) return {};
+			if ( ! term ) {
+				return {};
+			}
 			const { getTaxonomy } = select( coreStore );
 			const taxonomy = getTaxonomy( term );
 			return taxonomy?.visibility?.publicly_queryable ? taxonomy : {};

package/src/private-apis.js

@@ -0,0 +1,13 @@
+/**
+ * Internal dependencies
+ */
+import { default as BlockKeyboardShortcuts } from './block-keyboard-shortcuts';
+import { lock } from './lock-unlock';
+
+/**
+ * @private
+ */
+export const privateApis = {};
+lock( privateApis, {
+	BlockKeyboardShortcuts,
+} );

package/src/query/edit/enhanced-pagination-modal.js

@@ -27,7 +27,11 @@ export default function EnhancedPaginationModal( {
 		useUnsupportedBlocks( clientId );
 
 	useEffect( () => {
-		if ( enhancedPagination && hasUnsupportedBlocks ) {
+		if (
+			enhancedPagination &&
+			hasUnsupportedBlocks &&
+			! window.__experimentalFullPageClientSideNavigation
+		) {
 			setAttributes( { enhancedPagination: false } );
 			setOpen( true );
 		}

package/src/query/edit/inspector-controls/author-control.js

@@ -52,14 +52,18 @@ function AuthorControl( { value, onChange } ) {
 
 	const getIdByValue = ( entitiesMappedByName, authorValue ) => {
 		const id = authorValue?.id || entitiesMappedByName[ authorValue ]?.id;
-		if ( id ) return id;
+		if ( id ) {
+			return id;
+		}
 	};
 	const onAuthorChange = ( newValue ) => {
 		const ids = Array.from(
 			newValue.reduce( ( accumulator, author ) => {
 				// Verify that new values point to existing entities.
 				const id = getIdByValue( authorsInfo.mapByName, author );
-				if ( id ) accumulator.add( id );
+				if ( id ) {
+					accumulator.add( id );
+				}
 				return accumulator;
 			}, new Set() )
 		);

package/src/query/edit/inspector-controls/create-new-post-link.js

@@ -8,7 +8,9 @@ import { addQueryArgs } from '@wordpress/url';
 const CreateNewPostLink = ( {
 	attributes: { query: { postType } = {} } = {},
 } ) => {
-	if ( ! postType ) return null;
+	if ( ! postType ) {
+		return null;
+	}
 	const newPostUrl = addQueryArgs( 'post-new.php', {
 		post_type: postType,
 	} );

package/src/query/edit/inspector-controls/enhanced-pagination-control.js

@@ -15,9 +15,15 @@ export default function EnhancedPaginationControl( {
 	clientId,
 } ) {
 	const { hasUnsupportedBlocks } = useUnsupportedBlocks( clientId );
+	const fullPageClientSideNavigation =
+		window.__experimentalFullPageClientSideNavigation;
 
 	let help = __( 'Browsing between pages requires a full page reload.' );
-	if ( enhancedPagination ) {
+	if ( fullPageClientSideNavigation ) {
+		help = __(
+			'Experimental full-page client-side navigation setting enabled.'
+		);
+	} else if ( enhancedPagination ) {
 		help = __(
 			"Browsing between pages won't require a full page reload, unless non-compatible blocks are detected."
 		);
@@ -32,8 +38,12 @@ export default function EnhancedPaginationControl( {
 			<ToggleControl
 				label={ __( 'Force page reload' ) }
 				help={ help }
-				checked={ ! enhancedPagination }
-				disabled={ hasUnsupportedBlocks }
+				checked={
+					! enhancedPagination && ! fullPageClientSideNavigation
+				}
+				disabled={
+					hasUnsupportedBlocks || fullPageClientSideNavigation
+				}
 				onChange={ ( value ) => {
 					setAttributes( {
 						enhancedPagination: ! value,

package/src/query/edit/inspector-controls/parent-control.js

@@ -55,7 +55,9 @@ function ParentControl( { parents, postType, onChange } ) {
 	);
 	const currentParents = useSelect(
 		( select ) => {
-			if ( ! parents?.length ) return EMPTY_ARRAY;
+			if ( ! parents?.length ) {
+				return EMPTY_ARRAY;
+			}
 			const { getEntityRecords } = select( coreStore );
 			return getEntityRecords( 'postType', postType, {
 				...BASE_QUERY,
@@ -71,7 +73,9 @@ function ParentControl( { parents, postType, onChange } ) {
 		if ( ! parents?.length ) {
 			setValue( EMPTY_ARRAY );
 		}
-		if ( ! currentParents?.length ) return;
+		if ( ! currentParents?.length ) {
+			return;
+		}
 		const currentParentsInfo = getEntitiesInfo(
 			mapToIHasNameAndId( currentParents, 'title.rendered' )
 		);
@@ -91,27 +95,35 @@ function ParentControl( { parents, postType, onChange } ) {
 	}, [ parents, currentParents ] );
 
 	const entitiesInfo = useMemo( () => {
-		if ( ! searchResults?.length ) return EMPTY_ARRAY;
+		if ( ! searchResults?.length ) {
+			return EMPTY_ARRAY;
+		}
 		return getEntitiesInfo(
 			mapToIHasNameAndId( searchResults, 'title.rendered' )
 		);
 	}, [ searchResults ] );
 	// Update suggestions only when the query has resolved.
 	useEffect( () => {
-		if ( ! searchHasResolved ) return;
+		if ( ! searchHasResolved ) {
+			return;
+		}
 		setSuggestions( entitiesInfo.names );
 	}, [ entitiesInfo.names, searchHasResolved ] );
 
 	const getIdByValue = ( entitiesMappedByName, entity ) => {
 		const id = entity?.id || entitiesMappedByName?.[ entity ]?.id;
-		if ( id ) return id;
+		if ( id ) {
+			return id;
+		}
 	};
 	const onParentChange = ( newValue ) => {
 		const ids = Array.from(
 			newValue.reduce( ( accumulator, entity ) => {
 				// Verify that new values point to existing entities.
 				const id = getIdByValue( entitiesInfo.mapByName, entity );
-				if ( id ) accumulator.add( id );
+				if ( id ) {
+					accumulator.add( id );
+				}
 				return accumulator;
 			}, new Set() )
 		);

package/src/query/edit/inspector-controls/taxonomy-controls.js

@@ -124,7 +124,9 @@ function TaxonomyItem( { taxonomy, termIds, onChange } ) {
 	// and to sanitize the provided `termIds`, by setting only the ones that exist.
 	const existingTerms = useSelect(
 		( select ) => {
-			if ( ! termIds?.length ) return EMPTY_ARRAY;
+			if ( ! termIds?.length ) {
+				return EMPTY_ARRAY;
+			}
 			const { getEntityRecords } = select( coreStore );
 			return getEntityRecords( 'taxonomy', taxonomy.slug, {
 				...BASE_QUERY,
@@ -140,7 +142,9 @@ function TaxonomyItem( { taxonomy, termIds, onChange } ) {
 		if ( ! termIds?.length ) {
 			setValue( EMPTY_ARRAY );
 		}
-		if ( ! existingTerms?.length ) return;
+		if ( ! existingTerms?.length ) {
+			return;
+		}
 		// Returns only the existing entity ids. This prevents the component
 		// from crashing in the editor, when non existing ids are provided.
 		const sanitizedValue = termIds.reduce( ( accumulator, id ) => {
@@ -157,7 +161,9 @@ function TaxonomyItem( { taxonomy, termIds, onChange } ) {
 	}, [ termIds, existingTerms ] );
 	// Update suggestions only when the query has resolved.
 	useEffect( () => {
-		if ( ! searchHasResolved ) return;
+		if ( ! searchHasResolved ) {
+			return;
+		}
 		setSuggestions( searchResults.map( ( result ) => result.name ) );
 	}, [ searchResults, searchHasResolved ] );
 	const onTermsChange = ( newTermValues ) => {

package/src/query/index.php

@@ -51,8 +51,8 @@ function render_block_core_query( $attributes, $content, $block ) {
 			// Add the necessary directives.
 			$p->set_attribute( 'data-wp-interactive', 'core/query' );
 			$p->set_attribute( 'data-wp-router-region', 'query-' . $attributes['queryId'] );
-			$p->set_attribute( 'data-wp-init', 'callbacks.setQueryRef' );
 			$p->set_attribute( 'data-wp-context', '{}' );
+			$p->set_attribute( 'data-wp-key', $attributes['queryId'] );
 			$content = $p->get_updated_html();
 		}
 	}

package/src/query/utils.js

@@ -108,7 +108,9 @@ export const usePostTypes = () => {
 		return filteredPostTypes;
 	}, [] );
 	const postTypesTaxonomiesMap = useMemo( () => {
-		if ( ! postTypes?.length ) return;
+		if ( ! postTypes?.length ) {
+			return;
+		}
 		return postTypes.reduce( ( accumulator, type ) => {
 			accumulator[ type.slug ] = type.taxonomies;
 			return accumulator;

package/src/query-title/variations.js

@@ -38,7 +38,9 @@ const variations = [
  *  Block by providing its attributes.
  */
 variations.forEach( ( variation ) => {
-	if ( variation.isActive ) return;
+	if ( variation.isActive ) {
+		return;
+	}
 	variation.isActive = ( blockAttributes, variationAttributes ) =>
 		blockAttributes.type === variationAttributes.type;
 } );

package/src/site-logo/editor.scss

@@ -88,6 +88,7 @@
 		// Style the upload button.
 		.components-button.components-button {
 			padding: 0;
+			margin: auto;
 			display: flex;
 			justify-content: center;
 			align-items: center;

package/src/social-link/edit.js

@@ -158,7 +158,7 @@ const SocialLinkEdit = ( {
 				/>
 			</InspectorControls>
 			<li { ...blockProps }>
-				<Button
+				<button
 					className="wp-block-social-link-anchor"
 					ref={ setPopoverAnchor }
 					onClick={ () => setPopover( true ) }
@@ -171,7 +171,7 @@ const SocialLinkEdit = ( {
 					>
 						{ socialLinkText }
 					</span>
-				</Button>
+				</button>
 				{ isSelected && showURLPopover && (
 					<SocialLinkURLPopover
 						url={ url }

package/src/social-link/editor.scss

@@ -1,19 +1,33 @@
-// The editor uses the button component, the frontend uses a link.
-// Therefore we unstyle the button component to make it more like the frontend.
 .wp-block-social-links .wp-social-link {
 	line-height: 0;
+}
+
+// The editor uses the button element, the frontend uses a link.
+// Therefore we unstyle the button element to make it more like the frontend.
+.wp-block-social-link-anchor {
+	align-items: center;
+	background: none;
+	border: 0;
+	box-sizing: border-box;
+	cursor: pointer;
+	display: inline-flex;
+	font-size: inherit;
+	color: currentColor;
+	height: auto;
+
+	// This rule ensures social link buttons display correctly in template parts.
+	opacity: 1;
 
-	button {
-		font-size: inherit;
-		color: currentColor;
-		height: auto;
-		line-height: 0;
+	// This rule is duplicated from the style.scss and needs to be the same as there.
+	padding: 0.25em;
 
-		// This rule ensures social link buttons display correctly in template parts.
-		opacity: 1;
+	// 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);
 
-		// This rule is duplicated from the style.scss and needs to be the same as there.
-		padding: 0.25em;
+		// Windows High Contrast mode will show this outline, but not the box-shadow.
+		outline: 3px solid transparent;
 	}
 }
 

package/src/social-link/variations.js

@@ -339,7 +339,9 @@ const variations = [
  *  Block by providing its attributes.
  */
 variations.forEach( ( variation ) => {
-	if ( variation.isActive ) return;
+	if ( variation.isActive ) {
+		return;
+	}
 	variation.isActive = ( blockAttributes, variationAttributes ) =>
 		blockAttributes.service === variationAttributes.service;
 } );

package/src/template-part/variations.js

@@ -31,10 +31,14 @@ export function enhanceTemplatePartVariations( settings, name ) {
 			const { area, theme, slug } = blockAttributes;
 			// We first check the `area` block attribute which is set during insertion.
 			// This property is removed on the creation of a template part.
-			if ( area ) return area === variationAttributes.area;
+			if ( area ) {
+				return area === variationAttributes.area;
+			}
 			// Find a matching variation from the created template part
 			// by checking the entity's `area` property.
-			if ( ! slug ) return false;
+			if ( ! slug ) {
+				return false;
+			}
 			const { getCurrentTheme, getEntityRecord } =
 				select( coreDataStore );
 			const entity = getEntityRecord(