@wordpress/block-library 8.22.0 → 8.24.0

package/src/search/view.js

@@ -1,73 +1,68 @@
 /**
  * WordPress dependencies
  */
-import { store as wpStore } from '@wordpress/interactivity';
+import { store, getContext, getElement } from '@wordpress/interactivity';
 
-wpStore( {
-	selectors: {
-		core: {
-			search: {
-				ariaLabel: ( { context } ) => {
-					const { ariaLabelCollapsed, ariaLabelExpanded } =
-						context.core.search;
-					return context.core.search.isSearchInputVisible
-						? ariaLabelExpanded
-						: ariaLabelCollapsed;
-				},
-				ariaControls: ( { context } ) => {
-					return context.core.search.isSearchInputVisible
-						? null
-						: context.core.search.inputId;
-				},
-				type: ( { context } ) => {
-					return context.core.search.isSearchInputVisible
-						? 'submit'
-						: 'button';
-				},
-				tabindex: ( { context } ) => {
-					return context.core.search.isSearchInputVisible
-						? '0'
-						: '-1';
-				},
-			},
+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';
 		},
 	},
 	actions: {
-		core: {
-			search: {
-				openSearchInput: ( { context, event, ref } ) => {
-					if ( ! context.core.search.isSearchInputVisible ) {
-						event.preventDefault();
-						context.core.search.isSearchInputVisible = true;
-						ref.parentElement.querySelector( 'input' ).focus();
-					}
-				},
-				closeSearchInput: ( { context } ) => {
-					context.core.search.isSearchInputVisible = false;
-				},
-				handleSearchKeydown: ( store ) => {
-					const { actions, event, ref } = store;
-					// If Escape close the menu.
-					if ( event?.key === 'Escape' ) {
-						actions.core.search.closeSearchInput( store );
-						ref.querySelector( 'button' ).focus();
-					}
-				},
-				handleSearchFocusout: ( store ) => {
-					const { actions, event, ref } = store;
-					// 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.core.search.closeSearchInput( store );
-					}
-				},
-			},
+		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();
+			}
 		},
 	},
 } );

package/src/template-part/edit/advanced-controls.js

@@ -95,6 +95,7 @@ export function TemplatePartAdvancedControls( {
 			) }
 			<SelectControl
 				__nextHasNoMarginBottom
+				__next40pxDefaultSize
 				label={ __( 'HTML element' ) }
 				options={ [
 					{

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

@@ -4,7 +4,6 @@
 import { useSelect } from '@wordpress/data';
 import {
 	BlockSettingsMenuControls,
-	BlockTitle,
 	useBlockProps,
 	Warning,
 	store as blockEditorStore,
@@ -14,7 +13,7 @@ import {
 import { Spinner, Modal, MenuItem } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
 import { store as coreStore } from '@wordpress/core-data';
-import { useState, createInterpolateElement } from '@wordpress/element';
+import { useState } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -35,7 +34,11 @@ export default function TemplatePartEdit( {
 	setAttributes,
 	clientId,
 } ) {
-	const { slug, theme, tagName, layout = {} } = attributes;
+	const currentTheme = useSelect(
+		( select ) => select( coreStore ).getCurrentTheme()?.stylesheet,
+		[]
+	);
+	const { slug, theme = currentTheme, tagName, layout = {} } = attributes;
 	const templatePartId = createTemplatePartId( theme, slug );
 	const hasAlreadyRendered = useHasRecursion( templatePartId );
 	const [ isTemplatePartSelectionOpen, setIsTemplatePartSelectionOpen ] =
@@ -174,17 +177,7 @@ export default function TemplatePartEdit( {
 									}
 									aria-haspopup="dialog"
 								>
-									{ createInterpolateElement(
-										__( 'Replace <BlockTitle />' ),
-										{
-											BlockTitle: (
-												<BlockTitle
-													clientId={ clientId }
-													maximumLength={ 25 }
-												/>
-											),
-										}
-									) }
+									{ __( 'Replace' ) }
 								</MenuItem>
 							);
 						} }

package/src/template-part/index.js

@@ -32,10 +32,11 @@ export const settings = {
 			return;
 		}
 
-		const entity = select( coreDataStore ).getEntityRecord(
+		const { getCurrentTheme, getEntityRecord } = select( coreDataStore );
+		const entity = getEntityRecord(
 			'postType',
 			'wp_template_part',
-			theme + '//' + slug
+			( theme || getCurrentTheme()?.stylesheet ) + '//' + slug
 		);
 		if ( ! entity ) {
 			return;
@@ -60,7 +61,7 @@ export const init = () => {
 	const DISALLOWED_PARENTS = [ 'core/post-template', 'core/post-content' ];
 	addFilter(
 		'blockEditor.__unstableCanInsertBlockType',
-		'removeTemplatePartsFromPostTemplates',
+		'core/block-library/removeTemplatePartsFromPostTemplates',
 		(
 			canInsert,
 			blockType,

package/src/template-part/index.php

@@ -43,10 +43,10 @@ function render_block_core_template_part( $attributes ) {
 		if ( $template_part_post ) {
 			// A published post might already exist if this template part was customized elsewhere
 			// or if it's part of a customized template.
-			$content    = $template_part_post->post_content;
-			$area_terms = get_the_terms( $template_part_post, 'wp_template_part_area' );
-			if ( ! is_wp_error( $area_terms ) && false !== $area_terms ) {
-				$area = $area_terms[0]->name;
+			$block_template = _build_block_template_result_from_post( $template_part_post );
+			$content        = $block_template->content;
+			if ( isset( $block_template->area ) ) {
+				$area = $block_template->area;
 			}
 			/**
 			 * Fires when a block template part is loaded from a template post stored in the database.

package/src/template-part/variations.js

@@ -35,10 +35,12 @@ export function enhanceTemplatePartVariations( settings, name ) {
 			// Find a matching variation from the created template part
 			// by checking the entity's `area` property.
 			if ( ! slug ) return false;
-			const entity = select( coreDataStore ).getEntityRecord(
+			const { getCurrentTheme, getEntityRecord } =
+				select( coreDataStore );
+			const entity = getEntityRecord(
 				'postType',
 				'wp_template_part',
-				`${ theme }//${ slug }`
+				`${ theme || getCurrentTheme()?.stylesheet }//${ slug }`
 			);
 
 			if ( entity?.slug ) {

package/src/utils/remove-anchor-tag.js

@@ -0,0 +1,10 @@
+/**
+ * Removes anchor tags from a string.
+ *
+ * @param {string} value The value to remove anchor tags from.
+ *
+ * @return {string} The value with anchor tags removed.
+ */
+export default function removeAnchorTag( value ) {
+	return value.replace( /<\/?a[^>]*>/g, '' );
+}

package/tsconfig.json

@@ -26,6 +26,7 @@
 		{ "path": "../html-entities" },
 		{ "path": "../i18n" },
 		{ "path": "../icons" },
+		{ "path": "../interactivity" },
 		{ "path": "../notices" },
 		{ "path": "../keycodes" },
 		{ "path": "../primitives" },