@wordpress/block-library 8.27.2 → 8.28.1

package/src/search/index.php

@@ -47,7 +47,7 @@ function render_block_core_search( $attributes ) {
 	$border_color_classes = get_border_color_classes_for_block_core_search( $attributes );
 	// This variable is a constant and its value is always false at this moment.
 	// It is defined this way because some values depend on it, in case it changes in the future.
-	$open_by_default = 'false';
+	$open_by_default = false;
 
 	$label_inner_html = empty( $attributes['label'] ) ? __( 'Search' ) : wp_kses_post( $attributes['label'] );
 	$label            = new WP_HTML_Tag_Processor( sprintf( '<label %1$s>%2$s</label>', $inline_styles['label'], $label_inner_html ) );
@@ -80,6 +80,17 @@ function render_block_core_search( $attributes ) {
 		// If it's interactive, enqueue the script module and add the directives.
 		$is_expandable_searchfield = 'button-only' === $button_position;
 		if ( $is_expandable_searchfield ) {
+			$suffix = wp_scripts_get_suffix();
+			if ( defined( 'IS_GUTENBERG_PLUGIN' ) && IS_GUTENBERG_PLUGIN ) {
+				$module_url = gutenberg_url( '/build/interactivity/search.min.js' );
+			}
+
+			wp_register_script_module(
+				'@wordpress/block-library/search',
+				isset( $module_url ) ? $module_url : includes_url( "blocks/search/view{$suffix}.js" ),
+				array( '@wordpress/interactivity' ),
+				defined( 'GUTENBERG_VERSION' ) ? GUTENBERG_VERSION : get_bloginfo( 'version' )
+			);
 			wp_enqueue_script_module( '@wordpress/block-library/search' );
 
 			$input->set_attribute( 'data-wp-bind--aria-hidden', '!context.isSearchInputVisible' );
@@ -168,12 +179,20 @@ function render_block_core_search( $attributes ) {
 	if ( $is_expandable_searchfield ) {
 		$aria_label_expanded  = __( 'Submit Search' );
 		$aria_label_collapsed = __( 'Expand search field' );
+		$form_context         = data_wp_context(
+			array(
+				'isSearchInputVisible' => $open_by_default,
+				'inputId'              => $input_id,
+				'ariaLabelExpanded'    => $aria_label_expanded,
+				'ariaLabelCollapsed'   => $aria_label_collapsed,
+			)
+		);
 		$form_directives      = '
-			data-wp-interactive=\'{ "namespace": "core/search" }\'
-			data-wp-context=\'{ "isSearchInputVisible": ' . $open_by_default . ', "inputId": "' . $input_id . '", "ariaLabelExpanded": "' . $aria_label_expanded . '", "ariaLabelCollapsed": "' . $aria_label_collapsed . '" }\'
-			data-wp-class--wp-block-search__searchfield-hidden="!context.isSearchInputVisible"
-			data-wp-on--keydown="actions.handleSearchKeydown"
-			data-wp-on--focusout="actions.handleSearchFocusout"
+		 data-wp-interactive=\'"core/search"\''
+		. $form_context .
+		'data-wp-class--wp-block-search__searchfield-hidden="!context.isSearchInputVisible"
+		 data-wp-on--keydown="actions.handleSearchKeydown"
+		 data-wp-on--focusout="actions.handleSearchFocusout"
 		';
 	}
 
@@ -196,13 +215,6 @@ function register_block_core_search() {
 			'render_callback' => 'render_block_core_search',
 		)
 	);
-
-	wp_register_script_module(
-		'@wordpress/block-library/search',
-		defined( 'IS_GUTENBERG_PLUGIN' ) && IS_GUTENBERG_PLUGIN ? gutenberg_url( '/build/interactivity/search.min.js' ) : includes_url( 'blocks/search/view.min.js' ),
-		array( '@wordpress/interactivity' ),
-		defined( 'GUTENBERG_VERSION' ) ? GUTENBERG_VERSION : get_bloginfo( 'version' )
-	);
 }
 add_action( 'init', 'register_block_core_search' );
 

package/src/search/view.js

@@ -3,66 +3,70 @@
  */
 import { store, getContext, getElement } from '@wordpress/interactivity';
 
-const { actions } = store( 'core/search', {
-	state: {
-		get ariaLabel() {
-			const {
-				isSearchInputVisible,
-				ariaLabelCollapsed,
-				ariaLabelExpanded,
-			} = getContext();
-			return isSearchInputVisible
-				? ariaLabelExpanded
-				: ariaLabelCollapsed;
+const { actions } = store(
+	'core/search',
+	{
+		state: {
+			get ariaLabel() {
+				const {
+					isSearchInputVisible,
+					ariaLabelCollapsed,
+					ariaLabelExpanded,
+				} = getContext();
+				return isSearchInputVisible
+					? ariaLabelExpanded
+					: ariaLabelCollapsed;
+			},
+			get ariaControls() {
+				const { isSearchInputVisible, inputId } = getContext();
+				return isSearchInputVisible ? null : inputId;
+			},
+			get type() {
+				const { isSearchInputVisible } = getContext();
+				return isSearchInputVisible ? 'submit' : 'button';
+			},
+			get tabindex() {
+				const { isSearchInputVisible } = getContext();
+				return isSearchInputVisible ? '0' : '-1';
+			},
 		},
-		get ariaControls() {
-			const { isSearchInputVisible, inputId } = getContext();
-			return isSearchInputVisible ? null : inputId;
-		},
-		get type() {
-			const { isSearchInputVisible } = getContext();
-			return isSearchInputVisible ? 'submit' : 'button';
-		},
-		get tabindex() {
-			const { isSearchInputVisible } = getContext();
-			return isSearchInputVisible ? '0' : '-1';
-		},
-	},
-	actions: {
-		openSearchInput( event ) {
-			const ctx = getContext();
-			const { ref } = getElement();
-			if ( ! ctx.isSearchInputVisible ) {
-				event.preventDefault();
-				ctx.isSearchInputVisible = true;
-				ref.parentElement.querySelector( 'input' ).focus();
-			}
-		},
-		closeSearchInput() {
-			const ctx = getContext();
-			ctx.isSearchInputVisible = false;
-		},
-		handleSearchKeydown( event ) {
-			const { ref } = getElement();
-			// If Escape close the menu.
-			if ( event?.key === 'Escape' ) {
-				actions.closeSearchInput();
-				ref.querySelector( 'button' ).focus();
-			}
-		},
-		handleSearchFocusout( event ) {
-			const { ref } = getElement();
-			// If focus is outside search form, and in the document, close menu
-			// event.target === The element losing focus
-			// event.relatedTarget === The element receiving focus (if any)
-			// When focusout is outside the document,
-			// `window.document.activeElement` doesn't change.
-			if (
-				! ref.contains( event.relatedTarget ) &&
-				event.target !== window.document.activeElement
-			) {
-				actions.closeSearchInput();
-			}
+		actions: {
+			openSearchInput( event ) {
+				const ctx = getContext();
+				const { ref } = getElement();
+				if ( ! ctx.isSearchInputVisible ) {
+					event.preventDefault();
+					ctx.isSearchInputVisible = true;
+					ref.parentElement.querySelector( 'input' ).focus();
+				}
+			},
+			closeSearchInput() {
+				const ctx = getContext();
+				ctx.isSearchInputVisible = false;
+			},
+			handleSearchKeydown( event ) {
+				const { ref } = getElement();
+				// If Escape close the menu.
+				if ( event?.key === 'Escape' ) {
+					actions.closeSearchInput();
+					ref.querySelector( 'button' ).focus();
+				}
+			},
+			handleSearchFocusout( event ) {
+				const { ref } = getElement();
+				// If focus is outside search form, and in the document, close menu
+				// event.target === The element losing focus
+				// event.relatedTarget === The element receiving focus (if any)
+				// When focusout is outside the document,
+				// `window.document.activeElement` doesn't change.
+				if (
+					! ref.contains( event.relatedTarget ) &&
+					event.target !== window.document.activeElement
+				) {
+					actions.closeSearchInput();
+				}
+			},
 		},
 	},
-} );
+	{ lock: true }
+);

package/src/separator/block.json

@@ -28,6 +28,9 @@
 		},
 		"spacing": {
 			"margin": [ "top", "bottom" ]
+		},
+		"interactivity": {
+			"clientNavigation": true
 		}
 	},
 	"styles": [

package/src/separator/style.scss

@@ -1,11 +1,11 @@
 .wp-block-separator {
-	border-top: 1px solid currentColor;
-	border-bottom: 1px solid currentColor;
+	border-top: 2px solid currentColor;
 	// Default, thin style, is stored in theme.scss so it can be opted out of
 
-	// Unset the left and right borders by default, otherwise some browsers will render them as "inset".
+	// Unset the left, right and bottom borders by default, otherwise some browsers will render them as "inset".
 	border-left: none;
 	border-right: none;
+	border-bottom: none;
 
 	// Dots style
 	&.is-style-dots {

package/src/site-logo/block.json

@@ -45,6 +45,9 @@
 				"margin": false,
 				"padding": false
 			}
+		},
+		"interactivity": {
+			"clientNavigation": true
 		}
 	},
 	"styles": [

package/src/site-tagline/block.json

@@ -43,6 +43,9 @@
 			"__experimentalDefaultControls": {
 				"fontSize": true
 			}
+		},
+		"interactivity": {
+			"clientNavigation": true
 		}
 	},
 	"editorStyle": "wp-block-site-tagline-editor"

package/src/site-title/block.json

@@ -58,6 +58,9 @@
 			"__experimentalDefaultControls": {
 				"fontSize": true
 			}
+		},
+		"interactivity": {
+			"clientNavigation": true
 		}
 	},
 	"editorStyle": "wp-block-site-title-editor",

