@wordpress/block-library 10.2.0 → 10.3.0

package/src/pullquote/editor.scss

@@ -15,3 +15,9 @@
 .wp-block-pullquote__citation {
 	color: inherit;
 }
+
+// Ensure custom line-height values applied to the block are inherited by the
+// paragraph instead of being overridden by the default editor styles.
+.wp-block-pullquote[style*="line-height"] :where(p) {
+	line-height: inherit;
+}

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

@@ -14,7 +14,7 @@ import {
 } from '@wordpress/components';
 import { useSelect } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
-import { __, sprintf } from '@wordpress/i18n';
+import { __, _x, sprintf } from '@wordpress/i18n';
 import { debounce } from '@wordpress/compose';
 import { useState, useMemo } from '@wordpress/element';
 
@@ -367,7 +367,10 @@ export default function QueryInspectorControls( props ) {
 						/>
 					</ToolsPanelItem>
 					<ToolsPanelItem
-						label={ __( 'Offset' ) }
+						label={ _x(
+							'Offset',
+							'Number of posts to skip in a query'
+						) }
 						hasValue={ () => offset > 0 }
 						onDeselect={ () => setQuery( { offset: 0 } ) }
 					>

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

@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { __experimentalNumberControl as NumberControl } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
+import { _x } from '@wordpress/i18n';
 
 const MIN_OFFSET = 0;
 const MAX_OFFSET = 100;
@@ -10,7 +10,7 @@ const MAX_OFFSET = 100;
 export const OffsetControl = ( { offset = 0, onChange } ) => {
 	return (
 		<NumberControl
-			label={ __( 'Offset' ) }
+			label={ _x( 'Offset', 'Number of posts to skip in a query' ) }
 			value={ offset }
 			min={ MIN_OFFSET }
 			onChange={ ( newOffset ) => {

package/src/read-more/edit.js

@@ -64,8 +64,13 @@ export default function ReadMore( {
 				onChange={ ( newValue ) =>
 					setAttributes( { content: newValue } )
 				}
-				__unstableOnSplitAtEnd={ () =>
-					insertBlocksAfter( createBlock( getDefaultBlockName() ) )
+				__unstableOnSplitAtEnd={
+					insertBlocksAfter
+						? () =>
+								insertBlocksAfter(
+									createBlock( getDefaultBlockName() )
+								)
+						: undefined
 				}
 				withoutInteractiveFormatting
 				{ ...blockProps }

package/src/rss/index.php

@@ -15,11 +15,16 @@
  * @return string Returns the block content with received rss items.
  */
 function render_block_core_rss( $attributes ) {
-	if ( in_array( untrailingslashit( $attributes['feedURL'] ), array( site_url(), home_url() ), true ) ) {
+	$feed_url = $attributes['feedURL'] ?? null;
+	if ( ! is_string( $feed_url ) ) {
+		return '';
+	}
+
+	if ( in_array( untrailingslashit( $feed_url ), array( site_url(), home_url() ), true ) ) {
 		return '<div class="components-placeholder"><div class="notice notice-error">' . __( 'Adding an RSS feed to this site’s homepage is not supported, as it could lead to a loop that slows down your site. Try using another block, like the <strong>Latest Posts</strong> block, to list posts from the site.' ) . '</div></div>';
 	}
 
-	$rss = fetch_feed( $attributes['feedURL'] );
+	$rss = fetch_feed( $feed_url );
 
 	if ( is_wp_error( $rss ) ) {
 		return '<div class="components-placeholder"><div class="notice notice-error"><strong>' . __( 'RSS Error:' ) . '</strong> ' . esc_html( $rss->get_error_message() ) . '</div></div>';
@@ -33,7 +38,8 @@ function render_block_core_rss( $attributes ) {
 	$list_items = '';
 
 	$open_in_new_tab = ! empty( $attributes['openInNewTab'] );
-	$rel             = ! empty( $attributes['rel'] ) ? trim( $attributes['rel'] ) : '';
+	$rel_attr        = $attributes['rel'] ?? null;
+	$rel             = is_string( $rel_attr ) && '' !== $rel_attr ? trim( $rel_attr ) : '';
 
 	$link_attributes = '';
 

package/src/site-tagline/edit.js

@@ -59,8 +59,13 @@ export default function SiteTaglineEdit( props ) {
 			tagName={ TagName }
 			value={ tagline }
 			disableLineBreaks
-			__unstableOnSplitAtEnd={ () =>
-				insertBlocksAfter( createBlock( getDefaultBlockName() ) )
+			__unstableOnSplitAtEnd={
+				insertBlocksAfter
+					? () =>
+							insertBlocksAfter(
+								createBlock( getDefaultBlockName() )
+							)
+					: undefined
 			}
 			{ ...blockProps }
 		/>

package/src/site-title/edit.js

@@ -73,8 +73,13 @@ export default function SiteTitleEdit( props ) {
 				onChange={ setTitle }
 				allowedFormats={ [] }
 				disableLineBreaks
-				__unstableOnSplitAtEnd={ () =>
-					insertBlocksAfter( createBlock( getDefaultBlockName() ) )
+				__unstableOnSplitAtEnd={
+					insertBlocksAfter
+						? () =>
+								insertBlocksAfter(
+									createBlock( getDefaultBlockName() )
+								)
+						: undefined
 				}
 			/>
 		</TagName>

package/src/social-link/index.php

@@ -19,19 +19,26 @@
 function render_block_core_social_link( $attributes, $content, $block ) {
 	$open_in_new_tab = $block->context['openInNewTab'] ?? false;
 
-	$text = ! empty( $attributes['label'] ) ? trim( $attributes['label'] ) : '';
+	$label_attr = $attributes['label'] ?? null;
+	$text       = is_string( $label_attr ) && '' !== $label_attr ? trim( $label_attr ) : '';
 
-	$service     = $attributes['service'] ?? 'Icon';
-	$url         = $attributes['url'] ?? false;
-	$text        = $text ? $text : block_core_social_link_get_name( $service );
-	$rel         = $attributes['rel'] ?? '';
-	$show_labels = array_key_exists( 'showLabels', $block->context ) ? $block->context['showLabels'] : false;
+	$service_attr = $attributes['service'] ?? null;
+	$service      = is_string( $service_attr ) ? $service_attr : 'Icon';
+	$url          = $attributes['url'] ?? false;
+	$text         = $text ? $text : block_core_social_link_get_name( $service );
+	$rel_attr     = $attributes['rel'] ?? null;
+	$rel          = is_string( $rel_attr ) ? $rel_attr : '';
+	$show_labels  = array_key_exists( 'showLabels', $block->context ) ? $block->context['showLabels'] : false;
 
 	// Don't render a link if there is no URL set.
 	if ( ! $url ) {
 		return '';
 	}
 
+	if ( ! is_string( $url ) ) {
+		return '';
+	}
+
 	/**
 	 * Prepend emails with `mailto:` if not set.
 	 * The `is_email` returns false for emails with schema.
@@ -100,7 +107,7 @@ add_action( 'init', 'register_block_core_social_link' );
  */
 function block_core_social_link_get_icon( $service ) {
 	$services = block_core_social_link_services();
-	if ( isset( $services[ $service ] ) && isset( $services[ $service ]['icon'] ) ) {
+	if ( is_string( $service ) && isset( $services[ $service ] ) && isset( $services[ $service ]['icon'] ) ) {
 		return $services[ $service ]['icon'];
 	}
 
@@ -118,7 +125,7 @@ function block_core_social_link_get_icon( $service ) {
  */
 function block_core_social_link_get_name( $service ) {
 	$services = block_core_social_link_services();
-	if ( isset( $services[ $service ] ) && isset( $services[ $service ]['name'] ) ) {
+	if ( is_string( $service ) && isset( $services[ $service ] ) && isset( $services[ $service ]['name'] ) ) {
 		return $services[ $service ]['name'];
 	}
 
@@ -136,6 +143,9 @@ function block_core_social_link_get_name( $service ) {
  * @return array|string
  */
 function block_core_social_link_services( $service = '', $field = '' ) {
+	if ( ! is_string( $service ) || ! is_string( $field ) ) {
+		return array();
+	}
 	$services_data = array(
 		'fivehundredpx' => array(
 			'name' => _x( '500px', 'social link block variation name' ),
@@ -295,7 +305,7 @@ function block_core_social_link_services( $service = '', $field = '' ) {
 		),
 		'tumblr'        => array(
 			'name' => _x( 'Tumblr', 'social link block variation name' ),
-			'icon' => '<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false"><path d="M17.04 21.28h-3.28c-2.84 0-4.94-1.37-4.94-5.02v-5.67H6.08V7.5c2.93-.73 4.11-3.3 4.3-5.48h3.01v4.93h3.47v3.65H13.4v4.93c0 1.47.73 2.01 1.92 2.01h1.73v3.75z" /></path></svg>',
+			'icon' => '<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false"><path d="M17.04 21.28h-3.28c-2.84 0-4.94-1.37-4.94-5.02v-5.67H6.08V7.5c2.93-.73 4.11-3.3 4.3-5.48h3.01v4.93h3.47v3.65H13.4v4.93c0 1.47.73 2.01 1.92 2.01h1.73v3.75z"></path></svg>',
 		),
 		'twitch'        => array(
 			'name' => _x( 'Twitch', 'social link block variation name' ),

package/src/social-links/edit.js

@@ -30,6 +30,7 @@ import { useSelect } from '@wordpress/data';
 /**
  * Internal dependencies
  */
+import { unlock } from '../lock-unlock';
 import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
 
 const sizeOptions = [
@@ -60,17 +61,23 @@ export function SocialLinksEdit( props ) {
 		size,
 	} = attributes;
 
-	const { hasSocialIcons, hasSelectedChild } = useSelect(
-		( select ) => {
-			const { getBlockCount, hasSelectedInnerBlock } =
-				select( blockEditorStore );
-			return {
-				hasSocialIcons: getBlockCount( clientId ) > 0,
-				hasSelectedChild: hasSelectedInnerBlock( clientId ),
-			};
-		},
-		[ clientId ]
-	);
+	const { hasSocialIcons, hasSelectedChild, hasSelectedStyleState } =
+		useSelect(
+			( select ) => {
+				const {
+					getBlockCount,
+					hasSelectedInnerBlock,
+					hasSelectedStyleState: hasSelectedBlockStyleState,
+				} = unlock( select( blockEditorStore ) );
+				return {
+					hasSocialIcons: getBlockCount( clientId ) > 0,
+					hasSelectedChild: hasSelectedInnerBlock( clientId ),
+					hasSelectedStyleState:
+						hasSelectedBlockStyleState( clientId ),
+				};
+			},
+			[ clientId ]
+		);
 
 	const hasAnySelected = isSelected || hasSelectedChild;
 
@@ -157,6 +164,8 @@ export function SocialLinksEdit( props ) {
 	}
 
 	const colorGradientSettings = useMultipleOriginColorsAndGradients();
+	const showColorControls =
+		colorGradientSettings.hasColorsOrGradients && ! hasSelectedStyleState;
 
 	return (
 		<>
@@ -227,7 +236,7 @@ export function SocialLinksEdit( props ) {
 					</ToolsPanelItem>
 				</ToolsPanel>
 			</InspectorControls>
-			{ colorGradientSettings.hasColorsOrGradients && (
+			{ showColorControls && (
 				<InspectorControls group="color">
 					{ colorSettings.map(
 						( { onChange, label, value, resetAllFilter } ) => (

package/src/tab-list/block.json

@@ -77,5 +77,6 @@
 			"padding": ".wp-block-tab-list button"
 		}
 	},
-	"style": "wp-block-tab-list"
+	"style": "wp-block-tab-list",
+	"editorStyle": "wp-block-tab-list-editor"
 }

package/src/tab-list/edit.js

@@ -28,6 +28,7 @@ import { useEffect, useMemo, useRef } from '@wordpress/element';
  * Internal dependencies
  */
 import TabToolbarControls from '../tabs/tab-toolbar-controls';
+import TabMovers from './tab-movers';
 import useTabActions from '../tabs/use-tab-actions';
 import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
 
@@ -199,6 +200,7 @@ function Edit( {
 					</ToolsPanelItem>
 				</ToolsPanel>
 			</InspectorControls>
+			<TabMovers tabsClientId={ tabsClientId } />
 			<TabToolbarControls tabsClientId={ tabsClientId } />
 			<div { ...blockProps }>
 				{ tabsList.map( ( tab, index ) => {

package/src/tab-list/editor.scss

@@ -0,0 +1,9 @@
+@use "@wordpress/base-styles/mixins" as *;
+@use "@wordpress/base-styles/variables" as *;
+
+.wp-block-tab-list__mover-button {
+	@include break-small() {
+		width: $button-size-small;
+		min-width: 0 !important;
+	}
+}

package/src/tab-list/tab-movers.js

@@ -0,0 +1,72 @@
+/**
+ * WordPress dependencies
+ */
+import { __, isRTL } from '@wordpress/i18n';
+import {
+	BlockControls,
+	store as blockEditorStore,
+} from '@wordpress/block-editor';
+import { ToolbarButton } from '@wordpress/components';
+import { chevronLeft, chevronRight } from '@wordpress/icons';
+import { useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import useTabActions from '../tabs/use-tab-actions';
+
+/**
+ * Block toolbar buttons that reorder the active tab one position before or after.
+ * Reordering acts on the underlying core/tab-panel blocks; the tab-list labels
+ * follow their panel automatically via useTabListItemsSync. The buttons are
+ * disabled at the first/last position.
+ *
+ * @param {Object} props
+ * @param {string} props.tabsClientId The client ID of the parent tabs block.
+ * @return {React.JSX.Element} The toolbar control element.
+ */
+export default function TabMovers( { tabsClientId } ) {
+	const { moveTab } = useTabActions( tabsClientId );
+	const { tabCount, activeIndex } = useSelect(
+		( select ) => {
+			if ( ! tabsClientId ) {
+				return { tabCount: 0, activeIndex: 0 };
+			}
+			const { getBlocks, getBlockAttributes } =
+				select( blockEditorStore );
+			const tabsAttributes = getBlockAttributes( tabsClientId );
+			const tabPanels = getBlocks( tabsClientId ).find(
+				( block ) => block.name === 'core/tab-panels'
+			);
+			return {
+				tabCount: tabPanels?.innerBlocks.length ?? 0,
+				activeIndex:
+					tabsAttributes?.editorActiveTabIndex ??
+					tabsAttributes?.activeTabIndex ??
+					0,
+			};
+		},
+		[ tabsClientId ]
+	);
+
+	return (
+		<BlockControls group="parent">
+			<ToolbarButton
+				className="wp-block-tab-list__mover-button"
+				icon={ isRTL() ? chevronRight : chevronLeft }
+				label={ __( 'Move tab before' ) }
+				onClick={ () => moveTab( -1 ) }
+				disabled={ activeIndex <= 0 }
+				accessibleWhenDisabled
+			/>
+			<ToolbarButton
+				className="wp-block-tab-list__mover-button"
+				icon={ isRTL() ? chevronLeft : chevronRight }
+				label={ __( 'Move tab after' ) }
+				onClick={ () => moveTab( 1 ) }
+				disabled={ activeIndex >= tabCount - 1 }
+				accessibleWhenDisabled
+			/>
+		</BlockControls>
+	);
+}

package/src/tab-panel/edit.js

@@ -1,7 +1,6 @@
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
 import {
 	useBlockProps,
 	useInnerBlocksProps,
@@ -15,14 +14,7 @@ import { useEffect } from '@wordpress/element';
  */
 import Controls from './controls';
 
-const TEMPLATE = [
-	[
-		'core/paragraph',
-		{
-			placeholder: __( 'Type / to choose a block' ),
-		},
-	],
-];
+const TEMPLATE = [ [ 'core/paragraph' ] ];
 
 export default function Edit( { clientId, isSelected } ) {
 	const {

package/src/table/edit.js

@@ -455,7 +455,7 @@ function TableEdit( {
 				<>
 					<BlockControls group="block">
 						<AlignmentControl
-							label={ __( 'Change column alignment' ) }
+							label={ __( 'Align column content' ) }
 							alignmentControls={ ALIGNMENT_CONTROLS }
 							value={ getCellAlignment() }
 							onChange={ ( nextAlign ) =>