@wordpress/block-library 7.11.0 → 7.12.0

package/src/navigation/edit/utils.js

@@ -0,0 +1,30 @@
+function getComputedStyle( node ) {
+	return node.ownerDocument.defaultView.getComputedStyle( node );
+}
+
+export function detectColors(
+	colorsDetectionElement,
+	setColor,
+	setBackground
+) {
+	if ( ! colorsDetectionElement ) {
+		return;
+	}
+	setColor( getComputedStyle( colorsDetectionElement ).color );
+
+	let backgroundColorNode = colorsDetectionElement;
+	let backgroundColor =
+		getComputedStyle( backgroundColorNode ).backgroundColor;
+	while (
+		backgroundColor === 'rgba(0, 0, 0, 0)' &&
+		backgroundColorNode.parentNode &&
+		backgroundColorNode.parentNode.nodeType ===
+			backgroundColorNode.parentNode.ELEMENT_NODE
+	) {
+		backgroundColorNode = backgroundColorNode.parentNode;
+		backgroundColor =
+			getComputedStyle( backgroundColorNode ).backgroundColor;
+	}
+
+	setBackground( backgroundColor );
+}

package/src/navigation/index.php

@@ -472,6 +472,12 @@ function render_block_core_navigation( $attributes, $content, $block ) {
 			return '';
 		}
 
