@wordpress/block-library 6.0.20 → 6.1.0

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

@@ -57,6 +57,7 @@ exports[`Search Block renders block with button inside option 1`] = `
             "eventCount": undefined,
             "linkTextColor": undefined,
             "selection": null,
+            "tag": "p",
             "text": "<p>Search</p>",
           }
         }
@@ -79,7 +80,6 @@ exports[`Search Block renders block with button inside option 1`] = `
       accessible={true}
     >
       <TextInput
-        allowFontScaling={true}
         className="wp-block-search__input"
         ellipsizeMode="tail"
         fontFamily="serif"
@@ -90,7 +90,6 @@ exports[`Search Block renders block with button inside option 1`] = `
         onChange={[Function]}
         onFocus={[Function]}
         placeholder="Optional placeholder…"
-        rejectResponderTermination={true}
         scrollEnabled={false}
         style={
           Array [
@@ -102,7 +101,6 @@ exports[`Search Block renders block with button inside option 1`] = `
             undefined,
           ]
         }
-        underlineColorAndroid="transparent"
       />
     </View>
     <View
@@ -168,6 +166,7 @@ exports[`Search Block renders block with button inside option 1`] = `
                 "eventCount": undefined,
                 "linkTextColor": undefined,
                 "selection": null,
+                "tag": "p",
                 "text": "<p>Search Button</p>",
               }
             }
@@ -238,6 +237,7 @@ exports[`Search Block renders block with icon button option matches snapshot 1`]
             "eventCount": undefined,
             "linkTextColor": undefined,
             "selection": null,
+            "tag": "p",
             "text": "<p>Search</p>",
           }
         }
@@ -260,7 +260,6 @@ exports[`Search Block renders block with icon button option matches snapshot 1`]
       accessible={true}
     >
       <TextInput
-        allowFontScaling={true}
         className="wp-block-search__input"
         ellipsizeMode="tail"
         fontFamily="serif"
@@ -271,7 +270,6 @@ exports[`Search Block renders block with icon button option matches snapshot 1`]
         onChange={[Function]}
         onFocus={[Function]}
         placeholder="Optional placeholder…"
-        rejectResponderTermination={true}
         scrollEnabled={false}
         style={
           Array [
@@ -283,7 +281,6 @@ exports[`Search Block renders block with icon button option matches snapshot 1`]
             undefined,
           ]
         }
-        underlineColorAndroid="transparent"
       />
     </View>
     <View
@@ -323,7 +320,6 @@ exports[`Search Block renders block with label hidden matches snapshot 1`] = `
       accessible={true}
     >
       <TextInput
-        allowFontScaling={true}
         className="wp-block-search__input"
         ellipsizeMode="tail"
         fontFamily="serif"
@@ -334,7 +330,6 @@ exports[`Search Block renders block with label hidden matches snapshot 1`] = `
         onChange={[Function]}
         onFocus={[Function]}
         placeholder="Optional placeholder…"
-        rejectResponderTermination={true}
         scrollEnabled={false}
         style={
           Array [
@@ -346,7 +341,6 @@ exports[`Search Block renders block with label hidden matches snapshot 1`] = `
             undefined,
           ]
         }
-        underlineColorAndroid="transparent"
       />
     </View>
     <View
@@ -412,6 +406,7 @@ exports[`Search Block renders block with label hidden matches snapshot 1`] = `
                 "eventCount": undefined,
                 "linkTextColor": undefined,
                 "selection": null,
+                "tag": "p",
                 "text": "<p>Search Button</p>",
               }
             }
@@ -482,6 +477,7 @@ exports[`Search Block renders with default configuration matches snapshot 1`] =
             "eventCount": undefined,
             "linkTextColor": undefined,
             "selection": null,
+            "tag": "p",
             "text": "<p>Search</p>",
           }
         }
@@ -504,7 +500,6 @@ exports[`Search Block renders with default configuration matches snapshot 1`] =
       accessible={true}
     >
       <TextInput
-        allowFontScaling={true}
         className="wp-block-search__input"
         ellipsizeMode="tail"
         fontFamily="serif"
@@ -515,7 +510,6 @@ exports[`Search Block renders with default configuration matches snapshot 1`] =
         onChange={[Function]}
         onFocus={[Function]}
         placeholder="Optional placeholder…"
-        rejectResponderTermination={true}
         scrollEnabled={false}
         style={
           Array [
@@ -527,7 +521,6 @@ exports[`Search Block renders with default configuration matches snapshot 1`] =
             undefined,
           ]
         }
-        underlineColorAndroid="transparent"
       />
     </View>
     <View
@@ -593,6 +586,7 @@ exports[`Search Block renders with default configuration matches snapshot 1`] =
                 "eventCount": undefined,
                 "linkTextColor": undefined,
                 "selection": null,
+                "tag": "p",
                 "text": "<p>Search Button</p>",
               }
             }
@@ -663,6 +657,7 @@ exports[`Search Block renders with no-button option matches snapshot 1`] = `
             "eventCount": undefined,
             "linkTextColor": undefined,
             "selection": null,