package/src/social-link/block.json

@@ -31,7 +31,10 @@
 	],
 	"supports": {
 		"reusable": false,
-		"html": false
+		"html": false,
+		"interactivity": {
+			"clientNavigation": true
+		}
 	},
 	"editorStyle": "wp-block-social-link-editor"
 }

package/src/social-link/icons/patreon.js

@@ -1,11 +1,10 @@
 /**
  * WordPress dependencies
  */
-import { Circle, Rect, SVG } from '@wordpress/primitives';
+import { Path, SVG } from '@wordpress/primitives';
 
 export const PatreonIcon = () => (
-	<SVG width="24" height="24" viewBox="0 0 569 546" version="1.1">
-		<Circle cx="363" cy="205" r="205" />
-		<Rect width="100" height="546" x="0" y="0" />
+	<SVG width="24" height="24" viewBox="0 0 24 24" version="1.1">
+		<Path d="M20 8.40755C19.9969 6.10922 18.2543 4.22555 16.2097 3.54588C13.6708 2.70188 10.3222 2.82421 7.89775 3.99921C4.95932 5.42355 4.03626 8.54355 4.00186 11.6552C3.97363 14.2136 4.2222 20.9517 7.92225 20.9997C10.6715 21.0356 11.0809 17.3967 12.3529 15.6442C13.258 14.3974 14.4233 14.0452 15.8578 13.6806C18.3233 13.0537 20.0036 11.0551 20 8.40755Z" />
 	</SVG>
 );

