@wordpress/block-library 7.17.0 → 7.19.0

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

@@ -28,10 +28,10 @@ afterAll( () => {
 
 describe( 'Shortcode block', () => {
 	it( 'inserts block', async () => {
-		const { getByA11yLabel, getByTestId, getByText } =
+		const { getByLabelText, getByTestId, getByText } =
 			await initializeEditor();
 
-		fireEvent.press( getByA11yLabel( 'Add block' ) );
+		fireEvent.press( getByLabelText( 'Add block' ) );
 
 		const blockList = getByTestId( 'InserterUI-Blocks' );
 		// onScroll event used to force the FlatList to render all items
@@ -45,17 +45,17 @@ describe( 'Shortcode block', () => {
 
 		fireEvent.press( await waitFor( () => getByText( 'Shortcode' ) ) );
 
-		expect( getByA11yLabel( /Shortcode Block\. Row 1/ ) ).toBeVisible();
+		expect( getByLabelText( /Shortcode Block\. Row 1/ ) ).toBeVisible();
 		expect( getEditorHtml() ).toMatchSnapshot();
 	} );
 
 	it( 'edits content', async () => {
-		const { getByA11yLabel, getByPlaceholderText } = await initializeEditor(
+		const { getByLabelText, getByPlaceholderText } = await initializeEditor(
 			{
 				initialHtml: '<!-- wp:shortcode /-->',
 			}
 		);
-		const shortcodeBlock = getByA11yLabel( /Shortcode Block\. Row 1/ );
+		const shortcodeBlock = getByLabelText( /Shortcode Block\. Row 1/ );
 		fireEvent.press( shortcodeBlock );
 
 		const textField = getByPlaceholderText( 'Add a shortcode…' );

package/src/site-logo/edit.js

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { includes, pick } from 'lodash';
+import { pick } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -71,7 +71,7 @@ const SiteLogo = ( {
 } ) => {
 	const clientWidth = useClientWidth( containerRef, [ align ] );
 	const isLargeViewport = useViewportMatch( 'medium' );
-	const isWideAligned = includes( [ 'wide', 'full' ], align );
+	const isWideAligned = [ 'wide', 'full' ].includes( align );
 	const isResizable = ! isWideAligned && isLargeViewport;
 	const [ { naturalWidth, naturalHeight }, setNaturalSize ] = useState( {} );
 	const [ isEditingImage, setIsEditingImage ] = useState( false );
@@ -394,7 +394,7 @@ export default function LogoEdit( {
 		return {
 			siteLogoId: _siteLogoId,
 			canUserEdit: _canUserEdit,
-			url: siteData?.url,
+			url: siteData?.home,
 			mediaItemData: mediaItem,
 			isRequestingMediaItem: _isRequestingMediaItem,
 			siteIconId: _siteIconId,

package/src/site-tagline/edit.js

@@ -6,8 +6,8 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { useSelect } from '@wordpress/data';
-import { useEntityProp, store as coreStore } from '@wordpress/core-data';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
 import {
 	AlignmentControl,
 	useBlockProps,
@@ -23,34 +23,43 @@ export default function SiteTaglineEdit( {
 	insertBlocksAfter,
 } ) {
 	const { textAlign } = attributes;
-	const [ siteTagline, setSiteTagline ] = useEntityProp(
-		'root',
-		'site',
-		'description'
-	);
-	const { canUserEdit, readOnlySiteTagLine } = useSelect( ( select ) => {
-		const { canUser, getEntityRecord } = select( coreStore );
-		const siteData = getEntityRecord( 'root', '__unstableBase' );
+	const { canUserEdit, tagline } = useSelect( ( select ) => {
+		const { canUser, getEntityRecord, getEditedEntityRecord } =
+			select( coreStore );
+		const canEdit = canUser( 'update', 'settings' );
+		const settings = canEdit ? getEditedEntityRecord( 'root', 'site' ) : {};
+		const readOnlySettings = getEntityRecord( 'root', '__unstableBase' );
+
 		return {
 			canUserEdit: canUser( 'update', 'settings' ),
-			readOnlySiteTagLine: siteData?.description,
+			tagline: canEdit
+				? settings?.description
+				: readOnlySettings?.description,
 		};
 	}, [] );
+
+	const { editEntityRecord } = useDispatch( coreStore );
+
+	function setTagline( newTagline ) {
+		editEntityRecord( 'root', 'site', undefined, {
+			description: newTagline,
+		} );
+	}
+
 	const blockProps = useBlockProps( {
 		className: classnames( {
 			[ `has-text-align-${ textAlign }` ]: textAlign,
-			'wp-block-site-tagline__placeholder':
-				! canUserEdit && ! readOnlySiteTagLine,
+			'wp-block-site-tagline__placeholder': ! canUserEdit && ! tagline,
 		} ),
 	} );
 	const siteTaglineContent = canUserEdit ? (
 		<RichText
 			allowedFormats={ [] }
-			onChange={ setSiteTagline }
+			onChange={ setTagline }
 			aria-label={ __( 'Site tagline text' ) }
 			placeholder={ __( 'Write site tagline…' ) }
 			tagName="p"
-			value={ siteTagline }
+			value={ tagline }
 			disableLineBreaks
 			__unstableOnSplitAtEnd={ () =>
 				insertBlocksAfter( createBlock( getDefaultBlockName() ) )
@@ -58,9 +67,7 @@ export default function SiteTaglineEdit( {
 			{ ...blockProps }
 		/>
 	) : (
-		<p { ...blockProps }>
-			{ readOnlySiteTagLine || __( 'Site Tagline placeholder' ) }
-		</p>
+		<p { ...blockProps }>{ tagline || __( 'Site Tagline placeholder' ) }</p>
 	);
 	return (
 		<>

package/src/site-title/edit/index.js

@@ -6,8 +6,8 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { useSelect } from '@wordpress/data';
-import { useEntityProp, store as coreStore } from '@wordpress/core-data';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
 import { __ } from '@wordpress/i18n';
 import {
 	RichText,
@@ -31,21 +31,31 @@ export default function SiteTitleEdit( {
 	insertBlocksAfter,
 } ) {
 	const { level, textAlign, isLink, linkTarget } = attributes;
-	const [ title, setTitle ] = useEntityProp( 'root', 'site', 'title' );
-	const { canUserEdit, readOnlyTitle } = useSelect( ( select ) => {
-		const { canUser, getEntityRecord } = select( coreStore );
-		const siteData = getEntityRecord( 'root', '__unstableBase' );
+	const { canUserEdit, title } = useSelect( ( select ) => {
+		const { canUser, getEntityRecord, getEditedEntityRecord } =
+			select( coreStore );
+		const canEdit = canUser( 'update', 'settings' );
+		const settings = canEdit ? getEditedEntityRecord( 'root', 'site' ) : {};
+		const readOnlySettings = getEntityRecord( 'root', '__unstableBase' );
+
 		return {
-			canUserEdit: canUser( 'update', 'settings' ),
-			readOnlyTitle: decodeEntities( siteData?.name ),
+			canUserEdit: canEdit,
+			title: canEdit ? settings?.title : readOnlySettings?.name,
 		};
 	}, [] );
+	const { editEntityRecord } = useDispatch( coreStore );
+
+	function setTitle( newTitle ) {
+		editEntityRecord( 'root', 'site', undefined, {
+			title: newTitle,
+		} );
+	}
+
 	const TagName = level === 0 ? 'p' : `h${ level }`;
 	const blockProps = useBlockProps( {
 		className: classnames( {
 			[ `has-text-align-${ textAlign }` ]: textAlign,
-			'wp-block-site-title__placeholder':
-				! canUserEdit && ! readOnlyTitle,
+			'wp-block-site-title__placeholder': ! canUserEdit && ! title,
 		} ),
 	} );
 	const siteTitleContent = canUserEdit ? (
@@ -71,10 +81,14 @@ export default function SiteTitleEdit( {
 					href="#site-title-pseudo-link"
 					onClick={ ( event ) => event.preventDefault() }
 				>
-					{ readOnlyTitle || __( 'Site Title placeholder' ) }
+					{ decodeEntities( title ) ||
+						__( 'Site Title placeholder' ) }
 				</a>
 			) : (
-				<span>{ title || readOnlyTitle }</span>
+				<span>
+					{ decodeEntities( title ) ||
+						__( 'Site Title placeholder' ) }
+				</span>
 			) }
 		</TagName>
 	);

package/src/social-link/block.json

@@ -16,6 +16,9 @@
 		},
 		"label": {
 			"type": "string"
+		},
+		"rel": {
+			"type": "string"
 		}
 	},
 	"usesContext": [

package/src/social-link/edit.js

@@ -66,7 +66,7 @@ const SocialLinkEdit = ( {
 	isSelected,
 	setAttributes,
 } ) => {
-	const { url, service, label } = attributes;
+	const { url, service, label, rel } = attributes;
 	const { showLabels, iconColorValue, iconBackgroundColorValue } = context;
 	const [ showURLPopover, setPopover ] = useState( false );
 	const classes = classNames( 'wp-social-link', 'wp-social-link-' + service, {
@@ -113,6 +113,13 @@ const SocialLinkEdit = ( {
 					</PanelRow>
 				</PanelBody>
 			</InspectorControls>
+			<InspectorControls __experimentalGroup="advanced">
+				<TextControl
+					label={ __( 'Link rel' ) }
+					value={ rel || '' }
+					onChange={ ( value ) => setAttributes( { rel: value } ) }
+				/>
+			</InspectorControls>
 			<li { ...blockProps }>
 				<Button
 					className="wp-block-social-link-anchor"

package/src/social-link/index.php

@@ -20,6 +20,7 @@ function render_block_core_social_link( $attributes, $content, $block ) {
 	$service     = ( isset( $attributes['service'] ) ) ? $attributes['service'] : 'Icon';
 	$url         = ( isset( $attributes['url'] ) ) ? $attributes['url'] : false;
 	$label       = ( isset( $attributes['label'] ) ) ? $attributes['label'] : block_core_social_link_get_name( $service );
+	$rel         = ( isset( $attributes['rel'] ) ) ? $attributes['rel'] : '';
 	$show_labels = array_key_exists( 'showLabels', $block->context ) ? $block->context['showLabels'] : false;
 
 	// Don't render a link if there is no URL set.
@@ -43,11 +44,6 @@ function render_block_core_social_link( $attributes, $content, $block ) {
 		$url = 'https://' . $url;
 	}
 
-	$rel_target_attributes = '';
-	if ( $open_in_new_tab ) {
-		$rel_target_attributes = 'rel="noopener nofollow" target="_blank"';
-	}
-
 	$icon               = block_core_social_link_get_icon( $service );
 	$wrapper_attributes = get_block_wrapper_attributes(
 		array(
@@ -57,13 +53,21 @@ function render_block_core_social_link( $attributes, $content, $block ) {
 	);
 
 	$link  = '<li ' . $wrapper_attributes . '>';
-	$link .= '<a href="' . esc_url( $url ) . '" ' . $rel_target_attributes . ' class="wp-block-social-link-anchor">';
+	$link .= '<a href="' . esc_url( $url ) . '" class="wp-block-social-link-anchor">';
 	$link .= $icon;
 	$link .= '<span class="wp-block-social-link-label' . ( $show_labels ? '' : ' screen-reader-text' ) . '">';
 	$link .= esc_html( $label );
 	$link .= '</span></a></li>';
 
-	return $link;
+	$w = new WP_HTML_Tag_Processor( $link );
+	$w->next_tag( 'a' );
+	if ( $open_in_new_tab ) {
+		$w->set_attribute( 'rel', esc_attr( $rel ) . ' noopener nofollow' );
+		$w->set_attribute( 'target', '_blank' );
+	} elseif ( '' !== $rel ) {
+		$w->set_attribute( 'rel', esc_attr( $rel ) );
+	}
+	return $w;
 }
 
 /**

package/src/social-link/test/index.native.js

@@ -33,7 +33,7 @@ describe( '<SocialLinkEdit/>', () => {
 
 		// Act
 		fireEvent.press(
-			await waitFor( () => subject.getByA11yLabel( 'Add block' ) )
+			await waitFor( () => subject.getByLabelText( 'Add block' ) )
 		);
 		fireEvent.changeText(
 			await waitFor( () =>
@@ -43,13 +43,13 @@ describe( '<SocialLinkEdit/>', () => {
 		);
 		fireEvent.press(
 			await waitFor( () =>
-				subject.getByA11yLabel( 'Social Icons block' )
+				subject.getByLabelText( 'Social Icons block' )
 			)
 		);
 		fireEvent(
 			await waitFor( () =>
 				within(
-					subject.getByA11yLabel( /Social Icons Block. Row 1/ )
+					subject.getByLabelText( /Social Icons Block. Row 1/ )
 				).getByTestId( 'block-list-wrapper' )
 			),
 			'layout',
@@ -59,22 +59,22 @@ describe( '<SocialLinkEdit/>', () => {
 		// Assert
 		expect(
 			await waitFor( () =>
-				subject.getByA11yLabel( /WordPress social icon/ )
+				subject.getByLabelText( /WordPress social icon/ )
 			)
 		).toBeDefined();
 		expect(
 			await waitFor( () =>
-				subject.getByA11yLabel( /Facebook social icon/ )
+				subject.getByLabelText( /Facebook social icon/ )
 			)
 		).toBeDefined();
 		expect(
 			await waitFor( () =>
-				subject.getByA11yLabel( /Twitter social icon/ )
+				subject.getByLabelText( /Twitter social icon/ )
 			)
 		).toBeDefined();
 		expect(
 			await waitFor( () =>
-				subject.getByA11yLabel( /Instagram social icon/ )
+				subject.getByLabelText( /Instagram social icon/ )
 			)
 		).toBeDefined();
 	} );
@@ -90,7 +90,7 @@ describe( '<SocialLinkEdit/>', () => {
 
 		// Act
 		fireEvent.press(
-			await waitFor( () => subject.getByA11yLabel( 'Add block' ) )
+			await waitFor( () => subject.getByLabelText( 'Add block' ) )
 		);
 		fireEvent.changeText(
 			await waitFor( () =>
@@ -100,13 +100,13 @@ describe( '<SocialLinkEdit/>', () => {
 		);
 		fireEvent.press(
 			await waitFor( () =>
-				subject.getByA11yLabel( 'Social Icons block' )
+				subject.getByLabelText( 'Social Icons block' )
 			)
 		);
 		fireEvent(
 			await waitFor( () =>
 				within(
-					subject.getByA11yLabel( /Social Icons Block. Row 1/ )
+					subject.getByLabelText( /Social Icons Block. Row 1/ )
 				).getByTestId( 'block-list-wrapper' )
 			),
 			'layout',

package/src/social-links/test/edit.native.js

@@ -88,7 +88,7 @@ describe( 'Social links block', () => {
 
 		// Check there's only one active social link
 		const socialLinks =
-			within( socialLinksBlock ).getAllByA11yLabel( / social icon/ );
+			within( socialLinksBlock ).getAllByLabelText( / social icon/ );
 		expect( socialLinks.length ).toBe( 1 );
 
 		// Check the WordPress link is shown when unselected
@@ -153,7 +153,7 @@ describe( 'Social links block', () => {
 
 	it( 'shows the ghost placeholder when no icon is active', async () => {
 		const screen = await initializeEditor();
-		const { getByA11yLabel } = screen;
+		const { getByLabelText } = screen;
 
 		// Add block
 		await addBlock( screen, 'Social Icons' );
@@ -178,11 +178,11 @@ describe( 'Social links block', () => {
 		fireEvent.press( firstLinkBlock );
 
 		// Open block actions menu
-		const blockActionsButton = getByA11yLabel( /Open Block Actions Menu/ );
+		const blockActionsButton = getByLabelText( /Open Block Actions Menu/ );
 		fireEvent.press( blockActionsButton );
 
 		// Delete the social link
-		const deleteButton = getByA11yLabel( /Remove block/ );
+		const deleteButton = getByLabelText( /Remove block/ );
 		fireEvent.press( deleteButton );
 
 		// Add Paragraph block

package/src/spacer/controls.js

@@ -4,7 +4,6 @@
 import { __ } from '@wordpress/i18n';
 import { InspectorControls, useSetting } from '@wordpress/block-editor';
 import {
-	BaseControl,
 	PanelBody,
 	__experimentalUseCustomUnits as useCustomUnits,
 	__experimentalUnitControl as UnitControl,
@@ -51,17 +50,16 @@ function DimensionInput( { label, onChange, isResizing, value = '' } ) {
 	].join( '' );
 
 	return (
-		<BaseControl label={ label } id={ inputId }>
-			<UnitControl
-				id={ inputId }
-				isResetValueOnUnitChange
-				min={ MIN_SPACER_SIZE }
-				onChange={ handleOnChange }
-				style={ { maxWidth: 80 } }
-				value={ computedValue }
-				units={ units }
-			/>
-		</BaseControl>
+		<UnitControl
+			label={ label }
+			id={ inputId }
+			isResetValueOnUnitChange
+			min={ MIN_SPACER_SIZE }
+			onChange={ handleOnChange }
+			__unstableInputWidth={ '80px' }
+			value={ computedValue }
+			units={ units }
+		/>
 	);
 }
 

package/src/spacer/test/index.native.js

@@ -28,10 +28,10 @@ afterAll( () => {
 
 describe( 'Spacer block', () => {
 	it( 'inserts block', async () => {
-		const { getByA11yLabel, getByTestId, getByText } =
+		const { getByLabelText, getByTestId, getByText } =
 			await initializeEditor();
 
-		fireEvent.press( getByA11yLabel( 'Add block' ) );
+		fireEvent.press( getByLabelText( 'Add block' ) );
 
 		const blockList = getByTestId( 'InserterUI-Blocks' );
 		// onScroll event used to force the FlatList to render all items
@@ -45,7 +45,7 @@ describe( 'Spacer block', () => {
 
 		fireEvent.press( await waitFor( () => getByText( 'Spacer' ) ) );
 
-		expect( getByA11yLabel( /Spacer Block\. Row 1/ ) ).toBeVisible();
+		expect( getByLabelText( /Spacer Block\. Row 1/ ) ).toBeVisible();
 		expect( getEditorHtml() ).toMatchSnapshot();
 	} );
 
@@ -53,17 +53,17 @@ describe( 'Spacer block', () => {
 		const initialHtml = `<!-- wp:spacer -->
 		<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
 		<!-- /wp:spacer -->`;
-		const { getByA11yLabel, getByDisplayValue, getByTestId, getByText } =
+		const { getByLabelText, getByDisplayValue, getByTestId, getByText } =
 			await initializeEditor( {
 				initialHtml,
 			} );
 
 		// Select Spacer block
-		const spacerBlock = getByA11yLabel( /Spacer Block\. Row 1/ );
+		const spacerBlock = getByLabelText( /Spacer Block\. Row 1/ );
 		fireEvent.press( spacerBlock );
 
 		// Open block settings
-		fireEvent.press( getByA11yLabel( 'Open Settings' ) );
+		fireEvent.press( getByLabelText( 'Open Settings' ) );
 		await waitFor(
 			() => getByTestId( 'block-settings-modal' ).props.isVisible
 		);
@@ -80,17 +80,17 @@ describe( 'Spacer block', () => {
 		const initialHtml = `<!-- wp:spacer -->
 		<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
 		<!-- /wp:spacer -->`;
-		const { getByA11yLabel, getByDisplayValue, getByTestId, getByText } =
+		const { getByLabelText, getByDisplayValue, getByTestId, getByText } =
 			await initializeEditor( {
 				initialHtml,
 			} );
 
 		// Select Spacer block
-		const spacerBlock = getByA11yLabel( /Spacer Block\. Row 1/ );
+		const spacerBlock = getByLabelText( /Spacer Block\. Row 1/ );
 		fireEvent.press( spacerBlock );
 
 		// Open block settings
-		fireEvent.press( getByA11yLabel( 'Open Settings' ) );
+		fireEvent.press( getByLabelText( 'Open Settings' ) );
 		await waitFor(
 			() => getByTestId( 'block-settings-modal' ).props.isVisible
 		);
@@ -111,23 +111,23 @@ describe( 'Spacer block', () => {
 		const initialHtml = `<!-- wp:spacer -->
 		<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
 		<!-- /wp:spacer -->`;
-		const { getByA11yLabel, getByTestId } = await initializeEditor( {
+		const { getByLabelText, getByTestId } = await initializeEditor( {
 			initialHtml,
 		} );
 
 		// Select Spacer block
-		const spacerBlock = getByA11yLabel( /Spacer Block\. Row 1/ );
+		const spacerBlock = getByLabelText( /Spacer Block\. Row 1/ );
 		fireEvent.press( spacerBlock );
 
 		// Open block settings
-		fireEvent.press( getByA11yLabel( 'Open Settings' ) );
+		fireEvent.press( getByLabelText( 'Open Settings' ) );
 		await waitFor(
 			() => getByTestId( 'block-settings-modal' ).props.isVisible
 		);
 
 		// Increment height
 		fireEvent(
-			getByA11yLabel( /Height\. Value is 100 Pixels \(px\)/ ),
+			getByLabelText( /Height\. Value is 100 Pixels \(px\)/ ),
 			'accessibilityAction',
 			{
 				nativeEvent: { actionName: 'increment' },
@@ -141,23 +141,23 @@ describe( 'Spacer block', () => {
 		const initialHtml = `<!-- wp:spacer -->
 		<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
 		<!-- /wp:spacer -->`;
-		const { getByA11yLabel, getByTestId } = await initializeEditor( {
+		const { getByLabelText, getByTestId } = await initializeEditor( {
 			initialHtml,
 		} );
 
 		// Select Spacer block
-		const spacerBlock = getByA11yLabel( /Spacer Block\. Row 1/ );
+		const spacerBlock = getByLabelText( /Spacer Block\. Row 1/ );
 		fireEvent.press( spacerBlock );
 
 		// Open block settings
-		fireEvent.press( getByA11yLabel( 'Open Settings' ) );
+		fireEvent.press( getByLabelText( 'Open Settings' ) );
 		await waitFor(
 			() => getByTestId( 'block-settings-modal' ).props.isVisible
 		);
 
 		// Increment height
 		fireEvent(
-			getByA11yLabel( /Height\. Value is 100 Pixels \(px\)/ ),
+			getByLabelText( /Height\. Value is 100 Pixels \(px\)/ ),
 			'accessibilityAction',
 			{
 				nativeEvent: { actionName: 'decrement' },