@wordpress/block-library 7.11.0 → 7.12.0

package/src/query-pagination/style.scss

@@ -13,6 +13,20 @@ $pagination-margin: 0.5em;
 			margin-right: 0;
 		}
 	}
+
+	// This moves the next link to the right side of the container,
+	// which is important when it's the only block displayed
+	// and the block has a "space-between" justification.
+	&.is-content-justification-space-between {
+		> .wp-block-query-pagination-next:last-child {
+			margin-inline-start: auto;
+		}
+		> .wp-block-query-pagination-previous:first-child {
+			margin-inline-end: auto;
+		}
+	}
+
+
 	.wp-block-query-pagination-previous-arrow {
 		margin-right: 1ch;
 		display: inline-block; // Needed so that the transform works.

package/src/query-title/block.json

@@ -16,6 +16,10 @@
 		"level": {
 			"type": "number",
 			"default": 1
+		},
+		"showSearchTerm": {
+			"type": "boolean",
+			"default": true
 		}
 	},
 	"supports": {

package/src/query-title/edit.js

@@ -9,9 +9,11 @@ import classnames from 'classnames';
 import {
 	AlignmentControl,
 	BlockControls,
+	InspectorControls,
 	useBlockProps,
 	Warning,
 } from '@wordpress/block-editor';
+import { ToggleControl, PanelBody } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
 /**
@@ -19,21 +21,19 @@ import { __ } from '@wordpress/i18n';
  */
 import HeadingLevelDropdown from '../heading/heading-level-dropdown';
 
-const SUPPORTED_TYPES = [ 'archive' ];
+const SUPPORTED_TYPES = [ 'archive', 'search' ];
 
 export default function QueryTitleEdit( {
-	attributes: { type, level, textAlign },
+	attributes: { type, level, textAlign, showSearchTerm },
 	setAttributes,
 } ) {
 	const TagName = `h${ level }`;
 	const blockProps = useBlockProps( {
-		className: classnames( {
+		className: classnames( 'wp-block-query-title__placeholder', {
 			[ `has-text-align-${ textAlign }` ]: textAlign,
-			'wp-block-query-title__placeholder': type === 'archive',
 		} ),
 	} );
-	// The plan is to augment this block with more
-	// block variations like `Search Title`.
+
 	if ( ! SUPPORTED_TYPES.includes( type ) ) {
 		return (
 			<div { ...blockProps }>
@@ -48,6 +48,33 @@ export default function QueryTitleEdit( {
 			<TagName { ...blockProps }>{ __( 'Archive title' ) }</TagName>
 		);
 	}
+
+	if ( type === 'search' ) {
+		titleElement = (
+			<>
+				<InspectorControls>
+					<PanelBody title={ __( 'Settings' ) }>
+						<ToggleControl
+							label={ __( 'Show search term in title' ) }
+							onChange={ () =>
+								setAttributes( {
+									showSearchTerm: ! showSearchTerm,
+								} )
+							}
+							checked={ showSearchTerm }
+						/>
+					</PanelBody>
+				</InspectorControls>
+
+				<TagName { ...blockProps }>
+					{ showSearchTerm
+						? __( 'Search results for: "search term"' )
+						: __( 'Search results' ) }
+				</TagName>
+			</>
+		);
+	}
+
 	return (
 		<>
 			<BlockControls group="block">

package/src/query-title/index.php

@@ -17,13 +17,29 @@
 function render_block_core_query_title( $attributes ) {
 	$type       = isset( $attributes['type'] ) ? $attributes['type'] : null;
 	$is_archive = is_archive();
-	if ( ! $type || ( 'archive' === $type && ! $is_archive ) ) {
+	$is_search  = is_search();
+	if ( ! $type ||
+		( 'archive' === $type && ! $is_archive ) ||
+		( 'search' === $type && ! $is_search )
+		) {
 		return '';
 	}
 	$title = '';
 	if ( $is_archive ) {
 		$title = get_the_archive_title();
 	}
+	if ( $is_search ) {
+		$title = __( 'Search results' );
+
+		if ( isset( $attributes['showSearchTerm'] ) && $attributes['showSearchTerm'] ) {
+			$title = sprintf(
+				/* translators: %s is the search term. */
+				__( 'Search results for: "%s"' ),
+				get_search_query()
+			);
+		}
+	}
+
 	$tag_name           = isset( $attributes['level'] ) ? 'h' . (int) $attributes['level'] : 'h1';
 	$align_class_name   = empty( $attributes['textAlign'] ) ? '' : "has-text-align-{$attributes['textAlign']}";
 	$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => $align_class_name ) );

package/src/query-title/variations.js

@@ -17,6 +17,19 @@ const variations = [
 		},
 		scope: [ 'inserter' ],
 	},
+	{
+		isDefault: false,
+		name: 'search-title',
+		title: __( 'Search Results Title' ),
+		description: __(
+			'Display the search results title based on the queried object.'
+		),
+		icon: title,
+		attributes: {
+			type: 'search',
+		},
+		scope: [ 'inserter' ],
+	},
 ];
 
 /**

package/src/quote/transforms.js

@@ -1,11 +1,7 @@
 /**
  * WordPress dependencies
  */
-import {
-	createBlock,
-	parseWithAttributeSchema,
-	rawHandler,
-} from '@wordpress/blocks';
+import { createBlock, parseWithAttributeSchema } from '@wordpress/blocks';
 
 const transforms = {
 	from: [
@@ -59,7 +55,7 @@ const transforms = {
 				},
 			} ),
 			selector: 'blockquote',
-			transform: ( node ) => {
+			transform: ( node, handler ) => {
 				return createBlock(
 					'core/quote',
 					// Don't try to parse any `cite` out of this content.
@@ -68,7 +64,7 @@ const transforms = {
 					// * If the cite is nested in the quoted text, it's wrong to
 					//   remove it.
 					{},
-					rawHandler( {
+					handler( {
 						HTML: node.innerHTML,
 						mode: 'BLOCKS',
 					} )

package/src/search/style.scss

@@ -34,6 +34,8 @@
 .wp-block-search__input {
 	padding: 8px;
 	flex-grow: 1;
+	margin-left: 0;
+	margin-right: 0;
 	min-width: 3em;
 	border: 1px solid #949494;
 	font-size: inherit;

package/src/search/test/__snapshots__/edit.native.js.snap

@@ -11,7 +11,14 @@ exports[`Search Block renders block with button inside option 1`] = `
     accessibilityRole="none"
     accessible={true}
   >
-    <View>
+    <View
+      style={
+        Array [
+          undefined,
+          undefined,
+        ]
+      }
+    >
       <RCTAztecView
         accessible={true}
         activeFormats={Array []}
@@ -119,7 +126,14 @@ exports[`Search Block renders block with button inside option 1`] = `
         accessible={true}
         onLayout={[Function]}
       >
-        <View>
+        <View
+          style={
+            Array [
+              undefined,
+              undefined,
+            ]
+          }
+        >
           <RCTAztecView
             accessible={true}
             activeFormats={Array []}
@@ -191,7 +205,14 @@ exports[`Search Block renders block with icon button option matches snapshot 1`]
     accessibilityRole="none"
     accessible={true}
   >
-    <View>
+    <View
+      style={
+        Array [
+          undefined,
+          undefined,
+        ]
+      }
+    >
       <RCTAztecView
         accessible={true}
         activeFormats={Array []}
@@ -359,7 +380,14 @@ exports[`Search Block renders block with label hidden matches snapshot 1`] = `
         accessible={true}
         onLayout={[Function]}
       >
-        <View>
+        <View
+          style={
+            Array [
+              undefined,
+              undefined,
+            ]
+          }
+        >
           <RCTAztecView
             accessible={true}
             activeFormats={Array []}
@@ -431,7 +459,14 @@ exports[`Search Block renders with default configuration matches snapshot 1`] =
     accessibilityRole="none"
     accessible={true}
   >
-    <View>
+    <View
+      style={
+        Array [
+          undefined,
+          undefined,
+        ]
+      }
+    >
       <RCTAztecView
         accessible={true}
         activeFormats={Array []}
@@ -539,7 +574,14 @@ exports[`Search Block renders with default configuration matches snapshot 1`] =
         accessible={true}
         onLayout={[Function]}
       >
-        <View>
+        <View
+          style={
+            Array [
+              undefined,
+              undefined,
+            ]
+          }
+        >
           <RCTAztecView
             accessible={true}
             activeFormats={Array []}
@@ -611,7 +653,14 @@ exports[`Search Block renders with no-button option matches snapshot 1`] = `
     accessibilityRole="none"
     accessible={true}
   >
-    <View>
+    <View
+      style={
+        Array [
+          undefined,
+          undefined,
+        ]
+      }
+    >
       <RCTAztecView
         accessible={true}
         activeFormats={Array []}

package/src/separator/edit.js

@@ -37,7 +37,7 @@ export default function SeparatorEdit( { attributes, setAttributes } ) {
 			'has-css-opacity': opacity === 'css',
 			'has-alpha-channel-opacity': opacity === 'alpha-channel',
 		},
-		colorProps.classname
+		colorProps.className
 	);
 
 	const styles = {

package/src/separator/test/edit.js

@@ -66,7 +66,8 @@ describe( 'Separator block edit method', () => {
 		expect( useBlockProps ).toHaveBeenCalledWith( {
 			// For backwards compatibility the has-text-color class is also added even though it is only needed for
 			// is-style-dots as this class was always added to v1 blocks, so may be expected by themes and plugins.
-			className: 'has-text-color has-alpha-channel-opacity',
+			className:
+				'has-text-color has-alpha-channel-opacity has-background',
 			style: {
 				backgroundColor: '#ff0000',
 				color: '#ff0000',
@@ -85,7 +86,8 @@ describe( 'Separator block edit method', () => {
 		};
 		render( <SeparatorEdit { ...props } /> );
 		expect( useBlockProps ).toHaveBeenCalledWith( {
-			className: 'has-text-color has-alpha-channel-opacity',
+			className:
+				'has-text-color has-alpha-channel-opacity has-background',
 			style: {
 				backgroundColor: '#ff0000',
 				color: '#ff0000',
@@ -106,7 +108,7 @@ describe( 'Separator block edit method', () => {
 		// background color classes are added by useBlockProps which has to be mocked.
 		expect( useBlockProps ).toHaveBeenCalledWith( {
 			className:
-				'has-text-color has-banana-color has-alpha-channel-opacity',
+				'has-text-color has-banana-color has-alpha-channel-opacity has-banana-background-color has-background',
 			style: undefined,
 		} );
 	} );

package/src/site-title/index.php

@@ -21,22 +21,21 @@ function render_block_core_site_title( $attributes ) {
 	$tag_name         = 'h1';
 	$align_class_name = empty( $attributes['textAlign'] ) ? '' : "has-text-align-{$attributes['textAlign']}";
 
-	$aria_current = is_home() || ( is_front_page() && 'page' === get_option( 'show_on_front' ) ) ? ' aria-current="page"' : '';
-
 	if ( isset( $attributes['level'] ) ) {
 		$tag_name = 0 === $attributes['level'] ? 'p' : 'h' . (int) $attributes['level'];
 	}
 
 	if ( $attributes['isLink'] ) {
-		$link_attrs = array(
-			'href="' . esc_url( get_bloginfo( 'url' ) ) . '"',
-			'rel="' . esc_attr( 'home' ) . '"',
+		$aria_current = is_home() || ( is_front_page() && 'page' === get_option( 'show_on_front' ) ) ? ' aria-current="page"' : '';
+		$link_target  = ! empty( $attributes['linkTarget'] ) ? $attributes['linkTarget'] : '_self';
+
+		$site_title = sprintf(
+			'<a href="%1$s" target="%2$s" rel="home"%3$s>%4$s</a>',
+			esc_url( home_url() ),
+			esc_attr( $link_target ),
 			$aria_current,
+			esc_html( $site_title )
 		);
-		if ( '_blank' === $attributes['linkTarget'] ) {
-			$link_attrs[] = 'target="_blank"';
-		}
-		$site_title = sprintf( '<a %1$s>%2$s</a>', implode( ' ', $link_attrs ), esc_html( $site_title ) );
 	}
 	$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => $align_class_name ) );
 

package/src/social-link/index.php

@@ -296,7 +296,7 @@ function block_core_social_link_services( $service = '', $field = '' ) {
 		),
 		'share'         => array(
 			'name' => 'Share Icon',
-			'icon' => '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9 11.8l6.1-4.5c.1.4.4.7.9.7h2c.6 0 1-.4 1-1V5c0-.6-.4-1-1-1h-2c-.6 0-1 .4-1 1v.4l-6.4 4.8c-.2-.1-.4-.2-.6-.2H6c-.6 0-1 .4-1 1v2c0 .6.4 1 1 1h2c.2 0 .4-.1.6-.2l6.4 4.8v.4c0 .6.4 1 1 1h2c.6 0 1-.4 1-1v-2c0-.6-.4-1-1-1h-2c-.5 0-.8.3-.9.7L9 12.2v-.4z"/></svg>',
+			'icon' => '<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9 11.8l6.1-4.5c.1.4.4.7.9.7h2c.6 0 1-.4 1-1V5c0-.6-.4-1-1-1h-2c-.6 0-1 .4-1 1v.4l-6.4 4.8c-.2-.1-.4-.2-.6-.2H6c-.6 0-1 .4-1 1v2c0 .6.4 1 1 1h2c.2 0 .4-.1.6-.2l6.4 4.8v.4c0 .6.4 1 1 1h2c.6 0 1-.4 1-1v-2c0-.6-.4-1-1-1h-2c-.5 0-.8.3-.9.7L9 12.2v-.4z"/></svg>',
 		),
 	);
 

package/src/social-links/edit.js

@@ -108,6 +108,7 @@ export function SocialLinksEdit( props ) {
 	// Fallback color values are used maintain selections in case switching
 	// themes and named colors in palette do not match.
 	const className = classNames( size, {
+		'has-visible-labels': showLabels,
 		'has-icon-color': iconColor.color || iconColorValue,
 		'has-icon-background-color':
 			iconBackgroundColor.color || iconBackgroundColorValue,

package/src/tag-cloud/style.scss

@@ -1,6 +1,7 @@
 .wp-block-tag-cloud {
 	&.aligncenter {
 		text-align: center;
+		justify-content: center;
 	}
 
 	&.alignfull {

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

@@ -13,7 +13,8 @@ import {
 	useBlockProps,
 	Warning,
 	store as blockEditorStore,
-	__experimentalUseNoRecursiveRenders as useNoRecursiveRenders,
+	__experimentalRecursionProvider as RecursionProvider,
+	__experimentalUseHasRecursion as useHasRecursion,
 	__experimentalUseBlockOverlayActive as useBlockOverlayActive,
 } from '@wordpress/block-editor';
 import { Spinner, Modal, MenuItem } from '@wordpress/components';
@@ -43,8 +44,7 @@ export default function TemplatePartEdit( {
 } ) {
 	const { slug, theme, tagName, layout = {} } = attributes;
 	const templatePartId = createTemplatePartId( theme, slug );
-	const [ hasAlreadyRendered, RecursionProvider ] =
-		useNoRecursiveRenders( templatePartId );
+	const hasAlreadyRendered = useHasRecursion( templatePartId );
 	const [ isTemplatePartSelectionOpen, setIsTemplatePartSelectionOpen ] =
 		useState( false );
 
@@ -142,7 +142,7 @@ export default function TemplatePartEdit( {
 	}
 
 	return (
-		<RecursionProvider>
+		<RecursionProvider uniqueId={ templatePartId }>
 			<TemplatePartAdvancedControls
 				tagName={ tagName }
 				setAttributes={ setAttributes }