package/src/social-link/index.php

@@ -228,7 +228,7 @@ function block_core_social_link_services( $service = '', $field = '' ) {
 		),
 		'patreon'       => array(
 			'name' => 'Patreon',
-			'icon' => '<svg width="24" height="24" viewBox="0 0 569 546" version="1.1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false"><circle cx="363" cy="205" r="205" /><rect width="100" height="546" x="0" y="0" /></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="M20 8.40755C19.9969 6.10922 18.2543 4.22555 16.2097 3.54588C13.6708 2.70188 10.3222 2.82421 7.89775 3.99921C4.95932 5.42355 4.03626 8.54355 4.00186 11.6552C3.97363 14.2136 4.2222 20.9517 7.92225 20.9997C10.6715 21.0356 11.0809 17.3967 12.3529 15.6442C13.258 14.3974 14.4233 14.0452 15.8578 13.6806C18.3233 13.0537 20.0036 11.0551 20 8.40755Z" /></svg>',
 		),
 		'pinterest'     => array(
 			'name' => 'Pinterest',

package/src/social-link/socials-with-bg.scss

@@ -114,7 +114,7 @@
 }
 
 .wp-social-link-patreon {
-	background-color: #ff424d;
+	background-color: #000;
 	color: #fff;
 }
 

package/src/social-link/socials-without-bg.scss

@@ -87,7 +87,7 @@
 }
 
 .wp-social-link-patreon {
-	color: #ff424d;
+	color: #000;
 }
 
 .wp-social-link-pinterest {

package/src/social-links/block.json

@@ -4,6 +4,7 @@
 	"name": "core/social-links",
 	"title": "Social Icons",
 	"category": "widgets",
+	"allowedBlocks": [ "core/social-link" ],
 	"description": "Display icons linking to your social media profiles or sites.",
 	"keywords": [ "links" ],
 	"textdomain": "default",
@@ -77,6 +78,9 @@
 				"margin": true,
 				"padding": false
 			}
