@wordpress/block-library 8.11.0 → 8.12.1

package/src/site-logo/index.php

@@ -13,7 +13,7 @@
  * @return string The render.
  */
 function render_block_core_site_logo( $attributes ) {
-	$adjust_width_height_filter = function ( $image ) use ( $attributes ) {
+	$adjust_width_height_filter = static function ( $image ) use ( $attributes ) {
 		if ( empty( $attributes['width'] ) || empty( $image ) || ! $image[1] || ! $image[2] ) {
 			return $image;
 		}

package/src/site-tagline/block.json

@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "core/site-tagline",
 	"title": "Site Tagline",
 	"category": "theme",
@@ -14,7 +14,6 @@
 	},
 	"example": {},
 	"supports": {
-		"anchor": true,
 		"align": [ "wide", "full" ],
 		"html": false,
 		"color": {

package/src/site-tagline/icon.js

@@ -5,7 +5,6 @@ import { SVG, Path } from '@wordpress/components';
 
 export default (
 	<SVG xmlns="http://www.w3.org/2000/svg" width="24" height="24">
-		<Path fill="none" d="M0 0h24v24H0z" />
 		<Path d="M4 9h16v2H4V9zm0 4h10v2H4v-2z" />
 	</SVG>
 );

package/src/site-title/block.json

@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "core/site-title",
 	"title": "Site Title",
 	"category": "theme",
@@ -27,7 +27,6 @@
 		"viewportWidth": 500
 	},
 	"supports": {
-		"anchor": true,
 		"align": [ "wide", "full" ],
 		"html": false,
 		"color": {

package/src/site-title/edit/index.js

@@ -15,15 +15,13 @@ import {
 	InspectorControls,
 	BlockControls,
 	useBlockProps,
+	HeadingLevelDropdown,
 } from '@wordpress/block-editor';
 import { ToggleControl, PanelBody } from '@wordpress/components';
 import { createBlock, getDefaultBlockName } from '@wordpress/blocks';
 import { decodeEntities } from '@wordpress/html-entities';
 
-/**
- * Internal dependencies
- */
-import LevelControl from './level-toolbar';
+const HEADING_LEVELS = [ 0, 1, 2, 3, 4, 5, 6 ];
 
 export default function SiteTitleEdit( {
 	attributes,
@@ -95,8 +93,9 @@ export default function SiteTitleEdit( {
 	return (
 		<>
 			<BlockControls group="block">
-				<LevelControl
-					level={ level }
+				<HeadingLevelDropdown
+					options={ HEADING_LEVELS }
+					value={ level }
 					onChange={ ( newLevel ) =>
 						setAttributes( { level: newLevel } )
 					}

package/src/social-link/block.json

@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "core/social-link",
 	"title": "Social Icon",
 	"category": "widgets",
@@ -24,11 +24,12 @@
 	"usesContext": [
 		"openInNewTab",
 		"showLabels",
+		"iconColor",
 		"iconColorValue",
+		"iconBackgroundColor",
 		"iconBackgroundColorValue"
 	],
 	"supports": {
-		"anchor": true,
 		"reusable": false,
 		"html": false
 	},

package/src/social-link/edit.js

@@ -92,10 +92,19 @@ const SocialLinkEdit = ( {
 	clientId,
 } ) => {
 	const { url, service, label, rel } = attributes;
-	const { showLabels, iconColorValue, iconBackgroundColorValue } = context;
+	const {
+		showLabels,
+		iconColor,
+		iconColorValue,
+		iconBackgroundColor,
+		iconBackgroundColorValue,
+	} = context;
 	const [ showURLPopover, setPopover ] = useState( false );
 	const classes = classNames( 'wp-social-link', 'wp-social-link-' + service, {
 		'wp-social-link__is-incomplete': ! url,
+		[ `has-${ iconColor }-color` ]: iconColor,
+		[ `has-${ iconBackgroundColor }-background-color` ]:
+			iconBackgroundColor,
 	} );
 
 	// Use internal state instead of a ref to make sure that the component

package/src/social-link/index.php

@@ -47,7 +47,7 @@ function render_block_core_social_link( $attributes, $content, $block ) {
 	$icon               = block_core_social_link_get_icon( $service );
 	$wrapper_attributes = get_block_wrapper_attributes(
 		array(
-			'class' => 'wp-social-link wp-social-link-' . $service,
+			'class' => 'wp-social-link wp-social-link-' . $service . block_core_social_link_get_color_classes( $block->context ),
 			'style' => block_core_social_link_get_color_styles( $block->context ),
 		)
 	);
@@ -337,3 +337,24 @@ function block_core_social_link_get_color_styles( $context ) {
 
 	return implode( '', $styles );
 }
+
+/**
+ * Returns CSS classes for icon and icon background colors.
+ *
+ * @param array $context Block context passed to Social Sharing Link.
+ *
+ * @return string CSS classes for link's icon and background colors.
+ */
+function block_core_social_link_get_color_classes( $context ) {
+	$classes = array();
+
+	if ( array_key_exists( 'iconColor', $context ) ) {
+		$classes[] = 'has-' . $context['iconColor'] . '-color';
+	}
+
+	if ( array_key_exists( 'iconBackgroundColor', $context ) ) {
+		$classes[] = 'has-' . $context['iconBackgroundColor'] . '-background-color';
+	}
+
+	return ' ' . implode( ' ', $classes );
+}

package/src/social-links/block.json

@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "core/social-links",
 	"title": "Social Icons",
 	"category": "widgets",
@@ -41,14 +41,16 @@
 	"providesContext": {
 		"openInNewTab": "openInNewTab",
 		"showLabels": "showLabels",
+		"iconColor": "iconColor",
 		"iconColorValue": "iconColorValue",
+		"iconBackgroundColor": "iconBackgroundColor",
 		"iconBackgroundColorValue": "iconBackgroundColorValue"
 	},
 	"supports": {
 		"align": [ "left", "center", "right" ],
 		"anchor": true,
 		"__experimentalExposeControlsToChildren": true,
-		"__experimentalLayout": {
+		"layout": {
 			"allowSwitching": false,
 			"allowInheriting": false,
 			"allowVerticalAlignment": false,

package/src/social-links/style.scss

@@ -142,3 +142,13 @@
 		padding-right: calc((2/3) * 1em);
 	}
 }
+
+// Ensure the Snapchat label is visible when no custom
+// icon color or background color is set.
+.wp-block-social-links:not(.has-icon-color):not(.has-icon-background-color) {
+	.wp-social-link-snapchat {
+		.wp-block-social-link-label {
+			color: #000;
+		}
+	}
+}

package/src/spacer/block.json

@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "core/spacer",
 	"title": "Spacer",
 	"category": "design",

package/src/spacer/controls.js

@@ -81,6 +81,7 @@ function DimensionInput( { label, onChange, isResizing, value = '' } ) {
 						units={ units }
 						allowReset={ false }
 						splitOnAxis={ false }
+						showSideInLabel={ false }
 					/>
 				</View>
 			) }

package/src/spacer/save.js

@@ -3,12 +3,17 @@
  */
 import { useBlockProps, getSpacingPresetCssVar } from '@wordpress/block-editor';
 
-export default function save( { attributes: { height, width } } ) {
+export default function save( { attributes } ) {
+	const { height, width, style } = attributes;
+	const { layout: { selfStretch } = {} } = style || {};
+	// If selfStretch is set to 'fill' or 'fit', don't set default height.
+	const finalHeight =
+		selfStretch === 'fill' || selfStretch === 'fit' ? undefined : height;
 	return (
 		<div
 			{ ...useBlockProps.save( {
 				style: {
-					height: getSpacingPresetCssVar( height ),
+					height: getSpacingPresetCssVar( finalHeight ),
 					width: getSpacingPresetCssVar( width ),
 				},
 				'aria-hidden': true,

package/src/spacer/test/index.native.js

@@ -5,7 +5,7 @@ import {
 	fireEvent,
 	getEditorHtml,
 	initializeEditor,
-	waitFor,
+	waitForModalVisible,
 } from 'test/helpers';
 
 /**
@@ -65,13 +65,14 @@ describe( 'Spacer block', () => {
 
 		// Open block settings
 		fireEvent.press( screen.getByLabelText( 'Open Settings' ) );
-		await waitFor(
-			() => screen.getByTestId( 'block-settings-modal' ).props.isVisible
-		);
+		const blockSettingsModal = screen.getByTestId( 'block-settings-modal' );
+		await waitForModalVisible( blockSettingsModal );
 
 		// Update height attribute
-		fireEvent.press( screen.getByText( '100' ) );
-		const heightTextInput = screen.getByDisplayValue( '100' );
+		fireEvent.press( screen.getByText( '100', { hidden: true } ) );
+		const heightTextInput = screen.getByDisplayValue( '100', {
+			hidden: true,
+		} );
 		fireEvent.changeText( heightTextInput, '50' );
 
 		expect( getEditorHtml() ).toMatchSnapshot();
@@ -92,17 +93,20 @@ describe( 'Spacer block', () => {
 
 		// Open block settings
 		fireEvent.press( screen.getByLabelText( 'Open Settings' ) );
-		await waitFor(
-			() => screen.getByTestId( 'block-settings-modal' ).props.isVisible
-		);
+		const blockSettingsModal = screen.getByTestId( 'block-settings-modal' );
+		await waitForModalVisible( blockSettingsModal );
 
 		// Set vh unit
-		fireEvent.press( screen.getByText( 'px' ) );
-		fireEvent.press( screen.getByText( 'Viewport height (vh)' ) );
+		fireEvent.press( screen.getByText( 'px', { hidden: true } ) );
+		fireEvent.press(
+			screen.getByText( 'Viewport height (vh)', { hidden: true } )
+		);
 
 		// Update height attribute
-		fireEvent.press( screen.getByText( '100' ) );
-		const heightTextInput = screen.getByDisplayValue( '100' );
+		fireEvent.press( screen.getByText( '100', { hidden: true } ) );
+		const heightTextInput = screen.getByDisplayValue( '100', {
+			hidden: true,
+		} );
 		fireEvent.changeText( heightTextInput, '25' );
 
 		expect( getEditorHtml() ).toMatchSnapshot();
@@ -123,9 +127,8 @@ describe( 'Spacer block', () => {
 
 		// Open block settings
 		fireEvent.press( screen.getByLabelText( 'Open Settings' ) );
-		await waitFor(
-			() => screen.getByTestId( 'block-settings-modal' ).props.isVisible
-		);
+		const blockSettingsModal = screen.getByTestId( 'block-settings-modal' );
+		await waitForModalVisible( blockSettingsModal );
 
 		// Increment height
 		fireEvent(
@@ -154,9 +157,8 @@ describe( 'Spacer block', () => {
 
 		// Open block settings
 		fireEvent.press( screen.getByLabelText( 'Open Settings' ) );
-		await waitFor(
-			() => screen.getByTestId( 'block-settings-modal' ).props.isVisible
-		);
+		const blockSettingsModal = screen.getByTestId( 'block-settings-modal' );
+		await waitForModalVisible( blockSettingsModal );
 
 		// Increment height
 		fireEvent(
@@ -212,13 +214,14 @@ describe( 'Spacer block', () => {
 
 		// Open block settings
 		fireEvent.press( screen.getByLabelText( 'Open Settings' ) );
-		await waitFor(
-			() => screen.getByTestId( 'block-settings-modal' ).props.isVisible
-		);
+		const blockSettingsModal = screen.getByTestId( 'block-settings-modal' );
+		await waitForModalVisible( blockSettingsModal );
 
 		// Update height attribute
-		fireEvent.press( screen.getByText( '60' ) );
-		const heightTextInput = screen.getByDisplayValue( '60' );
+		fireEvent.press( screen.getByText( '60', { hidden: true } ) );
+		const heightTextInput = screen.getByDisplayValue( '60', {
+			hidden: true,
+		} );
 		fireEvent.changeText( heightTextInput, '70' );
 
 		expect( getEditorHtml() ).toMatchSnapshot();
@@ -239,13 +242,14 @@ describe( 'Spacer block', () => {
 
 		// Open block settings
 		fireEvent.press( screen.getByLabelText( 'Open Settings' ) );
-		await waitFor(
-			() => screen.getByTestId( 'block-settings-modal' ).props.isVisible
-		);
+		const blockSettingsModal = screen.getByTestId( 'block-settings-modal' );
+		await waitForModalVisible( blockSettingsModal );
 
 		// Update height attribute
-		fireEvent.press( screen.getByText( '100' ) );
-		const heightTextInput = screen.getByDisplayValue( '100' );
+		fireEvent.press( screen.getByText( '100', { hidden: true } ) );
+		const heightTextInput = screen.getByDisplayValue( '100', {
+			hidden: true,
+		} );
 		fireEvent.changeText( heightTextInput, '120' );
 
 		expect( getEditorHtml() ).toMatchSnapshot();

package/src/style.scss

@@ -51,8 +51,10 @@
 @import "./spacer/style.scss";
 @import "./tag-cloud/style.scss";
 @import "./table/style.scss";
+@import "./term-description/style.scss";
 @import "./text-columns/style.scss";
 @import "./verse/style.scss";
 @import "./video/style.scss";
+@import "./footnotes/style.scss";
 
 @import "common.scss";

package/src/table/block.json

@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "core/table",
 	"title": "Table",
 	"category": "text",

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

@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"__experimental": true,
 	"name": "core/table-of-contents",
 	"title": "Table of Contents",

package/src/tag-cloud/block.json

@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "core/tag-cloud",
 	"title": "Tag Cloud",
 	"category": "widgets",
@@ -36,7 +36,6 @@
 	],
 	"supports": {
 		"html": false,
-		"anchor": true,
 		"align": true,
 		"spacing": {
 			"margin": true,

package/src/template-part/block.json

@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "core/template-part",
 	"title": "Template Part",
 	"category": "theme",
@@ -21,7 +21,6 @@
 		}
 	},
 	"supports": {
-		"anchor": true,
 		"align": true,
 		"html": false,
 		"reusable": false

package/src/template-part/edit/inner-blocks.js

@@ -37,7 +37,7 @@ export default function TemplatePartInnerBlocks( {
 		renderAppender: hasInnerBlocks
 			? undefined
 			: InnerBlocks.ButtonBlockAppender,
-		__experimentalLayout: themeSupportsLayout ? usedLayout : undefined,
+		layout: themeSupportsLayout ? usedLayout : undefined,
 	} );
 
 	return <TagName { ...innerBlocksProps } />;

package/src/template-part/index.php

@@ -18,11 +18,12 @@ function render_block_core_template_part( $attributes ) {
 	$template_part_id = null;
 	$content          = null;
 	$area             = WP_TEMPLATE_PART_AREA_UNCATEGORIZED;
+	$stylesheet       = get_stylesheet();
 
 	if (
 		isset( $attributes['slug'] ) &&
 		isset( $attributes['theme'] ) &&
-		get_stylesheet() === $attributes['theme']
+		$stylesheet === $attributes['theme']
 	) {
 		$template_part_id    = $attributes['theme'] . '//' . $attributes['slug'];
 		$template_part_query = new WP_Query(
@@ -65,16 +66,22 @@ function render_block_core_template_part( $attributes ) {
 		} else {
 			// Else, if the template part was provided by the active theme,
 			// render the corresponding file content.
-			$parent_theme_folders        = get_block_theme_folders( get_template() );
-			$child_theme_folders         = get_block_theme_folders( get_stylesheet() );
-			$child_theme_part_file_path  = get_theme_file_path( '/' . $child_theme_folders['wp_template_part'] . '/' . $attributes['slug'] . '.html' );
-			$parent_theme_part_file_path = get_theme_file_path( '/' . $parent_theme_folders['wp_template_part'] . '/' . $attributes['slug'] . '.html' );
-			$template_part_file_path     = 0 === validate_file( $attributes['slug'] ) && file_exists( $child_theme_part_file_path ) ? $child_theme_part_file_path : $parent_theme_part_file_path;
-			if ( 0 === validate_file( $attributes['slug'] ) && file_exists( $template_part_file_path ) ) {
-				$content = file_get_contents( $template_part_file_path );
-				$content = is_string( $content ) && '' !== $content
-						? _inject_theme_attribute_in_block_template_content( $content )
-						: '';
+			if ( 0 === validate_file( $attributes['slug'] ) ) {
+				$themes   = array( $stylesheet );
+				$template = get_template();
+				if ( $stylesheet !== $template ) {
+					$themes[] = $template;
+				}
+
+				foreach ( $themes as $theme ) {
+					$theme_folders           = get_block_theme_folders( $theme );
+					$template_part_file_path = get_theme_file_path( '/' . $theme_folders['wp_template_part'] . '/' . $attributes['slug'] . '.html' );
+					if ( file_exists( $template_part_file_path ) ) {
+						$content = (string) file_get_contents( $template_part_file_path );
+						$content = '' !== $content ? _inject_theme_attribute_in_block_template_content( $content ) : '';
+						break;
+					}
+				}
 			}
 
 			if ( '' !== $content && null !== $content ) {

package/src/term-description/block.json

@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "core/term-description",
 	"title": "Term Description",
 	"category": "theme",
@@ -12,7 +12,6 @@
 		}
 	},
 	"supports": {
-		"anchor": true,
 		"align": [ "wide", "full" ],
 		"html": false,
 		"color": {

package/src/term-description/style.scss

@@ -0,0 +1,11 @@
+// Lowest specificity on wrapper margins to avoid overriding layout styles.
+:where(.wp-block-term-description) {
+	margin-top: var(--wp--style--block-gap);
+	margin-bottom: var(--wp--style--block-gap);
+}
+
+// Zero out the margin on the description paragraph.
+.wp-block-term-description p {
+	margin-top: 0;
+	margin-bottom: 0;
+}

package/src/text-columns/block.json

@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "core/text-columns",
 	"title": "Text Columns (deprecated)",
 	"icon": "columns",

package/src/utils/interactivity/constants.js

@@ -1 +1 @@
-export const directivePrefix = 'data-wp-';
+export const directivePrefix = 'wp';

package/src/utils/interactivity/directives.js

@@ -67,7 +67,7 @@ export default () => {
 		);
 	} );
 
-	// data-wp-effect.[name]
+	// data-wp-effect--[name]
 	directive( 'effect', ( { directives: { effect }, context, evaluate } ) => {
 		const contextValue = useContext( context );
 		Object.values( effect ).forEach( ( path ) => {
@@ -77,7 +77,7 @@ export default () => {
 		} );
 	} );
 
-	// data-wp-init.[name]
+	// data-wp-init--[name]
 	directive( 'init', ( { directives: { init }, context, evaluate } ) => {
 		const contextValue = useContext( context );
 		Object.values( init ).forEach( ( path ) => {
@@ -87,7 +87,7 @@ export default () => {
 		} );
 	} );
 
-	// data-wp-on.[event]
+	// data-wp-on--[event]
 	directive( 'on', ( { directives: { on }, element, evaluate, context } ) => {
 		const contextValue = useContext( context );
 		Object.entries( on ).forEach( ( [ name, path ] ) => {
@@ -97,7 +97,7 @@ export default () => {
 		} );
 	} );
 
-	// data-wp-class.[classname]
+	// data-wp-class--[classname]
 	directive(
 		'class',
 		( {
@@ -142,7 +142,7 @@ export default () => {
 		}
 	);
 
-	// data-wp-bind.[attribute]
+	// data-wp-bind--[attribute]
 	directive(
 		'bind',
 		( { directives: { bind }, element, context, evaluate } ) => {

package/src/utils/interactivity/hydration.js

@@ -11,7 +11,7 @@ import { directivePrefix } from './constants';
 
 export const init = async () => {
 	document
-		.querySelectorAll( `[${ directivePrefix }island]` )
+		.querySelectorAll( `[data-${ directivePrefix }-interactive]` )
 		.forEach( ( node ) => {
 			if ( ! hydratedIslands.has( node ) ) {
 				const fragment = createRootFragment( node.parentNode, node );

package/src/utils/interactivity/index.js

@@ -12,6 +12,4 @@ registerDirectives();
 
 document.addEventListener( 'DOMContentLoaded', async () => {
 	await init();
-	// eslint-disable-next-line no-console
-	console.log( 'Interactivity API started' );
 } );

package/src/utils/interactivity/vdom.js

@@ -7,9 +7,23 @@ import { h } from 'preact';
  */
 import { directivePrefix as p } from './constants';
 
-const ignoreAttr = `${ p }ignore`;
-const islandAttr = `${ p }island`;
-const directiveParser = new RegExp( `${ p }([^.]+)\.?(.*)$` );
+const ignoreAttr = `data-${ p }-ignore`;
+const islandAttr = `data-${ p }-interactive`;
+const fullPrefix = `data-${ p }-`;
+
+// Regular expression for directive parsing.
+const directiveParser = new RegExp(
+	`^data-${ p }-` + // ${p} must be a prefix string, like 'wp'.
+		// Match alphanumeric characters including hyphen-separated
+		// segments. It excludes underscore intentionally to prevent confusion.
+		// E.g., "custom-directive".
+		'([a-z0-9]+(?:-[a-z0-9]+)*)' +
+		// (Optional) Match '--' followed by any alphanumeric charachters. It
+		// excludes underscore intentionally to prevent confusion, but it can
+		// contain multiple hyphens. E.g., "--custom-prefix--with-more-info".
+		'(?:--([a-z0-9][a-z0-9-]+))?$',
+	'i' // Case insensitive.
+);
 
 export const hydratedIslands = new WeakSet();
 
@@ -44,7 +58,10 @@ export function toVdom( root ) {
 
 		for ( let i = 0; i < attributes.length; i++ ) {
 			const n = attributes[ i ].name;
-			if ( n[ p.length ] && n.slice( 0, p.length ) === p ) {
+			if (
+				n[ fullPrefix.length ] &&
+				n.slice( 0, fullPrefix.length ) === fullPrefix
+			) {
 				if ( n === ignoreAttr ) {
 					ignore = true;
 				} else if ( n === islandAttr ) {

package/src/utils/migrate-font-family.js

@@ -6,7 +6,7 @@ import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 /**
  * Internal dependencies
  */
-import { unlock } from '../private-apis';
+import { unlock } from '../lock-unlock';
 
 const { cleanEmptyObject } = unlock( blockEditorPrivateApis );
 

package/src/verse/block.json

@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "core/verse",
 	"title": "Verse",
 	"category": "text",

package/src/video/block.json

@@ -1,6 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
-	"apiVersion": 2,
+	"apiVersion": 3,
 	"name": "core/video",
 	"title": "Video",
 	"category": "media",