@wordpress/block-library 9.20.0 → 9.22.0

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/search/index.php

@@ -10,9 +10,7 @@
  *
  * @since 6.3.0 Using block.json `viewScript` to register script, and update `view_script_handles()` only when needed.
  *
- * @param array    $attributes The block attributes.
- * @param string   $content    The saved content.
- * @param WP_Block $block      The parsed block.
+ * @param array $attributes The block attributes.
  *
  * @return string The search block markup.
  */
@@ -152,17 +150,22 @@ function render_block_core_search( $attributes ) {
 		}
 	}
 
-	$field_markup_classes = $is_button_inside ? $border_color_classes : '';
-	$field_markup         = sprintf(
-		'<div class="wp-block-search__inside-wrapper %s" %s>%s</div>',
-		esc_attr( $field_markup_classes ),
+	$field_markup_classes = array(
+		'wp-block-search__inside-wrapper',
+	);
+	if ( $is_button_inside && ! empty( $border_color_classes ) ) {
+		$field_markup_classes[] = $border_color_classes;
+	}
+	$field_markup       = sprintf(
+		'<div class="%s" %s>%s</div>',
+		esc_attr( implode( ' ', $field_markup_classes ) ),
 		$inline_styles['wrapper'],
 		$input . $query_params_markup . $button
 	);
-	$wrapper_attributes   = get_block_wrapper_attributes(
+	$wrapper_attributes = get_block_wrapper_attributes(
 		array( 'class' => $classnames )
 	);
-	$form_directives      = '';
+	$form_directives    = '';
 
 	// If it's interactive, add the directives.
 	if ( $is_expandable_searchfield ) {

package/src/search/style.scss

@@ -110,6 +110,7 @@ $button-spacing-y: math.div($grid-unit-15, 2); // 6px
 :where(.wp-block-search__button-inside .wp-block-search__inside-wrapper) {
 	padding: $grid-unit-05;
 	border: 1px solid $gray-600;
+	background-color: $white;
 	box-sizing: border-box;
 
 	.wp-block-search__input {

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

@@ -6,7 +6,7 @@ import clsx from 'clsx';
 /**
  * WordPress dependencies
  */
-import { useEffect, useRef } from '@wordpress/element';
+import { useEffect } from '@wordpress/element';
 import {
 	BlockControls,
 	useInnerBlocksProps,
@@ -57,16 +57,21 @@ export function SocialLinksEdit( props ) {
 
 	const {
 		iconBackgroundColorValue,
-		customIconBackgroundColor,
 		iconColorValue,
 		openInNewTab,
 		showLabels,
 		size,
 	} = attributes;
 
-	const hasSelectedChild = useSelect(
-		( select ) =>
-			select( blockEditorStore ).hasSelectedInnerBlock( clientId ),
+	const { hasSocialIcons, hasSelectedChild } = useSelect(
+		( select ) => {
+			const { getBlockCount, hasSelectedInnerBlock } =
+				select( blockEditorStore );
+			return {
+				hasSocialIcons: getBlockCount( clientId ) > 0,
+				hasSelectedChild: hasSelectedInnerBlock( clientId ),
+			};
+		},
 		[ clientId ]
 	);
 
@@ -78,33 +83,25 @@ export function SocialLinksEdit( props ) {
 
 	// Remove icon background color when logos only style is selected or
 	// restore it when any other style is selected.
-	const backgroundBackupRef = useRef( {} );
 	useEffect( () => {
 		if ( logosOnly ) {
-			backgroundBackupRef.current = {
-				iconBackgroundColor,
-				iconBackgroundColorValue,
-				customIconBackgroundColor,
-			};
-			setAttributes( {
-				iconBackgroundColor: undefined,
-				customIconBackgroundColor: undefined,
-				iconBackgroundColorValue: undefined,
+			let restore;
+			setAttributes( ( prev ) => {
+				restore = {
+					iconBackgroundColor: prev.iconBackgroundColor,
+					iconBackgroundColorValue: prev.iconBackgroundColorValue,
+					customIconBackgroundColor: prev.customIconBackgroundColor,
+				};
+				return {
+					iconBackgroundColor: undefined,
+					iconBackgroundColorValue: undefined,
+					customIconBackgroundColor: undefined,
+				};
 			} );
-		} else {
-			setAttributes( { ...backgroundBackupRef.current } );
-		}
-	}, [ logosOnly ] );
 
-	const SocialPlaceholder = (
-		<li className="wp-block-social-links__social-placeholder">
-			<div className="wp-block-social-links__social-placeholder-icons">
-				<div className="wp-social-link wp-social-link-twitter"></div>
-				<div className="wp-social-link wp-social-link-facebook"></div>
-				<div className="wp-social-link wp-social-link-instagram"></div>
-			</div>
-		</li>
-	);
+			return () => setAttributes( { ...restore } );
+		}
+	}, [ logosOnly, setAttributes ] );
 
 	// Fallback color values are used maintain selections in case switching
 	// themes and named colors in palette do not match.
@@ -117,11 +114,13 @@ export function SocialLinksEdit( props ) {
 
 	const blockProps = useBlockProps( { className } );
 	const innerBlocksProps = useInnerBlocksProps( blockProps, {
-		placeholder: ! isSelected && SocialPlaceholder,
 		templateLock: false,
 		orientation: attributes.layout?.orientation ?? 'horizontal',
 		__experimentalAppenderTagName: 'li',
-		renderAppender: hasAnySelected && InnerBlocks.ButtonBlockAppender,
+		renderAppender:
+			! hasSocialIcons || hasAnySelected
+				? InnerBlocks.ButtonBlockAppender
+				: undefined,
 	} );
 
 	const POPOVER_PROPS = {

package/src/social-links/editor.scss

@@ -12,67 +12,9 @@
 
 // Specificity for the following styles are fixed at 0-1-0 to match and be
 // overridable by global styles.
-:root :where(.wp-block-social-links),
-:root :where(.wp-block-social-links.is-style-logos-only .wp-block-social-links__social-placeholder .wp-social-link) {
+:root :where(.wp-block-social-links) {
 	padding: 0;
 }
-:root :where(.wp-block-social-links__social-placeholder .wp-social-link) {
-	padding: 0.25em;
-}
-:root :where(.wp-block-social-links.is-style-pill-shape .wp-block-social-links__social-placeholder .wp-social-link) {
-	padding-left: calc((2/3) * 1em);
-	padding-right: calc((2/3) * 1em);
-}
-
-// Placeholder/setup state.
-.wp-block-social-links__social-placeholder {
-	display: flex;
-	opacity: 0.8;
-	list-style: none;
-
-	// Use the first link to set the height.
-	> .wp-social-link {
-		// Use !important to keep the selector simple.
-		padding-left: 0 !important;
-		margin-left: 0 !important;
-		padding-right: 0 !important;
-		margin-right: 0 !important;
-		width: 0 !important;
-		visibility: hidden;
-	}
-
-	// Wrap the remaining placeholders in a container so the plus can overlap.
-	> .wp-block-social-links__social-placeholder-icons {
-		display: flex;
-	}
-
-	.wp-social-link::before {
-		content: "";
-		display: block;
-		width: 1em;
-		height: 1em;
-		border-radius: $radius-round;
-
-		.is-style-logos-only & {
-			background: currentColor;
-		}
-	}
-}
-
-// Selected placeholder state.
-.wp-block-social-links .wp-block-social-links__social-prompt {
-	min-height: $button-size-small;
-	list-style: none;
-
-	// Show as block UI.
-	font-family: $default-font;
-	font-size: $default-font-size;
-	line-height: $button-size-small;
-	margin-top: auto;
-	margin-bottom: auto;
-	cursor: default;
-	padding-right: $grid-unit-10;
-}
 
 // Center flex items. This has an equivalent in style.scss.
 .wp-block[data-align="center"] > .wp-block-social-links,

package/src/table/index.js

@@ -48,7 +48,7 @@ export const settings = {
 							tag: 'td',
 						},
 						{
-							content: 'Jaco Pastorius',
+							content: __( 'Jaco Pastorius' ),
 							tag: 'td',
 						},
 						{
@@ -64,7 +64,7 @@ export const settings = {
 							tag: 'td',
 						},
 						{
-							content: 'Betty Carter',
+							content: __( 'Betty Carter' ),
 							tag: 'td',
 						},
 						{
@@ -80,7 +80,7 @@ export const settings = {
 							tag: 'td',
 						},
 						{
-							content: 'Bebo Valdés',
+							content: __( 'Bebo Valdés' ),
 							tag: 'td',
 						},
 						{

package/src/table/transforms.js

@@ -15,12 +15,12 @@ const tableContentPasteSchema = ( { phrasingContentSchema } ) => ( {
 			th: {
 				allowEmpty: true,
 				children: phrasingContentSchema,
-				attributes: [ 'scope', 'colspan', 'rowspan' ],
+				attributes: [ 'scope', 'colspan', 'rowspan', 'style' ],
 			},
 			td: {
 				allowEmpty: true,
 				children: phrasingContentSchema,
-				attributes: [ 'colspan', 'rowspan' ],
+				attributes: [ 'colspan', 'rowspan', 'style' ],
 			},
 		},
 	},
@@ -79,11 +79,23 @@ const transforms = {
 									col.getAttribute( 'colspan' )
 								);
 
+								const { textAlign } = col.style || {};
+
+								let align;
+								if (
+									textAlign === 'left' ||
+									textAlign === 'center' ||
+									textAlign === 'right'
+								) {
+									align = textAlign;
+								}
+
 								colAcc.push( {
 									tag: col.nodeName.toLowerCase(),
 									content: col.innerHTML,
 									rowspan,
 									colspan,
+									align,
 								} );
 
 								return colAcc;

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

@@ -29,7 +29,8 @@ 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' );
@@ -100,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' &&
@@ -142,8 +148,11 @@ function observeCallback( select, dispatch, clientId ) {
 
 	const headings = getLatestHeadings( select, clientId );
 	if ( ! fastDeepEqual( headings, attributes.headings ) ) {
-		__unstableMarkNextChangeAsNotPersistent();
-		updateBlockAttributes( clientId, { headings } );
+		// Executing the update in a microtask ensures that the non-persistent marker doesn't affect an attribute triggering the change.
+		window.queueMicrotask( () => {
+			__unstableMarkNextChangeAsNotPersistent();
+			updateBlockAttributes( clientId, { headings } );
+		} );
 	}
 }
 

package/src/tag-cloud/style.scss

@@ -7,11 +7,6 @@
 		justify-content: center;
 	}
 
-	&.alignfull {
-		padding-left: 1em;
-		padding-right: 1em;
-	}
-
 	a {
 		display: inline-block;
 		margin-right: 5px;