+		},
+		"interactivity": {
+			"clientNavigation": true
 		}
 	},
 	"styles": [

package/src/social-links/edit.js

@@ -27,8 +27,6 @@ import {
 import { __ } from '@wordpress/i18n';
 import { check } from '@wordpress/icons';
 
-const ALLOWED_BLOCKS = [ 'core/social-link' ];
-
 const sizeOptions = [
 	{ name: __( 'Small' ), value: 'has-small-icon-size' },
 	{ name: __( 'Normal' ), value: 'has-normal-icon-size' },
@@ -106,7 +104,6 @@ export function SocialLinksEdit( props ) {
 
 	const blockProps = useBlockProps( { className } );
 	const innerBlocksProps = useInnerBlocksProps( blockProps, {
-		allowedBlocks: ALLOWED_BLOCKS,
 		placeholder: isSelected ? SelectedSocialPlaceholder : SocialPlaceholder,
 		templateLock: false,
 		orientation: attributes.layout?.orientation ?? 'horizontal',

package/src/social-links/edit.native.js

@@ -17,11 +17,6 @@ import { compose, usePreferredColorSchemeStyle } from '@wordpress/compose';
  * Internal dependencies
  */
 import styles from './editor.scss';
-import variations from '../social-link/variations';
-
-const ALLOWED_BLOCKS = variations.map(
-	( v ) => `core/social-link-${ v.name }`
-);
 
 // Template contains the links that show when start.
 const TEMPLATE = [
@@ -95,7 +90,6 @@ function SocialLinksEdit( {
 
 	return (
 		<InnerBlocks
-			allowedBlocks={ ALLOWED_BLOCKS }
 			templateLock={ false }
 			template={ initialCreation && TEMPLATE }
 			renderFooterAppender={

package/src/spacer/block.json

@@ -23,6 +23,9 @@
 			"__experimentalDefaultControls": {
 				"margin": true
 			}
+		},
+		"interactivity": {
+			"clientNavigation": true
 		}
 	},
 	"editorStyle": "wp-block-spacer-editor",

package/src/spacer/edit.js

@@ -93,9 +93,14 @@ const SpacerEdit = ( {
 		return editorSettings?.disableCustomSpacingSizes;
 	} );
 	const { orientation } = context;
-	const { orientation: parentOrientation, type } = parentLayout || {};
+	const {
+		orientation: parentOrientation,
+		type,
+		default: { type: defaultType } = {},
+	} = parentLayout || {};
 	// Check if the spacer is inside a flex container.
-	const isFlexLayout = type === 'flex';
+	const isFlexLayout =
+		type === 'flex' || ( ! type && defaultType === 'flex' );
 	// If the spacer is inside a flex container, it should either inherit the orientation
 	// of the parent or use the flex default orientation.
 	const inheritedOrientation =

package/src/spacer/editor.scss

@@ -42,5 +42,7 @@
 
 	&.resize-horizontal {
 		margin-bottom: 0;
+		// Important is used to have higher specificity than the inline style set by re-resizable library.
+		height: 100% !important;
 	}
 }

package/src/table/block.json

@@ -195,7 +195,10 @@
 				"width": true
 			}
 		},
-		"__experimentalSelector": ".wp-block-table > table"
+		"__experimentalSelector": ".wp-block-table > table",
+		"interactivity": {
+			"clientNavigation": true
+		}
 	},
 	"styles": [
 		{

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

@@ -45,6 +45,9 @@
 			"__experimentalDefaultControls": {
 				"fontSize": true
 			}
+		},
+		"interactivity": {
+			"clientNavigation": true
 		}
 	},
 	"example": {}

package/src/tag-cloud/block.json

@@ -48,6 +48,9 @@
 			"__experimentalFontStyle": true,
 			"__experimentalTextTransform": true,
 			"__experimentalLetterSpacing": true
+		},
+		"interactivity": {
+			"clientNavigation": true
 		}
 	},
 	"editorStyle": "wp-block-tag-cloud-editor"

package/src/template-part/block.json

@@ -24,7 +24,10 @@
 		"align": true,
 		"html": false,
 		"reusable": false,
-		"renaming": false
+		"renaming": false,
+		"interactivity": {
+			"clientNavigation": true
+		}
 	},
 	"editorStyle": "wp-block-template-part-editor"
 }

package/src/template-part/edit/index.js

@@ -82,14 +82,11 @@ export default function TemplatePartEdit( {
 	const [ isTemplatePartSelectionOpen, setIsTemplatePartSelectionOpen ] =
 		useState( false );
 
-	// Set the postId block attribute if it did not exist,
-	// but wait until the inner blocks have loaded to allow
-	// new edits to trigger this.
-	const { isResolved, innerBlocks, isMissing, area } = useSelect(
+	const { isResolved, hasInnerBlocks, isMissing, area } = useSelect(
 		( select ) => {
 			const { getEditedEntityRecord, hasFinishedResolution } =
 				select( coreStore );
-			const { getBlocks } = select( blockEditorStore );
+			const { getBlockCount } = select( blockEditorStore );
 
 			const getEntityArgs = [
 				'postType',
@@ -108,7 +105,7 @@ export default function TemplatePartEdit( {
 				: false;
 
 			return {
-				innerBlocks: getBlocks( clientId ),
+				hasInnerBlocks: getBlockCount( clientId ) > 0,
 				isResolved: hasResolvedEntity,
 				isMissing:
 					hasResolvedEntity &&
@@ -129,7 +126,7 @@ export default function TemplatePartEdit( {
 	// We don't want to render a missing state if we have any inner blocks.
 	// A new template part is automatically created if we have any inner blocks but no entity.
 	if (
-		innerBlocks.length === 0 &&
+		! hasInnerBlocks &&
 		( ( slug && ! theme ) || ( slug && isMissing ) )
 	) {
 		return (
@@ -167,7 +164,7 @@ export default function TemplatePartEdit( {
 						isEntityAvailable={ isEntityAvailable }
 						templatePartId={ templatePartId }
 						defaultWrapper={ areaObject.tagName }
-						hasInnerBlocks={ innerBlocks.length > 0 }
+						hasInnerBlocks={ hasInnerBlocks }
 					/>
 				</InspectorControls>
 				{ isPlaceholder && (
@@ -215,7 +212,7 @@ export default function TemplatePartEdit( {
 						tagName={ TagName }
 						blockProps={ blockProps }
 						postId={ templatePartId }
-						hasInnerBlocks={ innerBlocks.length > 0 }
+						hasInnerBlocks={ hasInnerBlocks }
 						layout={ layout }
 					/>
 				) }

package/src/template-part/index.js

@@ -32,8 +32,9 @@ export const settings = {
 			return;
 		}
 
-		const { getCurrentTheme, getEntityRecord } = select( coreDataStore );
-		const entity = getEntityRecord(
+		const { getCurrentTheme, getEditedEntityRecord } =
+			select( coreDataStore );
+		const entity = getEditedEntityRecord(
 			'postType',
 			'wp_template_part',
 			( theme || getCurrentTheme()?.stylesheet ) + '//' + slug
@@ -43,8 +44,7 @@ export const settings = {
 		}
 
 		return (
-			decodeEntities( entity.title?.rendered ) ||
-			capitalCase( entity.slug )
+			decodeEntities( entity.title ) || capitalCase( entity.slug || '' )
 		);
 	},
 	edit,

package/src/template-part/index.php

@@ -109,16 +109,16 @@ function render_block_core_template_part( $attributes ) {
 	// is set in `wp_debug_mode()`.
 	$is_debug = WP_DEBUG && WP_DEBUG_DISPLAY;
 
-	if ( is_null( $content ) && $is_debug ) {
-		if ( ! isset( $attributes['slug'] ) ) {
-			// If there is no slug this is a placeholder and we dont want to return any message.
-			return;
+	if ( is_null( $content ) ) {
+		if ( $is_debug && isset( $attributes['slug'] ) ) {
+			return sprintf(
+				/* translators: %s: Template part slug. */
+				__( 'Template part has been deleted or is unavailable: %s' ),
+				$attributes['slug']
+			);
 		}
-		return sprintf(
-			/* translators: %s: Template part slug. */
-			__( 'Template part has been deleted or is unavailable: %s' ),
-			$attributes['slug']
-		);
+
+		return '';
 	}
 
 	if ( isset( $seen_ids[ $template_part_id ] ) ) {

package/src/term-description/block.json

@@ -37,6 +37,9 @@
 			"__experimentalDefaultControls": {
 				"fontSize": true
 			}
+		},
+		"interactivity": {
+			"clientNavigation": true
 		}
 	}
 }

package/src/text-columns/block.json

@@ -29,7 +29,10 @@
 		}
 	},
 	"supports": {
-		"inserter": false
+		"inserter": false,
+		"interactivity": {
+			"clientNavigation": true
+		}
 	},
 	"editorStyle": "wp-block-text-columns-editor",
 	"style": "wp-block-text-columns"

package/src/verse/block.json

@@ -55,6 +55,9 @@
 			"width": true,
 			"color": true,
 			"style": true
+		},
+		"interactivity": {
+			"clientNavigation": true
 		}
 	},
 	"style": "wp-block-verse",

package/src/video/block.json

@@ -88,6 +88,9 @@
 				"margin": false,
 				"padding": false
 			}
+		},
+		"interactivity": {
+			"clientNavigation": true
 		}
 	},
 	"editorStyle": "wp-block-video-editor",