@wordpress/block-library 8.27.2 → 8.28.0

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/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",

package/src/query/style.scss

@@ -1,52 +0,0 @@
-.wp-block-query__enhanced-pagination-animation {
-	position: fixed;
-	top: 0;
-	left: 0;
-	margin: 0;
-	padding: 0;
-	width: 100vw;
-	max-width: 100vw !important;
-	height: 4px;
-	background-color: var(--wp--preset--color--primary, #000);
-	opacity: 0;
-
-	&.start-animation {
-		animation:
-			wp-block-query__enhanced-pagination-start-animation
-			30s
-			cubic-bezier(0.03, 0.5, 0, 1)
-			forwards;
-	}
-
-	&.finish-animation {
-		animation:
-			wp-block-query__enhanced-pagination-finish-animation
-			300ms
-			ease-in;
-	}
-}
-
-@keyframes wp-block-query__enhanced-pagination-start-animation {
-	0% {
-		transform: scaleX(0);
-		transform-origin: 0% 0%;
-		opacity: 1;
-	}
-	100% {
-		transform: scaleX(1);
-		transform-origin: 0% 0%;
-		opacity: 1;
-	}
-}
-
-@keyframes wp-block-query__enhanced-pagination-finish-animation {
-	0% {
-		opacity: 1;
-	}
-	50% {
-		opacity: 1;
-	}
-	100% {
-		opacity: 0;
-	}
-}