@wordpress/block-library 9.19.2 → 9.21.0

package/src/navigation/edit/index.js

@@ -143,6 +143,7 @@ function ColorTools( {
 						onColorChange: setTextColor,
 						resetAllFilter: () => setTextColor(),
 						clearable: true,
+						enableAlpha: true,
 					},
 					{
 						colorValue: backgroundColor.color,
@@ -150,6 +151,7 @@ function ColorTools( {
 						onColorChange: setBackgroundColor,
 						resetAllFilter: () => setBackgroundColor(),
 						clearable: true,
+						enableAlpha: true,
 					},
 					{
 						colorValue: overlayTextColor.color,
@@ -157,6 +159,7 @@ function ColorTools( {
 						onColorChange: setOverlayTextColor,
 						resetAllFilter: () => setOverlayTextColor(),
 						clearable: true,
+						enableAlpha: true,
 					},
 					{
 						colorValue: overlayBackgroundColor.color,
@@ -164,6 +167,7 @@ function ColorTools( {
 						onColorChange: setOverlayBackgroundColor,
 						resetAllFilter: () => setOverlayBackgroundColor(),
 						clearable: true,
+						enableAlpha: true,
 					},
 				] }
 				panelId={ clientId }

package/src/navigation-link/edit.js

@@ -26,6 +26,7 @@ import {
 	store as blockEditorStore,
 	getColorClassName,
 	useInnerBlocksProps,
+	useBlockEditingMode,
 } from '@wordpress/block-editor';
 import { isURL, prependHTTP, safeDecodeURI } from '@wordpress/url';
 import { useState, useEffect, useRef } from '@wordpress/element';
@@ -43,6 +44,10 @@ import { updateAttributes } from './update-attributes';
 import { getColors } from '../navigation/edit/utils';
 
 const DEFAULT_BLOCK = { name: 'core/navigation-link' };
+const NESTING_BLOCK_NAMES = [
+	'core/navigation-link',
+	'core/navigation-submenu',
+];
 
 /**
  * A React hook to determine if it's dragging within the target element.
@@ -95,19 +100,29 @@ const useIsDraggingWithin = ( elementRef ) => {
 	return isDraggingWithin;
 };
 
-const useIsInvalidLink = ( kind, type, id ) => {
+const useIsInvalidLink = ( kind, type, id, enabled ) => {
 	const isPostType =
 		kind === 'post-type' || type === 'post' || type === 'page';
 	const hasId = Number.isInteger( id );
+	const blockEditingMode = useBlockEditingMode();
+
 	const postStatus = useSelect(
 		( select ) => {
 			if ( ! isPostType ) {
 				return null;
 			}
+
+			// Fetching the posts status is an "expensive" operation. Especially for sites with large navigations.
+			// When the block is rendered in a template or other disabled contexts we can skip this check in order
+			// to avoid all these additional requests that don't really add any value in that mode.
+			if ( blockEditingMode === 'disabled' || ! enabled ) {
+				return null;
+			}
+
 			const { getEntityRecord } = select( coreStore );
 			return getEntityRecord( 'postType', type, id )?.status;
 		},
-		[ isPostType, type, id ]
+		[ isPostType, blockEditingMode, enabled, type, id ]
 	);
 
 	// Check Navigation Link validity if:
@@ -280,8 +295,6 @@ export default function NavigationLinkEdit( {
 	clientId,
 } ) {
 	const { id, label, type, url, description, kind } = attributes;
-
-	const [ isInvalid, isDraft ] = useIsInvalidLink( kind, type, id );
 	const { maxNestingLevel } = context;
 
 	const {
@@ -313,6 +326,7 @@ export default function NavigationLinkEdit( {
 		isTopLevelLink,
 		isParentOfSelectedBlock,
 		hasChildren,
+		validateLinkStatus,
 	} = useSelect(
 		( select ) => {
 			const {
@@ -321,28 +335,48 @@ export default function NavigationLinkEdit( {
 				getBlockRootClientId,
 				hasSelectedInnerBlock,
 				getBlockParentsByBlockName,
+				getSelectedBlockClientId,
 			} = select( blockEditorStore );
+			const rootClientId = getBlockRootClientId( clientId );
+			const isTopLevel =
+				getBlockName( rootClientId ) === 'core/navigation';
+			const selectedBlockClientId = getSelectedBlockClientId();
+			const rootNavigationClientId = isTopLevel
+				? rootClientId
+				: getBlockParentsByBlockName(
+						clientId,
+						'core/navigation'
+				  )[ 0 ];
+
+			// Enable when the root Navigation block is selected or any of its inner blocks.
+			const enableLinkStatusValidation =
+				selectedBlockClientId === rootNavigationClientId ||
+				hasSelectedInnerBlock( rootNavigationClientId, true );
 
 			return {
 				isAtMaxNesting:
-					getBlockParentsByBlockName( clientId, [
-						'core/navigation-link',
-						'core/navigation-submenu',
-					] ).length >= maxNestingLevel,
-				isTopLevelLink:
-					getBlockName( getBlockRootClientId( clientId ) ) ===
-					'core/navigation',
+					getBlockParentsByBlockName( clientId, NESTING_BLOCK_NAMES )
+						.length >= maxNestingLevel,
+				isTopLevelLink: isTopLevel,
 				isParentOfSelectedBlock: hasSelectedInnerBlock(
 					clientId,
 					true
 				),
 				hasChildren: !! getBlockCount( clientId ),
+				validateLinkStatus: enableLinkStatusValidation,
 			};
 		},
 		[ clientId, maxNestingLevel ]
 	);
 	const { getBlocks } = useSelect( blockEditorStore );
 
+	const [ isInvalid, isDraft ] = useIsInvalidLink(
+		kind,
+		type,
+		id,
+		validateLinkStatus
+	);
+
 	/**
 	 * Transform to submenu block.
 	 */

package/src/post-author/block.json

@@ -58,7 +58,6 @@
 		"color": {
 			"gradients": true,
 			"link": true,
-			"__experimentalDuotone": ".wp-block-post-author__avatar img",
 			"__experimentalDefaultControls": {
 				"background": true,
 				"text": true
@@ -78,6 +77,14 @@
 				"width": true,
 				"style": true
 			}
+		},
+		"filter": {
+			"duotone": true
+		}
+	},
+	"selectors": {
+		"filter": {
+			"duotone": ".wp-block-post-author .wp-block-post-author__avatar img"
 		}
 	},
 	"editorStyle": "wp-block-post-author-editor",

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

@@ -398,7 +398,8 @@ export default function PostFeaturedImageEdit( {
 							label={ label }
 							showTooltip
 							tooltipPosition="top center"
-							onClick={ () => {
+							onClick={ ( e ) => {
+								e.preventDefault();
 								open();
 							} }
 						/>

package/src/rss/block.json

@@ -39,6 +39,13 @@
 		"excerptLength": {
 			"type": "number",
 			"default": 55
+		},
+		"openInNewTab": {
+			"type": "boolean",
+			"default": false
+		},
+		"rel": {
+			"type": "string"
 		}
 	},
 	"supports": {

package/src/rss/edit.js

@@ -14,6 +14,7 @@ import {
 	RangeControl,
 	ToggleControl,
 	ToolbarGroup,
+	TextControl,
 	__experimentalInputControl as InputControl,
 } from '@wordpress/components';
 import { useState } from '@wordpress/element';
@@ -37,6 +38,8 @@ export default function RSSEdit( { attributes, setAttributes } ) {
 		excerptLength,
 		feedURL,
 		itemsToShow,
+		openInNewTab,
+		rel,
 	} = attributes;
 
 	function toggleAttribute( propName ) {
@@ -197,8 +200,26 @@ export default function RSSEdit( { attributes, setAttributes } ) {
 							required
 						/>
 					) }
+
+					<ToggleControl
+						__nextHasNoMarginBottom
+						label={ __( 'Open links in new tab' ) }
+						checked={ openInNewTab }
+						onChange={ ( value ) =>
+							setAttributes( { openInNewTab: value } )
+						}
+					/>
 				</PanelBody>
 			</InspectorControls>
+			<InspectorControls group="advanced">
+				<TextControl
+					__next40pxDefaultSize
+					__nextHasNoMarginBottom
+					label={ __( 'Link rel' ) }
+					value={ rel || '' }
+					onChange={ ( value ) => setAttributes( { rel: value } ) }
+				/>
+			</InspectorControls>
 			<div { ...blockProps }>
 				<Disabled>
 					<ServerSideRender

package/src/rss/index.php

@@ -31,6 +31,20 @@ function render_block_core_rss( $attributes ) {
 
 	$rss_items  = $rss->get_items( 0, $attributes['itemsToShow'] );
 	$list_items = '';
+
+	$open_in_new_tab = ! empty( $attributes['openInNewTab'] );
+	$rel             = ! empty( $attributes['rel'] ) ? trim( $attributes['rel'] ) : '';
+
+	$link_attributes = '';
+
+	if ( $open_in_new_tab ) {
+		$link_attributes .= ' target="_blank"';
+	}
+
+	if ( '' !== $rel ) {
+		$link_attributes .= ' rel="' . esc_attr( $rel ) . '"';
+	}
+
 	foreach ( $rss_items as $item ) {
 		$title = esc_html( trim( strip_tags( $item->get_title() ) ) );
 		if ( empty( $title ) ) {
@@ -38,20 +52,24 @@ function render_block_core_rss( $attributes ) {
 		}
 		$link = $item->get_link();
 		$link = esc_url( $link );
+
 		if ( $link ) {
-			$title = "<a href='{$link}'>{$title}</a>";
+			$title = "<a href='{$link}'{$link_attributes}>{$title}</a>";
 		}
 		$title = "<div class='wp-block-rss__item-title'>{$title}</div>";
 
-		$date = '';
-		if ( $attributes['displayDate'] ) {
-			$date = $item->get_date( 'U' );
+		$date_markup = '';
+		if ( ! empty( $attributes['displayDate'] ) ) {
+			$timestamp = $item->get_date( 'U' );
+
+			if ( $timestamp ) {
+				$gmt_offset = get_option( 'gmt_offset' );
+				$timestamp += (int) ( (float) $gmt_offset * HOUR_IN_SECONDS );
 
-			if ( $date ) {
-				$date = sprintf(
+				$date_markup = sprintf(
 					'<time datetime="%1$s" class="wp-block-rss__item-publish-date">%2$s</time> ',
-					esc_attr( date_i18n( 'c', $date ) ),
-					esc_attr( date_i18n( get_option( 'date_format' ), $date ) )
+					esc_attr( date_i18n( 'c', $timestamp ) ),
+					esc_html( date_i18n( get_option( 'date_format' ), $timestamp ) )
 				);
 			}
 		}
@@ -85,7 +103,7 @@ function render_block_core_rss( $attributes ) {
 			$excerpt = '<div class="wp-block-rss__item-excerpt">' . esc_html( $excerpt ) . '</div>';
 		}
 
-		$list_items .= "<li class='wp-block-rss__item'>{$title}{$date}{$author}{$excerpt}</li>";
+		$list_items .= "<li class='wp-block-rss__item'>{$title}{$date_markup}{$author}{$excerpt}</li>";
 	}
 
 	$classnames = array();

package/src/site-logo/block.json

@@ -36,7 +36,6 @@
 		"align": true,
 		"alignWide": false,
 		"color": {
-			"__experimentalDuotone": "img, .components-placeholder__illustration, .components-placeholder::before",
 			"text": false,
 			"background": false
 		},
@@ -50,6 +49,9 @@
 		},
 		"interactivity": {
 			"clientNavigation": true
+		},
+		"filter": {
+			"duotone": true
 		}
 	},
 	"styles": [
@@ -60,6 +62,11 @@
 		},
 		{ "name": "rounded", "label": "Rounded" }
 	],
+	"selectors": {
+		"filter": {
+			"duotone": ".wp-block-site-logo img, .wp-block-site-logo .components-placeholder__illustration, .wp-block-site-logo .components-placeholder::before"
+		}
+	},
 	"editorStyle": "wp-block-site-logo-editor",
 	"style": "wp-block-site-logo"
 }

package/src/site-title/edit.js

@@ -56,7 +56,7 @@ export default function SiteTitleEdit( {
 
 	function setTitle( newTitle ) {
 		editEntityRecord( 'root', 'site', undefined, {
-			title: newTitle,
+			title: newTitle.trim(),
 		} );
 	}
 

package/src/site-title/index.php

@@ -16,7 +16,7 @@
  */
 function render_block_core_site_title( $attributes ) {
 	$site_title = get_bloginfo( 'name' );
-	if ( ! $site_title ) {
+	if ( ! trim( $site_title ) ) {
 		return;
 	}
 

package/src/social-links/block.json

@@ -50,6 +50,7 @@
 	"supports": {
 		"align": [ "left", "center", "right" ],
 		"anchor": true,
+		"html": false,
 		"__experimentalExposeControlsToChildren": true,
 		"layout": {
 			"allowSwitching": false,

package/src/table-of-contents/block.json

@@ -19,6 +19,9 @@
 		"onlyIncludeCurrentPage": {
 			"type": "boolean",
 			"default": false
+		},
+		"maxLevel": {
+			"type": "number"
 		}
 	},
 	"supports": {

package/src/table-of-contents/edit.js

@@ -12,6 +12,7 @@ import { createBlock } from '@wordpress/blocks';
 import {
 	Placeholder,
 	ToggleControl,
+	SelectControl,
 	ToolbarButton,
 	ToolbarGroup,
 	__experimentalToolsPanel as ToolsPanel,
@@ -39,15 +40,16 @@ import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
  *
  * @param {Object}                       props                                   The props.
  * @param {Object}                       props.attributes                        The block attributes.
- * @param {HeadingData[]}                props.attributes.headings               A list of data for each heading in the post.
+ * @param {HeadingData[]}                props.attributes.headings               The list of data for each heading in the post.
  * @param {boolean}                      props.attributes.onlyIncludeCurrentPage Whether to only include headings from the current page (if the post is paginated).
- * @param {string}                       props.clientId
- * @param {(attributes: Object) => void} props.setAttributes
+ * @param {number|undefined}             props.attributes.maxLevel               The maximum heading level to include, or null to include all levels.
+ * @param {string}                       props.clientId                          The client id.
+ * @param {(attributes: Object) => void} props.setAttributes                     The set attributes function.
  *
  * @return {Component} The component.
  */
 export default function TableOfContentsEdit( {
-	attributes: { headings = [], onlyIncludeCurrentPage },
+	attributes: { headings = [], onlyIncludeCurrentPage, maxLevel },
 	clientId,
 	setAttributes,
 } ) {
@@ -115,6 +117,7 @@ export default function TableOfContentsEdit( {
 				resetAll={ () => {
 					setAttributes( {
 						onlyIncludeCurrentPage: false,
+						maxLevel: undefined,
 					} );
 				} }
 				dropdownMenuProps={ dropdownMenuProps }
@@ -145,6 +148,44 @@ export default function TableOfContentsEdit( {
 						}
 					/>
 				</ToolsPanelItem>
+				<ToolsPanelItem
+					hasValue={ () => !! maxLevel }
+					label={ __( 'Limit heading levels' ) }
+					onDeselect={ () =>
+						setAttributes( { maxLevel: undefined } )
+					}
+					isShownByDefault
+				>
+					<SelectControl
+						__nextHasNoMarginBottom
+						__next40pxDefaultSize
+						label={ __( 'Include headings down to level' ) }
+						value={ maxLevel || '' }
+						options={ [
+							{ value: '', label: __( 'All levels' ) },
+							{ value: '1', label: __( 'Heading 1' ) },
+							{ value: '2', label: __( 'Heading 2' ) },
+							{ value: '3', label: __( 'Heading 3' ) },
+							{ value: '4', label: __( 'Heading 4' ) },
+							{ value: '5', label: __( 'Heading 5' ) },
+							{ value: '6', label: __( 'Heading 6' ) },
+						] }
+						onChange={ ( value ) =>
+							setAttributes( {
+								maxLevel: value ? parseInt( value ) : undefined,
+							} )
+						}
+						help={
+							maxLevel
+								? __(
+										'Including all heading levels in the table of contents.'
+								  )
+								: __(
+										'Only include headings up to and including this level.'
+								  )
+						}
+					/>
+				</ToolsPanelItem>
 			</ToolsPanel>
 		</InspectorControls>
 	);

package/src/table-of-contents/hooks.js

@@ -16,8 +16,8 @@ function getLatestHeadings( select, clientId ) {
 	const {
 		getBlockAttributes,
 		getBlockName,
-		getClientIdsWithDescendants,
 		getBlocksByName,
+		getClientIdsOfDescendants,
 	} = select( blockEditorStore );
 
 	// FIXME: @wordpress/block-library should not depend on @wordpress/editor.
@@ -29,10 +29,14 @@ function getLatestHeadings( select, clientId ) {
 	const permalink = select( 'core/editor' ).getPermalink() ?? null;
 
 	const isPaginated = getBlocksByName( 'core/nextpage' ).length !== 0;
-	const { onlyIncludeCurrentPage } = getBlockAttributes( clientId ) ?? {};
+	const { onlyIncludeCurrentPage, maxLevel } =
+		getBlockAttributes( clientId ) ?? {};
+
+	// Get post-content block client ID.
+	const [ postContentClientId = '' ] = getBlocksByName( 'core/post-content' );
 
 	// Get the client ids of all blocks in the editor.
-	const allBlockClientIds = getClientIdsWithDescendants();
+	const allBlockClientIds = getClientIdsOfDescendants( postContentClientId );
 
 	// If onlyIncludeCurrentPage is true, calculate the page (of a paginated post) this block is part of, so we know which headings to include; otherwise, skip the calculation.
 	let tocPage = 1;
@@ -97,6 +101,11 @@ function getLatestHeadings( select, clientId ) {
 			if ( blockName === 'core/heading' ) {
 				const headingAttributes = getBlockAttributes( blockClientId );
 
+				// Skip headings that are deeper than maxLevel
+				if ( maxLevel && headingAttributes.level > maxLevel ) {
+					continue;
+				}
+
 				const canBeLinked =
 					typeof headingPageLink === 'string' &&
 					typeof headingAttributes.anchor === 'string' &&