@wordpress/block-library 6.0.23 → 7.0.0

package/src/read-more/style.scss

@@ -0,0 +1,12 @@
+.wp-block-read-more {
+	display: block;
+	width: fit-content;
+	&:not([style*="text-decoration"]) {
+		text-decoration: none;
+
+		&:focus,
+		&:active {
+			text-decoration: none;
+		}
+	}
+}

package/src/rss/block.json

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

package/src/search/block.json

@@ -1,4 +1,5 @@
 {
+	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 2,
 	"name": "core/search",
 	"title": "Search",
@@ -43,12 +44,22 @@
 		"align": [ "left", "center", "right" ],
 		"color": {
 			"gradients": true,
-			"__experimentalSkipSerialization": true
+			"__experimentalSkipSerialization": true,
+			"__experimentalDefaultControls": {
+				"background": true,
+				"text": true
+			}
 		},
 		"__experimentalBorder": {
 			"color": true,
 			"radius": true,
-			"__experimentalSkipSerialization": true
+			"width": true,
+			"__experimentalSkipSerialization": true,
+			"__experimentalDefaultControls": {
+				"color": true,
+				"radius": true,
+				"width": true
+			}
 		},
 		"html": false
 	},

package/src/search/edit.js

@@ -103,6 +103,7 @@ export default function SearchEdit( {
 	}, [ insertedInNavigationBlock ] );
 	const borderRadius = style?.border?.radius;
 	const borderColor = style?.border?.color;
+	const borderWidth = style?.border?.width;
 	const borderProps = useBorderProps( attributes );
 
 	// Check for old deprecated numerical border radius. Done as a separate