+            "tag": "p",
             "text": "<p>Search</p>",
           }
         }
@@ -676,7 +671,6 @@ exports[`Search Block renders with no-button option matches snapshot 1`] = `
     accessible={true}
   >
     <TextInput
-      allowFontScaling={true}
       className="wp-block-search__input"
       ellipsizeMode="tail"
       fontFamily="serif"
@@ -687,7 +681,6 @@ exports[`Search Block renders with no-button option matches snapshot 1`] = `
       onChange={[Function]}
       onFocus={[Function]}
       placeholder="Optional placeholder…"
-      rejectResponderTermination={true}
       scrollEnabled={false}
       style={
         Array [
@@ -699,7 +692,6 @@ exports[`Search Block renders with no-button option matches snapshot 1`] = `
           undefined,
         ]
       }
-      underlineColorAndroid="transparent"
     />
   </View>
 </View>

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import renderer from 'react-test-renderer';
+import { render } from 'test/helpers';
 
 /**
  * WordPress dependencies
@@ -26,31 +26,31 @@ const defaultAttributes = {
 
 const getTestComponent = ( attributes = {} ) => {
 	const finalAttrs = { ...defaultAttributes, ...attributes };
-	return renderer.create(
+	return render(
 		<SearchEdit attributes={ finalAttrs } setAttributes={ jest.fn() } />
 	);
 };
 
 const getLabel = ( instance ) => {
-	return instance.findByProps( {
+	return instance.UNSAFE_getByProps( {
 		className: 'wp-block-search__label',
 	} );
 };
 
 const getButton = ( instance ) => {
-	return instance.findByProps( {
+	return instance.UNSAFE_getByProps( {
 		className: 'wp-block-search__button',
 	} );
 };
 
 const getSearchInput = ( instance ) => {
-	return instance.findByProps( {
+	return instance.UNSAFE_getByProps( {
 		className: 'wp-block-search__input',
 	} );
 };
 
 const hasComponent = ( instance, className ) => {
-	const components = instance.findAllByProps( {
+	const components = instance.UNSAFE_queryAllByProps( {
 		className,
 	} );
 	return components.length !== 0;
@@ -64,8 +64,10 @@ describe( 'Search Block', () => {
 	} );
 
 	describe( 'renders with default configuration', () => {
-		const component = getTestComponent();
-		const instance = component.root;
+		let instance;
+		beforeEach( () => {
+			instance = getTestComponent();
+		} );
 
 		it( 'label is visible and text is properly set', () => {
 			// Verify the label element of the search block exists and
@@ -94,16 +96,18 @@ describe( 'Search Block', () => {
 		} );
 
 		it( 'matches snapshot', () => {
-			const rendered = component.toJSON();
+			const rendered = instance.toJSON();
 			expect( rendered ).toMatchSnapshot();
 		} );
 	} );
 
 	describe( 'renders with no-button option', () => {
-		const component = getTestComponent( {
-			buttonPosition: 'no-button',
+		let instance;
+		beforeEach( () => {
+			instance = getTestComponent( {
+				buttonPosition: 'no-button',
+			} );
 		} );
-		const instance = component.root;
 
 		it( 'verify button element has not been rendered', () => {
 			expect(
@@ -112,42 +116,46 @@ describe( 'Search Block', () => {
 		} );
 
 		it( 'matches snapshot', () => {
-			const rendered = component.toJSON();
+			const rendered = instance.toJSON();
 			expect( rendered ).toMatchSnapshot();
 		} );
 	} );
 
 	describe( 'renders block with icon button option', () => {
-		const component = getTestComponent( {
-			buttonUseIcon: true,
+		let instance;
+		beforeEach( () => {
+			instance = getTestComponent( {
+				buttonUseIcon: true,
+			} );
 		} );
-		const instance = component.root;
 
 		it( 'search button uses icon', () => {
-			const button = instance.findByType( Icon );
+			const button = instance.UNSAFE_getByType( Icon );
 			expect( button ).toBeTruthy();
 		} );
 
 		it( 'matches snapshot', () => {
-			const rendered = component.toJSON();
+			const rendered = instance.toJSON();
 			expect( rendered ).toMatchSnapshot();
 		} );
 	} );
 
 	it( 'renders block with button inside option', () => {
-		const component = getTestComponent( {
+		const instance = getTestComponent( {
 			buttonPosition: 'button-inside',
 		} );
 
-		const rendered = component.toJSON();
+		const rendered = instance.toJSON();
 		expect( rendered ).toMatchSnapshot();
 	} );
 
 	describe( 'renders block with label hidden', () => {
-		const component = getTestComponent( {
-			showLabel: false,
+		let instance;
+		beforeEach( () => {
+			instance = getTestComponent( {
+				showLabel: false,
+			} );
 		} );
-		const instance = component.root;
 
 		it( 'verify label has not been rendered', () => {
 			expect(
@@ -156,7 +164,7 @@ describe( 'Search Block', () => {
 		} );
 
 		it( 'matches snapshot', () => {
-			const rendered = component.toJSON();
+			const rendered = instance.toJSON();
 			expect( rendered ).toMatchSnapshot();
 		} );
 	} );

package/src/separator/block.json

@@ -1,4 +1,5 @@
 {
+	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 2,
 	"name": "core/separator",
 	"title": "Separator",

package/src/shortcode/block.json

@@ -1,4 +1,5 @@
 {
+	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 2,
 	"name": "core/shortcode",
 	"title": "Shortcode",

package/src/site-logo/block.json

@@ -1,4 +1,5 @@
 {
+	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 2,
 	"name": "core/site-logo",
 	"title": "Site Logo",

package/src/site-logo/edit.js

@@ -358,7 +358,7 @@ export default function LogoEdit( {
 	setAttributes,
 	isSelected,
 } ) {
-	const { className: styleClass, width, shouldSyncIcon } = attributes;
+	const { width, shouldSyncIcon } = attributes;
 	const [ logoUrl, setLogoUrl ] = useState();
 	const ref = useRef();
 
@@ -406,39 +406,8 @@ export default function LogoEdit( {
 		};
 	}, [] );
 
-	const { getGlobalBlockCount } = useSelect( blockEditorStore );
 	const { editEntityRecord } = useDispatch( coreStore );
 
-	useEffect( () => {
-		// Cleanup function to discard unsaved changes to the icon and logo when
-		// the block is removed.
-		return () => {
-			// Do nothing if the block is being rendered in the styles preview or the
-			// block inserter.
-			if (
-				styleClass?.includes(
-					'block-editor-block-types-list__site-logo-example'
-				) ||
-				styleClass?.includes(
-					'block-editor-block-styles__block-preview-container'
-				)
-			) {
-				return;
-			}
-
-			const logoBlockCount = getGlobalBlockCount( 'core/site-logo' );
-
-			// Only discard unsaved changes if we are removing the last Site Logo block
-			// on the page.
-			if ( logoBlockCount === 0 ) {
-				editEntityRecord( 'root', 'site', undefined, {
-					site_logo: undefined,
-					site_icon: undefined,
-				} );
-			}
-		};
-	}, [] );
-
 	const setLogo = ( newValue, shouldForceSync = false ) => {
 		// `shouldForceSync` is used to force syncing when the attribute
 		// may not have updated yet.

package/src/site-logo/index.js

@@ -8,6 +8,7 @@ import { siteLogo as icon } from '@wordpress/icons';
  */
 import metadata from './block.json';
 import edit from './edit';
+import transforms from './transforms';
 
 const { name } = metadata;
 export { metadata, name };
@@ -15,4 +16,5 @@ export { metadata, name };
 export const settings = {
 	icon,
 	edit,
+	transforms,
 };

package/src/site-logo/index.php

@@ -40,7 +40,7 @@ function render_block_core_site_logo( $attributes ) {
 		// Add the link target after the rel="home".
 		// Add an aria-label for informing that the page opens in a new tab.
 		$aria_label  = 'aria-label="' . esc_attr__( '(Home link, opens in a new tab)' ) . '"';
-		$custom_logo = str_replace( 'rel="home"', 'rel="home" target="' . $attributes['linkTarget'] . '"' . $aria_label, $custom_logo );
+		$custom_logo = str_replace( 'rel="home"', 'rel="home" target="' . esc_attr( $attributes['linkTarget'] ) . '"' . $aria_label, $custom_logo );
 	}
 
 	$classnames = array();

package/src/site-logo/transforms.js

@@ -0,0 +1,21 @@
+/**
+ * WordPress dependencies
+ */
+import { createBlock } from '@wordpress/blocks';
+
+const transforms = {
+	to: [
+		{
+			type: 'block',
+			blocks: [ 'core/site-title' ],
+			transform: ( { isLink, linkTarget } ) => {
+				return createBlock( 'core/site-title', {
+					isLink,
+					linkTarget,
+				} );
+			},
+		},
+	],
+};
+
+export default transforms;

package/src/site-tagline/block.json

@@ -1,9 +1,10 @@
 {
+	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 2,
 	"name": "core/site-tagline",
 	"title": "Site Tagline",
 	"category": "theme",
-	"description": "Describe in a few words what the website is about. The tagline can be used in search results or when sharing on social networks even if it's not displayed in the theme design.",
+	"description": "Describe in a few words what the site is about. The tagline can be used in search results or when sharing on social networks even if it's not displayed in the theme design.",
 	"keywords": [ "description" ],
 	"textdomain": "default",
 	"attributes": {

package/src/site-tagline/index.php

@@ -23,7 +23,7 @@ function render_block_core_site_tagline( $attributes ) {
 	return sprintf(
 		'<p %1$s>%2$s</p>',
 		$wrapper_attributes,
-		$site_tagline
+		esc_html( $site_tagline )
 	);
 }
 

package/src/site-title/block.json

@@ -1,4 +1,5 @@
 {
+	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 2,
 	"name": "core/site-title",
 	"title": "Site Title",

package/src/site-title/index.js

@@ -9,6 +9,7 @@ import { mapMarker as icon } from '@wordpress/icons';
 import metadata from './block.json';
 import edit from './edit';
 import deprecated from './deprecated';
+import transforms from './transforms';
 
 const { name } = metadata;
 export { metadata, name };
@@ -16,5 +17,6 @@ export { metadata, name };
 export const settings = {
 	icon,
 	edit,
+	transforms,
 	deprecated,
 };

package/src/site-title/index.php

@@ -24,20 +24,20 @@ function render_block_core_site_title( $attributes ) {
 	$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' . $attributes['level'];
+		$tag_name = 0 === $attributes['level'] ? 'p' : 'h' . (int) $attributes['level'];
 	}
 
 	if ( $attributes['isLink'] ) {
 		$link_attrs = array(
-			'href="' . get_bloginfo( 'url' ) . '"',
-			'rel="home"',
+			'href="' . esc_url( get_bloginfo( 'url' ) ) . '"',
+			'rel="' . esc_attr( 'home' ) . '"',
 			$aria_current,
 		);
 		if ( '_blank' === $attributes['linkTarget'] ) {
 			$link_attrs[] = 'target="_blank"';
 			$link_attrs[] = 'aria-label="' . esc_attr__( '(opens in a new tab)' ) . '"';
 		}
-		$site_title = sprintf( '<a %1$s>%2$s</a>', implode( ' ', $link_attrs ), $site_title );
+		$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/site-title/transforms.js

@@ -0,0 +1,21 @@
+/**
+ * WordPress dependencies
+ */
+import { createBlock } from '@wordpress/blocks';
+
+const transforms = {
+	to: [
+		{
+			type: 'block',
+			blocks: [ 'core/site-logo' ],
+			transform: ( { isLink, linkTarget } ) => {
+				return createBlock( 'core/site-logo', {
+					isLink,
+					linkTarget,
+				} );
+			},
+		},
+	],
+};
+
+export default transforms;

package/src/social-link/block.json

@@ -1,10 +1,11 @@
 {
+	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 2,
 	"name": "core/social-link",
 	"title": "Social Icon",
 	"category": "widgets",
 	"parent": [ "core/social-links" ],
-	"description": "Display an icon linking to a social media profile or website.",
+	"description": "Display an icon linking to a social media profile or site.",
 	"textdomain": "default",
 	"attributes": {
 		"url": {

package/src/social-link/index.php

@@ -32,9 +32,9 @@ function render_block_core_social_link( $attributes, $content, $block ) {
 		return '';
 	}
 
-	$attribute = '';
+	$rel_target_attributes = '';
 	if ( $open_in_new_tab ) {
-		$attribute = 'rel="noopener nofollow" target="_blank"';
+		$rel_target_attributes = 'rel="noopener nofollow" target="_blank"';
 	}
 
 	$icon               = block_core_social_link_get_icon( $service );
@@ -45,7 +45,7 @@ function render_block_core_social_link( $attributes, $content, $block ) {
 		)
 	);
 
-	return '<li ' . $wrapper_attributes . '><a href="' . esc_url( $url ) . '" aria-label="' . esc_attr( $label ) . '" ' . $attribute . ' class="wp-block-social-link-anchor"> ' . $icon . '</a></li>';
+	return '<li ' . $wrapper_attributes . '><a href="' . esc_url( $url ) . '" aria-label="' . esc_attr( $label ) . '" ' . $rel_target_attributes . ' class="wp-block-social-link-anchor">' . $icon . '</a></li>';
 }
 
 /**

package/src/social-links/block.json

@@ -1,9 +1,10 @@
 {
+	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 2,
 	"name": "core/social-links",
 	"title": "Social Icons",
 	"category": "widgets",
-	"description": "Display icons linking to your social media profiles or websites.",
+	"description": "Display icons linking to your social media profiles or sites.",
 	"keywords": [ "links" ],
 	"textdomain": "default",
 	"attributes": {
@@ -52,13 +53,7 @@
 		"spacing": {
 			"blockGap": true,
 			"margin": [ "top", "bottom" ],
-			"units": [
-				"px",
-				"em",
-				"rem",
-				"vh",
-				"vw"
-			],
+			"units": [ "px", "em", "rem", "vh", "vw" ],
 			"__experimentalDefaultControls": {
 				"blockGap": true
 			}

package/src/social-links/edit.js

@@ -116,6 +116,34 @@ export function SocialLinksEdit( props ) {
 		position: 'bottom right',
 	};
 
+	const colorSettings = [
+		{
+			// Use custom attribute as fallback to prevent loss of named color selection when
+			// switching themes to a new theme that does not have a matching named color.
+			value: iconColor.color || iconColorValue,
+			onChange: ( colorValue ) => {
+				setIconColor( colorValue );
+				setAttributes( { iconColorValue: colorValue } );
+			},
+			label: __( 'Icon color' ),
+		},
+	];
+
+	if ( ! logosOnly ) {
+		colorSettings.push( {
+			// Use custom attribute as fallback to prevent loss of named color selection when
+			// switching themes to a new theme that does not have a matching named color.
+			value: iconBackgroundColor.color || iconBackgroundColorValue,
+			onChange: ( colorValue ) => {
+				setIconBackgroundColor( colorValue );
+				setAttributes( {
+					iconBackgroundColorValue: colorValue,
+				} );
+			},
+			label: __( 'Icon background' ),
+		} );
+	}
+
 	return (
 		<Fragment>
 			<BlockControls group="other">
@@ -169,32 +197,7 @@ export function SocialLinksEdit( props ) {
 					__experimentalHasMultipleOrigins
 					__experimentalIsRenderedInSidebar
 					title={ __( 'Color' ) }
-					colorSettings={ [
-						{
-							// Use custom attribute as fallback to prevent loss of named color selection when
-							// switching themes to a new theme that does not have a matching named color.
-							value: iconColor.color || iconColorValue,
-							onChange: ( colorValue ) => {
-								setIconColor( colorValue );
-								setAttributes( { iconColorValue: colorValue } );
-							},
-							label: __( 'Icon color' ),
-						},
-						! logosOnly && {
-							// Use custom attribute as fallback to prevent loss of named color selection when
-							// switching themes to a new theme that does not have a matching named color.
-							value:
-								iconBackgroundColor.color ||
-								iconBackgroundColorValue,
-							onChange: ( colorValue ) => {
-								setIconBackgroundColor( colorValue );
-								setAttributes( {
-									iconBackgroundColorValue: colorValue,
-								} );
-							},
-							label: __( 'Icon background color' ),
-						},
-					] }
+					colorSettings={ colorSettings }
 				/>
 				{ ! logosOnly && (
 					<ContrastChecker

package/src/social-links/editor.scss

@@ -4,6 +4,13 @@
 		display: inline-block;
 		margin-left: $grid-unit-10;
 	}
+
+	// Unset background colors that can be inherited from Global Styles.
+	// This is a duplicate of a rule in style.scss, as it needs higher specificity in the editor.
+	// The rule can be removed if editor styles get lowered in specificity.
+	&.wp-block-social-links {
+		background: none;
+	}
 }
 
 // Prevent toolbar from jumping when selecting / hovering a link.