@wordpress/block-library 7.16.0 → 7.18.0

package/src/search/index.php

@@ -367,12 +367,12 @@ function styles_for_block_core_search( $attributes ) {
 	// Add color styles.
 	$has_text_color = ! empty( $attributes['style']['color']['text'] );
 	if ( $has_text_color ) {
-		$button_styles[] = sprintf( 'color: %s;', esc_attr( $attributes['style']['color']['text'] ) );
+		$button_styles[] = sprintf( 'color: %s;', $attributes['style']['color']['text'] );
 	}
 
 	$has_background_color = ! empty( $attributes['style']['color']['background'] );
 	if ( $has_background_color ) {
-		$button_styles[] = sprintf( 'background-color: %s;', esc_attr( $attributes['style']['color']['background'] ) );
+		$button_styles[] = sprintf( 'background-color: %s;', $attributes['style']['color']['background'] );
 	}
 
 	$has_custom_gradient = ! empty( $attributes['style']['color']['gradient'] );
@@ -381,7 +381,7 @@ function styles_for_block_core_search( $attributes ) {
 	}
 
 	// Get typography styles to be shared across inner elements.
-	$typography_styles = get_typography_styles_for_block_core_search( $attributes );
+	$typography_styles = esc_attr( get_typography_styles_for_block_core_search( $attributes ) );
 	if ( ! empty( $typography_styles ) ) {
 		$label_styles [] = $typography_styles;
 		$button_styles[] = $typography_styles;
@@ -399,9 +399,9 @@ function styles_for_block_core_search( $attributes ) {
 	}
 
 	return array(
-		'input'   => ! empty( $input_styles ) ? sprintf( ' style="%s"', safecss_filter_attr( implode( ' ', $input_styles ) ) ) : '',
-		'button'  => ! empty( $button_styles ) ? sprintf( ' style="%s"', safecss_filter_attr( implode( ' ', $button_styles ) ) ) : '',
-		'wrapper' => ! empty( $wrapper_styles ) ? sprintf( ' style="%s"', safecss_filter_attr( implode( ' ', $wrapper_styles ) ) ) : '',
+		'input'   => ! empty( $input_styles ) ? sprintf( ' style="%s"', esc_attr( safecss_filter_attr( implode( ' ', $input_styles ) ) ) ) : '',
+		'button'  => ! empty( $button_styles ) ? sprintf( ' style="%s"', esc_attr( safecss_filter_attr( implode( ' ', $button_styles ) ) ) ) : '',
+		'wrapper' => ! empty( $wrapper_styles ) ? sprintf( ' style="%s"', esc_attr( safecss_filter_attr( implode( ' ', $wrapper_styles ) ) ) ) : '',
 		'label'   => ! empty( $label_styles ) ? sprintf( ' style="%s"', esc_attr( safecss_filter_attr( implode( ' ', $label_styles ) ) ) ) : '',
 	);
 }
@@ -442,31 +442,39 @@ function get_typography_styles_for_block_core_search( $attributes ) {
 
 	// Add typography styles.
 	if ( ! empty( $attributes['style']['typography']['fontSize'] ) ) {
-		$typography_styles[] = sprintf( 'font-size: %s;', esc_attr( $attributes['style']['typography']['fontSize'] ) );
+		$typography_styles[] = sprintf(
+			'font-size: %s;',
+			wp_get_typography_font_size_value(
+				array(
+					'size' => $attributes['style']['typography']['fontSize'],
+				)
+			)
+		);
+
 	}
 
 	if ( ! empty( $attributes['style']['typography']['fontFamily'] ) ) {
-		$typography_styles[] = sprintf( 'font-family: %s;', esc_attr( $attributes['style']['typography']['fontFamily'] ) );
+		$typography_styles[] = sprintf( 'font-family: %s;', $attributes['style']['typography']['fontFamily'] );
 	}
 
 	if ( ! empty( $attributes['style']['typography']['letterSpacing'] ) ) {
-		$typography_styles[] = sprintf( 'letter-spacing: %s;', esc_attr( $attributes['style']['typography']['letterSpacing'] ) );
+		$typography_styles[] = sprintf( 'letter-spacing: %s;', $attributes['style']['typography']['letterSpacing'] );
 	}
 
 	if ( ! empty( $attributes['style']['typography']['fontWeight'] ) ) {
-		$typography_styles[] = sprintf( 'font-weight: %s;', esc_attr( $attributes['style']['typography']['fontWeight'] ) );
+		$typography_styles[] = sprintf( 'font-weight: %s;', $attributes['style']['typography']['fontWeight'] );
 	}
 
 	if ( ! empty( $attributes['style']['typography']['fontStyle'] ) ) {
-		$typography_styles[] = sprintf( 'font-style: %s;', esc_attr( $attributes['style']['typography']['fontStyle'] ) );
+		$typography_styles[] = sprintf( 'font-style: %s;', $attributes['style']['typography']['fontStyle'] );
 	}
 
 	if ( ! empty( $attributes['style']['typography']['lineHeight'] ) ) {
-		$typography_styles[] = sprintf( 'line-height: %s;', esc_attr( $attributes['style']['typography']['lineHeight'] ) );
+		$typography_styles[] = sprintf( 'line-height: %s;', $attributes['style']['typography']['lineHeight'] );
 	}
 
 	if ( ! empty( $attributes['style']['typography']['textTransform'] ) ) {
-		$typography_styles[] = sprintf( 'text-transform: %s;', esc_attr( $attributes['style']['typography']['textTransform'] ) );
+		$typography_styles[] = sprintf( 'text-transform: %s;', $attributes['style']['typography']['textTransform'] );
 	}
 
 	return implode( '', $typography_styles );

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 );
@@ -81,12 +81,12 @@ const SiteLogo = ( {
 	} );
 	const { imageEditing, maxWidth, title } = useSelect( ( select ) => {
 		const { getSettings } = select( blockEditorStore );
-		const siteEntities = select( coreStore ).getEditedEntityRecord(
+		const siteEntities = select( coreStore ).getEntityRecord(
 			'root',
-			'site'
+			'__unstableBase'
 		);
 		return {
-			title: siteEntities.title,
+			title: siteEntities?.name,
 			...pick( getSettings(), [ 'imageEditing', 'maxWidth' ] ),
 		};
 	}, [] );
@@ -370,12 +370,14 @@ export default function LogoEdit( {
 	} = useSelect( ( select ) => {
 		const { canUser, getEntityRecord, getEditedEntityRecord } =
 			select( coreStore );
-		const siteSettings = getEditedEntityRecord( 'root', 'site' );
-		const siteData = getEntityRecord( 'root', '__unstableBase' );
-		const _siteLogo = siteSettings?.site_logo;
-		const _readOnlyLogo = siteData?.site_logo;
 		const _canUserEdit = canUser( 'update', 'settings' );
-		const _siteLogoId = _canUserEdit ? _siteLogo : _readOnlyLogo;
+		const siteSettings = _canUserEdit
+			? getEditedEntityRecord( 'root', 'site' )
+			: undefined;
+		const siteData = getEntityRecord( 'root', '__unstableBase' );
+		const _siteLogoId = _canUserEdit
+			? siteSettings?.site_logo
+			: siteData?.site_logo;
 		const _siteIconId = siteSettings?.site_icon;
 		const mediaItem =
 			_siteLogoId &&

package/src/site-logo/editor.scss

@@ -47,6 +47,7 @@
 
 	// Style the placeholder.
 	.components-placeholder {
+		display: flex;
 		justify-content: center;
 		align-items: center;
 		padding: 0;

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/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 }
+		/>
 	);
 }