@@ -128,7 +129,6 @@ export default function SearchEdit( {
 	const getBlockClassNames = () => {
 		return classnames(
 			className,
-			! isButtonPositionInside ? borderProps.className : undefined,
 			isButtonPositionInside
 				? 'wp-block-search__button-inside'
 				: undefined,
@@ -389,9 +389,11 @@ export default function SearchEdit( {
 	const getWrapperStyles = () => {
 		const styles = {
 			borderColor,
+			borderWidth: isButtonPositionInside ? borderWidth : undefined,
 		};
 
-		const isNonZeroBorderRadius = parseInt( borderRadius, 10 ) !== 0;
+		const isNonZeroBorderRadius =
+			borderRadius !== undefined && parseInt( borderRadius, 10 ) !== 0;
 
 		if ( isButtonPositionInside && isNonZeroBorderRadius ) {
 			// We have button inside wrapper and a border radius value to apply.

package/src/search/edit.native.js

@@ -78,7 +78,7 @@ export default function SearchEdit( {
 	 * properly creating accessibilityLabel text.
 	 */
 	useEffect( () => {
-		AccessibilityInfo.addEventListener(
+		const a11yInfoChangeSubscription = AccessibilityInfo.addEventListener(
 			'screenReaderChanged',
 			handleScreenReaderToggled
 		);
@@ -90,10 +90,7 @@ export default function SearchEdit( {
 		);
 
 		return () => {
-			AccessibilityInfo.removeEventListener(
-				'screenReaderChanged',
-				handleScreenReaderToggled
-			);
+			a11yInfoChangeSubscription.remove();
 		};
 	}, [] );
 

package/src/search/index.php

@@ -33,7 +33,6 @@ function render_block_core_search( $attributes ) {
 	$use_icon_button  = ( ! empty( $attributes['buttonUseIcon'] ) ) ? true : false;
 	$show_input       = ( ! empty( $attributes['buttonPosition'] ) && 'button-only' === $attributes['buttonPosition'] ) ? false : true;
 	$show_button      = ( ! empty( $attributes['buttonPosition'] ) && 'no-button' === $attributes['buttonPosition'] ) ? false : true;
-	$label_markup     = '';
 	$input_markup     = '';
 	$button_markup    = '';
 	$inline_styles    = styles_for_block_core_search( $attributes );
@@ -43,16 +42,18 @@ function render_block_core_search( $attributes ) {
 	// Border color classes need to be applied to the elements that have a border color.
 	$border_color_classes = get_border_color_classes_for_block_core_search( $attributes );
 
+	$label_inner_html = empty( $attributes['label'] ) ? __( 'Search' ) : wp_kses_post( $attributes['label'] );
+
 	$label_markup = sprintf(
 		'<label for="%1$s" class="wp-block-search__label screen-reader-text">%2$s</label>',
-		$input_id,
-		empty( $attributes['label'] ) ? __( 'Search' ) : esc_html( $attributes['label'] )
+		esc_attr( $input_id ),
+		$label_inner_html
 	);
 	if ( $show_label && ! empty( $attributes['label'] ) ) {
 		$label_markup = sprintf(
 			'<label for="%1$s" class="wp-block-search__label">%2$s</label>',
 			$input_id,
-			esc_html( $attributes['label'] )
+			$label_inner_html
 		);
 	}
 
@@ -77,7 +78,7 @@ function render_block_core_search( $attributes ) {
 		}
 		if ( ! $use_icon_button ) {
 			if ( ! empty( $attributes['buttonText'] ) ) {
-				$button_internal_markup = esc_html( $attributes['buttonText'] );
+				$button_internal_markup = wp_kses_post( $attributes['buttonText'] );
 			}
 		} else {
 			$button_classes        .= ' has-icon';
@@ -178,9 +179,11 @@ function classnames_for_block_core_search( $attributes ) {
  * @return array Style HTML attribute.
  */
 function styles_for_block_core_search( $attributes ) {
-	$wrapper_styles = array();
-	$button_styles  = array();
-	$input_styles   = array();
+	$wrapper_styles   = array();
+	$button_styles    = array();
+	$input_styles     = array();
+	$is_button_inside = ! empty( $attributes['buttonPosition'] ) &&
+		'button-inside' === $attributes['buttonPosition'];
 
 	// Add width styles.
 	$has_width   = ! empty( $attributes['width'] ) && ! empty( $attributes['widthUnit'] );
@@ -194,15 +197,26 @@ function styles_for_block_core_search( $attributes ) {
 		);
 	}
 
+	// Add border width styles.
+	$has_border_width = ! empty( $attributes['style']['border']['width'] );
+
+	if ( $has_border_width ) {
+		$border_width = $attributes['style']['border']['width'];
+
+		if ( $is_button_inside ) {
+			$wrapper_styles[] = sprintf( 'border-width: %s;', esc_attr( $border_width ) );
+		} else {
+			$button_styles[] = sprintf( 'border-width: %s;', esc_attr( $border_width ) );
+			$input_styles[]  = sprintf( 'border-width: %s;', esc_attr( $border_width ) );
+		}
+	}
+
 	// Add border radius styles.
 	$has_border_radius = ! empty( $attributes['style']['border']['radius'] );
 
 	if ( $has_border_radius ) {
 		$default_padding = '4px';
 		$border_radius   = $attributes['style']['border']['radius'];
-		// Apply wrapper border radius if button placed inside.
-		$is_button_inside = ! empty( $attributes['buttonPosition'] ) &&
-			'button-inside' === $attributes['buttonPosition'];
 
 		if ( is_array( $border_radius ) ) {
 			// Apply styles for individual corner border radii.
@@ -255,9 +269,7 @@ function styles_for_block_core_search( $attributes ) {
 	$has_border_color = ! empty( $attributes['style']['border']['color'] );
 
 	if ( $has_border_color ) {
-		$border_color     = $attributes['style']['border']['color'];
-		$is_button_inside = ! empty( $attributes['buttonPosition'] ) &&
-			'button-inside' === $attributes['buttonPosition'];
+		$border_color = $attributes['style']['border']['color'];
 
 		// Apply wrapper border color if button placed inside.
 		if ( $is_button_inside ) {

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/separator/style.scss

@@ -3,11 +3,6 @@
 	border-bottom: 1px solid currentColor;
 	// Default, thin style, is stored in theme.scss so it can be opted out of
 
-	// Wide style
-	&.is-style-wide {
-		border-bottom-width: 1px;
-	}
-
 	// Dots style
 	&.is-style-dots {
 		// Override any background themes often set on the hr tag for this style.

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();
 
@@ -396,49 +396,14 @@ export default function LogoEdit( {
 			siteLogoId: _siteLogoId,
 			canUserEdit: _canUserEdit,
 			url: siteData?.url,
-			mediaItemData: mediaItem && {
-				id: mediaItem.id,
-				url: mediaItem.source_url,
-				alt: mediaItem.alt_text,
-			},
+			mediaItemData: mediaItem,
 			isRequestingMediaItem: _isRequestingMediaItem,
 			siteIconId: _siteIconId,
 		};
 	}, [] );
 
-	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.
@@ -458,9 +423,9 @@ export default function LogoEdit( {
 
 	let alt = null;
 	if ( mediaItemData ) {
-		alt = mediaItemData.alt;
-		if ( logoUrl !== mediaItemData.url ) {
-			setLogoUrl( mediaItemData.url );
+		alt = mediaItemData.alt_text;
+		if ( logoUrl !== mediaItemData.source_url ) {
+			setLogoUrl( mediaItemData.source_url );
 		}
 	}
 

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;