@wordpress/block-library 7.17.0 → 7.18.0

package/src/navigation/editor.scss

@@ -261,10 +261,6 @@ $color-control-label-height: 20px;
 	}
 }
 
-.wp-block-navigation-placeholder .components-spinner {
-	margin-top: 0;
-}
-
 // Unselected state.
 .wp-block-navigation-placeholder__preview {
 	display: flex;
@@ -567,6 +563,10 @@ body.editor-styles-wrapper
 	padding: $grid-unit-10 $grid-unit-15;
 }
 
+.wp-block-navigation .wp-block-navigation__uncontrolled-inner-blocks-loading-indicator {
+	margin-top: 0;
+}
+
 @keyframes fadeouthalf {
 	0% {
 		opacity: 1;

package/src/navigation/style.scss

@@ -359,7 +359,9 @@ button.wp-block-navigation-item__content {
 
 // Provide a default padding for submenus who should always have some, regardless of the top level menu items.
 :where(.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item a:not(.wp-element-button)),
-:where(.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-submenu a:not(.wp-element-button)) {
+:where(.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-submenu a:not(.wp-element-button)),
+:where(.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-submenu button.wp-block-navigation-item__content),
+:where(.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-pages-list__item button.wp-block-navigation-item__content) {
 	padding: 0.5em 1em;
 }
 

package/src/navigation-link/edit.js

@@ -2,7 +2,8 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { escape, unescape } from 'lodash';
+import escapeHtml from 'escape-html';
+import { unescape } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -262,8 +263,8 @@ export const updateNavigationLinkBlockAttributes = (
 	// - https://github.com/WordPress/gutenberg/pull/41063
 	// - https://github.com/WordPress/gutenberg/pull/18617.
 	const label = useNewLabel
-		? escape( newLabel )
-		: originalLabel || escape( newUrlWithoutHttp );
+		? escapeHtml( newLabel )
+		: originalLabel || escapeHtml( newUrlWithoutHttp );
 
 	// In https://github.com/WordPress/gutenberg/pull/24670 we decided to use "tag" in favor of "post_tag"
 	const type = newType === 'post_tag' ? 'tag' : newType.replace( '-', '_' );
@@ -846,7 +847,7 @@ export default function NavigationLinkEdit( {
 					) }
 					{ isLinkOpen && (
 						<Popover
-							position="bottom center"
+							placement="bottom"
 							onClose={ () => setIsLinkOpen( false ) }
 							anchor={ popoverAnchor }
 							shift

package/src/navigation-submenu/edit.js

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { escape, without } from 'lodash';
+import escapeHtml from 'escape-html';
 
 /**
  * WordPress dependencies
@@ -248,8 +248,8 @@ export const updateNavigationLinkBlockAttributes = (
 		normalizedTitle !== normalizedURL &&
 		originalLabel !== title;
 	const label = escapeTitle
-		? escape( title )
-		: originalLabel || escape( normalizedURL );
+		? escapeHtml( title )
+		: originalLabel || escapeHtml( normalizedURL );
 
 	// In https://github.com/WordPress/gutenberg/pull/24670 we decided to use "tag" in favor of "post_tag"
 	const type = newType === 'post_tag' ? 'tag' : newType.replace( '-', '_' );
@@ -486,7 +486,9 @@ export default function NavigationSubmenuEdit( {
 	const innerBlocksColors = getColors( context, true );
 
 	const allowedBlocks = isAtMaxNesting
-		? without( ALLOWED_BLOCKS, 'core/navigation-submenu' )
+		? ALLOWED_BLOCKS.filter(
+				( blockName ) => blockName !== 'core/navigation-submenu'
+		  )
 		: ALLOWED_BLOCKS;
 
 	const innerBlocksProps = useInnerBlocksProps(
@@ -631,7 +633,7 @@ export default function NavigationSubmenuEdit( {
 					}
 					{ ! openSubmenusOnClick && isLinkOpen && (
 						<Popover
-							position="bottom center"
+							placement="bottom"
 							onClose={ () => setIsLinkOpen( false ) }
 							anchor={ popoverAnchor }
 							shift

package/src/page-list/edit.js

@@ -52,50 +52,64 @@ export default function PageListEdit( { context, clientId } ) {
 		style: { ...context.style?.color },
 	} );
 
-	return (
-		<>
-			{ allowConvertToLinks && (
-				<BlockControls group="other">
-					<ToolbarButton title={ __( 'Edit' ) } onClick={ openModal }>
-						{ __( 'Edit' ) }
-					</ToolbarButton>
-				</BlockControls>
-			) }
-			{ allowConvertToLinks && isOpen && (
-				<ConvertToLinksModal
-					onClose={ closeModal }
-					clientId={ clientId }
-				/>
-			) }
-			{ ! hasResolvedPages && (
+	const getBlockContent = () => {
+		if ( ! hasResolvedPages ) {
+			return (
 				<div { ...blockProps }>
 					<Spinner />
 				</div>
-			) }
+			);
+		}
 
-			{ hasResolvedPages && totalPages === null && (
+		if ( totalPages === null ) {
+			return (
 				<div { ...blockProps }>
 					<Notice status={ 'warning' } isDismissible={ false }>
 						{ __( 'Page List: Cannot retrieve Pages.' ) }
 					</Notice>
 				</div>
-			) }
+			);
+		}
 
-			{ totalPages === 0 && (
+		if ( totalPages === 0 ) {
+			return (
 				<div { ...blockProps }>
 					<Notice status={ 'info' } isDismissible={ false }>
 						{ __( 'Page List: Cannot retrieve Pages.' ) }
 					</Notice>
 				</div>
-			) }
-			{ totalPages > 0 && (
+			);
+		}
+
+		if ( totalPages > 0 ) {
+			return (
 				<ul { ...blockProps }>
 					<PageItems
 						context={ context }
 						pagesByParentId={ pagesByParentId }
 					/>
 				</ul>
+			);
+		}
+	};
+
+	return (
+		<>
+			{ allowConvertToLinks && (
+				<BlockControls group="other">
+					<ToolbarButton title={ __( 'Edit' ) } onClick={ openModal }>
+						{ __( 'Edit' ) }
+					</ToolbarButton>
+				</BlockControls>
 			) }
+			{ allowConvertToLinks && isOpen && (
+				<ConvertToLinksModal
+					onClose={ closeModal }
+					clientId={ clientId }
+				/>
+			) }
+
+			{ getBlockContent() }
 		</>
 	);
 }

package/src/post-comments-count/block.json

@@ -22,6 +22,10 @@
 				"text": true
 			}
 		},
+		"spacing": {
+			"margin": true,
+			"padding": true
+		},
 		"typography": {
 			"fontSize": true,
 			"lineHeight": true,

package/src/post-comments-form/block.json

@@ -22,6 +22,10 @@
 				"text": true
 			}
 		},
+		"spacing": {
+			"margin": true,
+			"padding": true
+		},
 		"typography": {
 			"fontSize": true,
 			"lineHeight": true,

package/src/post-comments-form/style.scss

@@ -1,4 +1,7 @@
 .wp-block-post-comments-form {
+	// This block has customizable padding, border-box makes that more predictable.
+	box-sizing: border-box;
+
 	&[style*="font-weight"] :where(.comment-reply-title) {
 		font-weight: inherit;
 	}

package/src/post-comments-link/block.json

@@ -23,6 +23,10 @@
 				"link": true
 			}
 		},
+		"spacing": {
+			"margin": true,
+			"padding": true
+		},
 		"typography": {
 			"fontSize": true,
 			"lineHeight": true,

package/src/post-content/edit.js

@@ -84,8 +84,8 @@ function Content( props ) {
 	);
 }
 
-function Placeholder() {
-	const blockProps = useBlockProps();
+function Placeholder( { layoutClassNames } ) {
+	const blockProps = useBlockProps( { className: layoutClassNames } );
 	return (
 		<div { ...blockProps }>
 			<p>
@@ -118,7 +118,11 @@ function RecursionError() {
 	);
 }
 
-export default function PostContentEdit( { context, attributes } ) {
+export default function PostContentEdit( {
+	context,
+	attributes,
+	__unstableLayoutClassNames: layoutClassNames,
+} ) {
 	const { postId: contextPostId, postType: contextPostType } = context;
 	const { layout = {} } = attributes;
 	const hasAlreadyRendered = useHasRecursion( contextPostId );
@@ -132,7 +136,7 @@ export default function PostContentEdit( { context, attributes } ) {
 			{ contextPostId && contextPostType ? (
 				<Content context={ context } layout={ layout } />
 			) : (
-				<Placeholder />
+				<Placeholder layoutClassNames={ layoutClassNames } />
 			) }
 		</RecursionProvider>
 	);

package/src/pullquote/deprecated.js

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { get, includes } from 'lodash';
+import { get } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -140,7 +140,7 @@ const v4 = {
 			className,
 		} = attributes;
 
-		const isSolidColorStyle = includes( className, SOLID_COLOR_CLASS );
+		const isSolidColorStyle = className?.includes( SOLID_COLOR_CLASS );
 
 		let figureClasses, figureStyles;
 
@@ -206,7 +206,7 @@ const v4 = {
 		customTextColor,
 		...attributes
 	} ) {
-		const isSolidColorStyle = includes( className, SOLID_COLOR_CLASS );
+		const isSolidColorStyle = className?.includes( SOLID_COLOR_CLASS );
 		let style;
 
 		if ( customMainColor ) {
@@ -270,7 +270,7 @@ const v3 = {
 			figureStyle,
 		} = attributes;
 
-		const isSolidColorStyle = includes( className, SOLID_COLOR_CLASS );
+		const isSolidColorStyle = className?.includes( SOLID_COLOR_CLASS );
 
 		let figureClasses, figureStyles;
 
@@ -345,7 +345,7 @@ const v3 = {
 		customTextColor,
 		...attributes
 	} ) {
-		const isSolidColorStyle = includes( className, SOLID_COLOR_CLASS );
+		const isSolidColorStyle = className?.includes( SOLID_COLOR_CLASS );
 		let style;
 
 		if ( customMainColor ) {
@@ -416,7 +416,7 @@ const v2 = {
 			citation,
 			className,
 		} = attributes;
-		const isSolidColorStyle = includes( className, SOLID_COLOR_CLASS );
+		const isSolidColorStyle = className?.includes( SOLID_COLOR_CLASS );
 
 		let figureClass, figureStyles;
 		// Is solid color style
@@ -484,7 +484,7 @@ const v2 = {
 		customTextColor,
 		...attributes
 	} ) {
-		const isSolidColorStyle = includes( className, SOLID_COLOR_CLASS );
+		const isSolidColorStyle = className?.includes( SOLID_COLOR_CLASS );
 		let style = {};
 
 		if ( customMainColor ) {

package/src/search/edit.js

@@ -363,7 +363,7 @@ export default function SearchEdit( {
 									widthUnit: newUnit,
 								} );
 							} }
-							style={ { maxWidth: 80 } }
+							__unstableInputWidth={ '80px' }
 							value={ `${ width }${ widthUnit }` }
 							units={ units }
 						/>

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 );

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