+		// Only published posts are valid. If this is changed then a corresponding change
+		// must also be implemented in `use-navigation-menu.js`.
+		if ( 'publish' !== $navigation_post->post_status ) {
+			return '';
+		}
+
 		$nav_menu_name = $navigation_post->post_title;
 
 		if ( isset( $seen_menu_names[ $nav_menu_name ] ) ) {

package/src/navigation/style.scss

@@ -45,9 +45,6 @@ $navigation-icon-size: 24px;
 	// but still allow them to be overridden by user-set colors.
 	.wp-block-navigation-item__content {
 		display: block;
-
-		// Set the default menu item padding to zero, to allow text-only buttons.
-		padding: 0;
 	}
 
 	// The following rules provide class based application of user selected text
@@ -154,10 +151,7 @@ $navigation-icon-size: 24px;
 // Styles for submenu flyout.
 // These are separated out with reduced specificity to allow better inheritance from Global Styles.
 .wp-block-navigation .has-child {
-	// We use :where to keep specificity minimal, yet still scope it to only the navigation block.
-	// That way if padding is set in theme.json, it still wins.
-	// https://css-tricks.com/almanac/selectors/w/where/
-	:where(.wp-block-navigation__submenu-container) {
+	.wp-block-navigation__submenu-container {
 		background-color: inherit;
 		color: inherit;
 		position: absolute;
@@ -233,7 +227,7 @@ $navigation-icon-size: 24px;
 
 	// Custom menu items.
 	// Show submenus on hover unless they open on click.
-	&:where(:not(.open-on-click)):hover > .wp-block-navigation__submenu-container {
+	&:not(.open-on-click):hover > .wp-block-navigation__submenu-container {
 		visibility: visible;
 		overflow: visible;
 		opacity: 1;
@@ -243,7 +237,7 @@ $navigation-icon-size: 24px;
 	}
 
 	// Keep submenus open when focus is within.
-	&:where(:not(.open-on-click):not(.open-on-hover-click)):focus-within > .wp-block-navigation__submenu-container {
+	&:not(.open-on-click):not(.open-on-hover-click):focus-within > .wp-block-navigation__submenu-container {
 		visibility: visible;
 		overflow: visible;
 		opacity: 1;
@@ -339,17 +333,6 @@ button.wp-block-navigation-item__content {
 	gap: inherit;
 }
 
-// Menu items with background.
-// We use :where to keep specificity minimal, yet still scope it to only the navigation block.
-// That way if padding is set in theme.json, it still wins.
-// https://css-tricks.com/almanac/selectors/w/where/
-.wp-block-navigation:where(.has-background) {
-	&,
-	.wp-block-navigation .wp-block-page-list,
-	.wp-block-navigation__container {
-		gap: inherit;
-	}
-}
 
 /**
  * Paddings
@@ -361,15 +344,18 @@ button.wp-block-navigation-item__content {
 
 // When the menu has a background, items have paddings, reduce margins to compensate.
 // Treat margins and paddings differently when the block has a background.
-.wp-block-navigation:where(.has-background) .wp-block-navigation-item__content {
+:where(.wp-block-navigation.has-background .wp-block-navigation-link a:not(.wp-element-button)),
+:where(.wp-block-navigation.has-background .wp-block-navigation-submenu a:not(.wp-element-button)) {
 	padding: 0.5em 1em;
 }
 
 // Provide a default padding for submenus who should always have some, regardless of the top level menu items.
-.wp-block-navigation :where(.wp-block-navigation__submenu-container) .wp-block-navigation-item__content {
+:where(.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-link a:not(.wp-element-button)),
+:where(.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-submenu a:not(.wp-element-button)) {
 	padding: 0.5em 1em;
 }
 
+
 /**
  * Justifications.
  */
@@ -452,6 +438,10 @@ button.wp-block-navigation-item__content {
 	right: 0;
 	bottom: 0;
 
+	.wp-block-navigation-link a {
+		color: inherit;
+	}
+
 	.wp-block-navigation__responsive-container-content {
 		display: flex;
 		flex-wrap: var(--navigation-layout-wrap, wrap);

package/src/navigation/use-navigation-menu.js

@@ -99,15 +99,19 @@ function selectExistingMenu( select, ref ) {
 		args
 	);
 
+	// Only published Navigation posts are considered valid.
+	// If this is changed then a corresponding change must also be made
+	// in the index.php file.
+	const isNavigationMenuPublished = editedNavigationMenu.status === 'publish';
+
 	return {
 		isNavigationMenuResolved: hasResolvedNavigationMenu,
-		isNavigationMenuMissing: hasResolvedNavigationMenu && ! navigationMenu,
+		isNavigationMenuMissing:
+			hasResolvedNavigationMenu &&
+			( ! navigationMenu || ! isNavigationMenuPublished ),
 
 		// getEditedEntityRecord will return the post regardless of status.
 		// Therefore if the found post is not published then we should ignore it.
-		navigationMenu:
-			editedNavigationMenu.status === 'publish'
-				? editedNavigationMenu
-				: null,
+		navigationMenu: isNavigationMenuPublished ? editedNavigationMenu : null,
 	};
 }

package/src/navigation-link/index.php

@@ -150,7 +150,7 @@ function render_block_core_navigation_link( $attributes, $content, $block ) {
 
 	$css_classes = trim( implode( ' ', $classes ) );
 	$has_submenu = count( $block->inner_blocks ) > 0;
-	$is_active   = ! empty( $attributes['id'] ) && ( get_the_ID() === $attributes['id'] );
+	$is_active   = ! empty( $attributes['id'] ) && ( get_the_ID() === (int) $attributes['id'] );
 
 	$wrapper_attributes = get_block_wrapper_attributes(
 		array(

package/src/navigation-submenu/index.php

@@ -148,7 +148,7 @@ function render_block_core_navigation_submenu( $attributes, $content, $block ) {
 
 	$css_classes = trim( implode( ' ', $classes ) );
 	$has_submenu = count( $block->inner_blocks ) > 0;
-	$is_active   = ! empty( $attributes['id'] ) && ( get_the_ID() === $attributes['id'] );
+	$is_active   = ! empty( $attributes['id'] ) && ( get_the_ID() === (int) $attributes['id'] );
 
 	$show_submenu_indicators = isset( $block->context['showSubmenuIcon'] ) && $block->context['showSubmenuIcon'];
 	$open_on_click           = isset( $block->context['openSubmenusOnClick'] ) && $block->context['openSubmenusOnClick'];

package/src/page-list/index.php

@@ -328,9 +328,9 @@ function render_block_core_page_list( $attributes, $content, $block ) {
 	);
 }
 
-	/**
-	 * Registers the `core/pages` block on server.
-	 */
+/**
+ * Registers the `core/pages` block on server.
+ */
 function register_block_core_page_list() {
 	register_block_type_from_metadata(
 		__DIR__ . '/page-list',
@@ -339,4 +339,4 @@ function register_block_core_page_list() {
 		)
 	);
 }
-	add_action( 'init', 'register_block_core_page_list' );
+add_action( 'init', 'register_block_core_page_list' );

package/src/post-author/edit.js

@@ -162,9 +162,12 @@ function PostAuthorEdit( {
 						{ authorDetails?.name || __( 'Post Author' ) }
 					</p>
 					{ showBio && (
-						<p className="wp-block-post-author__bio">
-							{ authorDetails?.description }
-						</p>
+						<p
+							className="wp-block-post-author__bio"
+							dangerouslySetInnerHTML={ {
+								__html: authorDetails?.description,
+							} }
+						/>
 					) }
 				</div>
 			</div>

package/src/post-author-biography/edit.js

@@ -55,7 +55,10 @@ function PostAuthorBiographyEdit( {
 					} }
 				/>
 			</BlockControls>
-			<div { ...blockProps }> { displayAuthorBiography } </div>
+			<div
+				{ ...blockProps }
+				dangerouslySetInnerHTML={ { __html: displayAuthorBiography } }
+			/>
 		</>
 	);
 }

package/src/post-content/edit.js

@@ -7,7 +7,8 @@ import {
 	useBlockProps,
 	useInnerBlocksProps,
 	useSetting,
-	__experimentalUseNoRecursiveRenders as useNoRecursiveRenders,
+	__experimentalRecursionProvider as RecursionProvider,
+	__experimentalUseHasRecursion as useHasRecursion,
 	store as blockEditorStore,
 	Warning,
 } from '@wordpress/block-editor';
@@ -118,15 +119,14 @@ function RecursionError() {
 export default function PostContentEdit( { context, attributes } ) {
 	const { postId: contextPostId, postType: contextPostType } = context;
 	const { layout = {} } = attributes;
-	const [ hasAlreadyRendered, RecursionProvider ] =
-		useNoRecursiveRenders( contextPostId );
+	const hasAlreadyRendered = useHasRecursion( contextPostId );
 
 	if ( contextPostId && contextPostType && hasAlreadyRendered ) {
 		return <RecursionError />;
 	}
 
 	return (
-		<RecursionProvider>
+		<RecursionProvider uniqueId={ contextPostId }>
 			{ contextPostId && contextPostType ? (
 				<Content context={ context } layout={ layout } />
 			) : (

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

@@ -23,6 +23,15 @@
 		},
 		"sizeSlug": {
 			"type": "string"
+		},
+		"rel": {
+			"type": "string",
+			"attribute": "rel",
+			"default": ""
+		},
+		"linkTarget": {
+			"type": "string",
+			"default": "_self"
 		}
 	},
 	"usesContext": [ "postId", "postType", "queryId" ],

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

@@ -9,6 +9,7 @@ import {
 	PanelBody,
 	Placeholder,
 	Button,
+	TextControl,
 } from '@wordpress/components';
 import {
 	InspectorControls,
@@ -53,7 +54,8 @@ function PostFeaturedImageDisplay( {
 	context: { postId, postType: postTypeSlug, queryId },
 } ) {
 	const isDescendentOfQueryLoop = Number.isFinite( queryId );
-	const { isLink, height, width, scale, sizeSlug } = attributes;
+	const { isLink, height, width, scale, sizeSlug, rel, linkTarget } =
+		attributes;
 	const [ featuredImage, setFeaturedImage ] = useEntityProp(
 		'postType',
 		postTypeSlug,
@@ -128,6 +130,26 @@ function PostFeaturedImageDisplay( {
 						onChange={ () => setAttributes( { isLink: ! isLink } ) }
 						checked={ isLink }
 					/>
+					{ isLink && (
+						<>
+							<ToggleControl
+								label={ __( 'Open in new tab' ) }
+								onChange={ ( value ) =>
+									setAttributes( {
+										linkTarget: value ? '_blank' : '_self',
+									} )
+								}
+								checked={ linkTarget === '_blank' }
+							/>
+							<TextControl
+								label={ __( 'Link rel' ) }
+								value={ rel }
+								onChange={ ( newRel ) =>
+									setAttributes( { rel: newRel } )
+								}
+							/>
+						</>
+					) }
 				</PanelBody>
 			</InspectorControls>
 		</>

package/src/post-featured-image/index.php

@@ -29,7 +29,9 @@ function render_block_core_post_featured_image( $attributes, $content, $block )
 	}
 	$wrapper_attributes = get_block_wrapper_attributes();
 	if ( $is_link ) {
-		$featured_image = sprintf( '<a href="%1s">%2s</a>', get_the_permalink( $post_ID ), $featured_image );
+		$link_target    = $attributes['linkTarget'];
+		$rel            = ! empty( $attributes['rel'] ) ? 'rel="' . esc_attr( $attributes['rel'] ) . '"' : '';
+		$featured_image = sprintf( '<a href="%1$s" target="%2$s" %3$s>%4$s</a>', get_the_permalink( $post_ID ), esc_attr( $link_target ), $rel, $featured_image );
 	}
 
 	$has_width  = ! empty( $attributes['width'] );

package/src/post-title/index.php

@@ -34,7 +34,8 @@ function render_block_core_post_title( $attributes, $content, $block ) {
 	}
 
 	if ( isset( $attributes['isLink'] ) && $attributes['isLink'] ) {
-		$title = sprintf( '<a href="%1$s" target="%2$s" rel="%3$s">%4$s</a>', get_the_permalink( $post_ID ), esc_attr( $attributes['linkTarget'] ), esc_attr( $attributes['rel'] ), $title );
+		$rel   = ! empty( $attributes['rel'] ) ? 'rel="' . esc_attr( $attributes['rel'] ) . '"' : '';
+		$title = sprintf( '<a href="%1$s" target="%2$s" %3$s>%4$s</a>', get_the_permalink( $post_ID ), esc_attr( $attributes['linkTarget'] ), $rel, $title );
 	}
 	$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => $align_class_name ) );
 

package/src/preformatted/test/__snapshots__/edit.native.js.snap

@@ -10,7 +10,14 @@ exports[`core/more/edit/native should match snapshot when content is empty 1`] =
     ]
   }
 >
-  <View>
+  <View
+    style={
+      Array [
+        undefined,
+        undefined,
+      ]
+    }
+  >
     <TextInput
       accessibilityLabel="Text input. Empty"
       activeFormats={Array []}
@@ -50,7 +57,14 @@ exports[`core/more/edit/native should match snapshot when content is not empty 1
     ]
   }
 >
-  <View>
+  <View
+    style={
+      Array [
+        undefined,
+        undefined,
+      ]
+    }
+  >
     <TextInput
       accessibilityLabel="Text input. <pre>Hello World!</pre>"
       activeFormats={Array []}

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

@@ -13,6 +13,8 @@ import {
 	RangeControl,
 	ToggleControl,
 	Notice,
+	__experimentalToolsPanel as ToolsPanel,
+	__experimentalToolsPanelItem as ToolsPanelItem,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { InspectorControls } from '@wordpress/block-editor';
@@ -26,7 +28,7 @@ import { store as coreStore } from '@wordpress/core-data';
 import OrderControl from './order-control';
 import AuthorControl from './author-control';
 import ParentControl from './parent-control';
-import TaxonomyControls from './taxonomy-controls';
+import { TaxonomyControls, useTaxonomiesInfo } from './taxonomy-controls';
 import StickyControl from './sticky-control';
 import { usePostTypes } from '../../utils';
 
@@ -57,6 +59,7 @@ export default function QueryInspectorControls( {
 	} = query;
 	const [ showSticky, setShowSticky ] = useState( postType === 'post' );
 	const { postTypesTaxonomiesMap, postTypesSelectOptions } = usePostTypes();
+	const taxonomiesInfo = useTaxonomiesInfo( postType );
 	const isPostTypeHierarchical = useIsPostTypeHierarchical( postType );
 	useEffect( () => {
 		setShowSticky( postType === 'post' );
@@ -100,78 +103,139 @@ export default function QueryInspectorControls( {
 		return onChangeDebounced.cancel;
 	}, [ querySearch, onChangeDebounced ] );
 	return (
-		<InspectorControls>
-			<PanelBody title={ __( 'Settings' ) }>
-				<ToggleControl
-					label={ __( 'Inherit query from template' ) }
-					help={ __(
-						'Toggle to use the global query context that is set with the current template, such as an archive or search. Disable to customize the settings independently.'
-					) }
-					checked={ !! inherit }
-					onChange={ ( value ) => setQuery( { inherit: !! value } ) }
-				/>
-				{ ! inherit && (
-					<SelectControl
-						options={ postTypesSelectOptions }
-						value={ postType }
-						label={ __( 'Post type' ) }
-						onChange={ onPostTypeChange }
+		<>
+			<InspectorControls>
+				<PanelBody title={ __( 'Settings' ) }>
+					<ToggleControl
+						label={ __( 'Inherit query from template' ) }
 						help={ __(
-							'WordPress contains different types of content and they are divided into collections called "Post types". By default there are a few different ones such as blog posts and pages, but plugins could add more.'
+							'Toggle to use the global query context that is set with the current template, such as an archive or search. Disable to customize the settings independently.'
 						) }
+						checked={ !! inherit }
+						onChange={ ( value ) =>
+							setQuery( { inherit: !! value } )
+						}
 					/>
-				) }
-				{ displayLayout?.type === 'flex' && (
-					<>
-						<RangeControl
-							label={ __( 'Columns' ) }
-							value={ displayLayout.columns }
-							onChange={ ( value ) =>
-								setDisplayLayout( { columns: value } )
-							}
-							min={ 2 }
-							max={ Math.max( 6, displayLayout.columns ) }
+					{ ! inherit && (
+						<SelectControl
+							options={ postTypesSelectOptions }
+							value={ postType }
+							label={ __( 'Post type' ) }
+							onChange={ onPostTypeChange }
+							help={ __(
+								'WordPress contains different types of content and they are divided into collections called "Post types". By default there are a few different ones such as blog posts and pages, but plugins could add more.'
+							) }
 						/>
-						{ displayLayout.columns > 6 && (
-							<Notice status="warning" isDismissible={ false }>
-								{ __(
-									'This column count exceeds the recommended amount and may cause visual breakage.'
-								) }
-							</Notice>
-						) }
-					</>
-				) }
-				{ ! inherit && (
-					<OrderControl
-						{ ...{ order, orderBy } }
-						onChange={ setQuery }
-					/>
-				) }
-				{ ! inherit && showSticky && (
-					<StickyControl
-						value={ sticky }
-						onChange={ ( value ) => setQuery( { sticky: value } ) }
-					/>
-				) }
-			</PanelBody>
-			{ ! inherit && (
-				<PanelBody title={ __( 'Filters' ) }>
-					<TaxonomyControls onChange={ setQuery } query={ query } />
-					<AuthorControl value={ authorIds } onChange={ setQuery } />
-					<TextControl
-						label={ __( 'Keyword' ) }
-						value={ querySearch }
-						onChange={ setQuerySearch }
-					/>
-					{ isPostTypeHierarchical && (
-						<ParentControl
-							parents={ parents }
-							postType={ postType }
+					) }
+					{ displayLayout?.type === 'flex' && (
+						<>
+							<RangeControl
+								label={ __( 'Columns' ) }
+								value={ displayLayout.columns }
+								onChange={ ( value ) =>
+									setDisplayLayout( { columns: value } )
+								}
+								min={ 2 }
+								max={ Math.max( 6, displayLayout.columns ) }
+							/>
+							{ displayLayout.columns > 6 && (
+								<Notice
+									status="warning"
+									isDismissible={ false }
+								>
+									{ __(
+										'This column count exceeds the recommended amount and may cause visual breakage.'
+									) }
+								</Notice>
+							) }
+						</>
+					) }
+					{ ! inherit && (
+						<OrderControl
+							{ ...{ order, orderBy } }
 							onChange={ setQuery }
 						/>
 					) }
+					{ ! inherit && showSticky && (
+						<StickyControl
+							value={ sticky }
+							onChange={ ( value ) =>
+								setQuery( { sticky: value } )
+							}
+						/>
+					) }
 				</PanelBody>
+			</InspectorControls>
+			{ ! inherit && (
+				<InspectorControls>
+					<ToolsPanel
+						className="block-library-query-toolspanel__filters"
+						label={ __( 'Filters' ) }
+						resetAll={ () => {
+							setQuery( {
+								author: '',
+								parents: [],
+								search: '',
+								taxQuery: null,
+							} );
+							setQuerySearch( '' );
+						} }
+					>
+						{ !! taxonomiesInfo?.length && (
+							<ToolsPanelItem
+								label={ __( 'Taxonomies' ) }
+								hasValue={ () =>
+									Object.values( taxQuery || {} ).some(
+										( terms ) => !! terms.length
+									)
+								}
+								onDeselect={ () =>
+									setQuery( { taxQuery: null } )
+								}
+							>
+								<TaxonomyControls
+									onChange={ setQuery }
+									query={ query }
+								/>
+							</ToolsPanelItem>
+						) }
+						<ToolsPanelItem
+							hasValue={ () => !! authorIds }
+							label={ __( 'Authors' ) }
+							onDeselect={ () => setQuery( { author: '' } ) }
+						>
+							<AuthorControl
+								value={ authorIds }
+								onChange={ setQuery }
+							/>
+						</ToolsPanelItem>
+						<ToolsPanelItem
+							hasValue={ () => !! querySearch }
+							label={ __( 'Keyword' ) }
+							onDeselect={ () => setQuerySearch( '' ) }
+						>
+							<TextControl
+								label={ __( 'Keyword' ) }
+								value={ querySearch }
+								onChange={ setQuerySearch }
+							/>
+						</ToolsPanelItem>
+						{ isPostTypeHierarchical && (
+							<ToolsPanelItem
+								hasValue={ () => !! parents?.length }
+								label={ __( 'Parents' ) }
+								onDeselect={ () => setQuery( { parents: [] } ) }
+							>
+								<ParentControl
+									parents={ parents }
+									postType={ postType }
+									onChange={ setQuery }
+								/>
+							</ToolsPanelItem>
+						) }
+					</ToolsPanel>
+				</InspectorControls>
 			) }
-		</InspectorControls>
+		</>
 	);
 }

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

@@ -33,8 +33,8 @@ const getTermIdByTermValue = ( termsMappedByName, termValue ) => {
 	}
 };
 
-function TaxonomyControls( { onChange, query } ) {
-	const taxonomies = useTaxonomies( query.postType );
+export const useTaxonomiesInfo = ( postType ) => {
+	const taxonomies = useTaxonomies( postType );
 	const taxonomiesInfo = useSelect(
 		( select ) => {
 			const { getEntityRecords } = select( coreStore );
@@ -51,6 +51,11 @@ function TaxonomyControls( { onChange, query } ) {
 		},
 		[ taxonomies ]
 	);
+	return taxonomiesInfo;
+};
+
+export function TaxonomyControls( { onChange, query } ) {
+	const taxonomiesInfo = useTaxonomiesInfo( query.postType );
 	const onTermsChange = ( taxonomySlug ) => ( newTermValues ) => {
 		const taxonomyInfo = taxonomiesInfo.find(
 			( { slug } ) => slug === taxonomySlug
@@ -102,17 +107,19 @@ function TaxonomyControls( { onChange, query } ) {
 						return null;
 					}
 					return (
-						<FormTokenField
+						<div
 							key={ slug }
-							label={ name }
-							value={ getExistingTaxQueryValue( slug ) }
-							suggestions={ terms.names }
-							onChange={ onTermsChange( slug ) }
-						/>
+							className="block-library-query-inspector__taxonomy-control"
+						>
+							<FormTokenField
+								label={ name }
+								value={ getExistingTaxQueryValue( slug ) }
+								suggestions={ terms.names }
+								onChange={ onTermsChange( slug ) }
+							/>
+						</div>
 					);
 				} ) }
 		</>
 	);
 }
-
-export default TaxonomyControls;

package/src/query/editor.scss

@@ -43,3 +43,12 @@
 		max-height: none;
 	}
 }
+
+.block-library-query-toolspanel__filters {
+	.components-form-token-field__help {
+		margin-bottom: 0;
+	}
+	.block-library-query-inspector__taxonomy-control:not(:last-child) {
+		margin-bottom: $grid-unit-30;
+	}
+}