@wordpress/block-library 8.31.0 → 8.33.0

package/src/site-logo/edit.js

@@ -11,7 +11,6 @@ import {
 	createInterpolateElement,
 	useEffect,
 	useState,
-	useRef,
 } from '@wordpress/element';
 import { __, isRTL } from '@wordpress/i18n';
 import {
@@ -50,11 +49,6 @@ import { store as noticesStore } from '@wordpress/notices';
 /**
  * Internal dependencies
  */
-import useClientWidth from '../image/use-client-width';
-
-/**
- * Module constants
- */
 import { MIN_SIZE } from '../image/constants';
 
 const ALLOWED_MEDIA_TYPES = [ 'image' ];
@@ -63,7 +57,6 @@ const ACCEPT_MEDIA_STRING = 'image/*';
 const SiteLogo = ( {
 	alt,
 	attributes: { align, width, height, isLink, linkTarget, shouldSyncIcon },
-	containerRef,
 	isSelected,
 	setAttributes,
 	setLogo,
@@ -74,16 +67,13 @@ const SiteLogo = ( {
 	setIcon,
 	canUserEdit,
 } ) => {
-	const clientWidth = useClientWidth( containerRef, [ align ] );
 	const isLargeViewport = useViewportMatch( 'medium' );
 	const isWideAligned = [ 'wide', 'full' ].includes( align );
 	const isResizable = ! isWideAligned && isLargeViewport;
 	const [ { naturalWidth, naturalHeight }, setNaturalSize ] = useState( {} );
 	const [ isEditingImage, setIsEditingImage ] = useState( false );
 	const { toggleSelection } = useDispatch( blockEditorStore );
-	const classes = classnames( 'custom-logo-link', {
-		'is-transient': isBlobURL( logoUrl ),
-	} );
+	const classes = classnames( 'custom-logo-link' );
 	const { imageEditing, maxWidth, title } = useSelect( ( select ) => {
 		const settings = select( blockEditorStore ).getSettings();
 		const siteEntities = select( coreStore ).getEntityRecord(
@@ -121,17 +111,20 @@ const SiteLogo = ( {
 	}
 
 	const img = (
-		<img
-			className="custom-logo"
-			src={ logoUrl }
-			alt={ alt }
-			onLoad={ ( event ) => {
-				setNaturalSize( {
-					naturalWidth: event.target.naturalWidth,
-					naturalHeight: event.target.naturalHeight,
-				} );
-			} }
-		/>
+		<>
+			<img
+				className="custom-logo"
+				src={ logoUrl }
+				alt={ alt }
+				onLoad={ ( event ) => {
+					setNaturalSize( {
+						naturalWidth: event.target.naturalWidth,
+						naturalHeight: event.target.naturalHeight,
+					} );
+				} }
+			/>
+			{ isBlobURL( logoUrl ) && <Spinner /> }
+		</>
 	);
 
 	let imgWrapper = img;
@@ -154,14 +147,7 @@ const SiteLogo = ( {
 		);
 	}
 
-	let imageWidthWithinContainer;
-
-	if ( clientWidth && naturalWidth && naturalHeight ) {
-		const exceedMaxWidth = naturalWidth > clientWidth;
-		imageWidthWithinContainer = exceedMaxWidth ? clientWidth : naturalWidth;
-	}
-
-	if ( ! isResizable || ! imageWidthWithinContainer ) {
+	if ( ! isResizable || ! naturalWidth || ! naturalHeight ) {
 		return <div style={ { width, height } }>{ imgWrapper }</div>;
 	}
 
@@ -227,7 +213,6 @@ const SiteLogo = ( {
 				url={ logoUrl }
 				width={ currentWidth }
 				height={ currentHeight }
-				clientWidth={ clientWidth }
 				naturalHeight={ naturalHeight }
 				naturalWidth={ naturalWidth }
 				onSaveImage={ ( imageAttributes ) => {
@@ -408,7 +393,6 @@ export default function LogoEdit( {
 	isSelected,
 } ) {
 	const { width, shouldSyncIcon } = attributes;
-	const ref = useRef();
 
 	const {
 		siteLogoId,
@@ -451,6 +435,7 @@ export default function LogoEdit( {
 		};
 	}, [] );
 	const { getSettings } = useSelect( blockEditorStore );
+	const [ temporaryURL, setTemporaryURL ] = useState();
 
 	const { editEntityRecord } = useDispatch( coreStore );
 
@@ -497,6 +482,7 @@ export default function LogoEdit( {
 
 		if ( ! media.id && media.url ) {
 			// This is a temporary blob image.
+			setTemporaryURL( media.url );
 			setLogo( undefined );
 			return;
 		}
@@ -512,6 +498,7 @@ export default function LogoEdit( {
 	const { createErrorNotice } = useDispatch( noticesStore );
 	const onUploadError = ( message ) => {
 		createErrorNotice( message, { type: 'snackbar' } );
+		setTemporaryURL();
 	};
 
 	const onFilesDrop = ( filesList ) => {
@@ -520,6 +507,7 @@ export default function LogoEdit( {
 			filesList,
 			onFileChange( [ image ] ) {
 				if ( isBlobURL( image?.url ) ) {
+					setTemporaryURL( image.url );
 					return;
 				}
 				onInitialSelectLogo( image );
@@ -534,7 +522,7 @@ export default function LogoEdit( {
 		onError: onUploadError,
 		onRemoveLogo,
 	};
-	const controls = canUserEdit && logoUrl && (
+	const controls = canUserEdit && logoUrl && ! temporaryURL && (
 		<BlockControls group="other">
 			<SiteLogoReplaceFlow { ...mediaReplaceFlowProps } />
 		</BlockControls>
@@ -545,23 +533,32 @@ export default function LogoEdit( {
 	if ( isLoading ) {
 		logoImage = <Spinner />;
 	}
-	if ( !! logoUrl ) {
+
+	// Reset temporary url when logoUrl is available.
+	useEffect( () => {
+		if ( logoUrl && temporaryURL ) {
+			setTemporaryURL();
+		}
+	}, [ logoUrl, temporaryURL ] );
+
+	if ( !! logoUrl || !! temporaryURL ) {
 		logoImage = (
-			<SiteLogo
-				alt={ alt }
-				attributes={ attributes }
-				className={ className }
-				containerRef={ ref }
-				isSelected={ isSelected }
-				setAttributes={ setAttributes }
-				logoUrl={ logoUrl }
-				setLogo={ setLogo }
-				logoId={ mediaItemData?.id || siteLogoId }
-				siteUrl={ url }
-				setIcon={ setIcon }
-				iconId={ siteIconId }
-				canUserEdit={ canUserEdit }
-			/>
+			<>
+				<SiteLogo
+					alt={ alt }
+					attributes={ attributes }
+					className={ className }
+					isSelected={ isSelected }
+					setAttributes={ setAttributes }
+					logoUrl={ temporaryURL || logoUrl }
+					setLogo={ setLogo }
+					logoId={ mediaItemData?.id || siteLogoId }
+					siteUrl={ url }
+					setIcon={ setIcon }
+					iconId={ siteIconId }
+					canUserEdit={ canUserEdit }
+				/>
+			</>
 		);
 	}
 	const placeholder = ( content ) => {
@@ -586,12 +583,10 @@ export default function LogoEdit( {
 
 	const classes = classnames( className, {
 		'is-default-size': ! width,
+		'is-transient': temporaryURL,
 	} );
 
-	const blockProps = useBlockProps( {
-		ref,
-		className: classes,
-	} );
+	const blockProps = useBlockProps( { className: classes } );
 
 	const label = __( 'Add a site logo' );
 
@@ -652,8 +647,8 @@ export default function LogoEdit( {
 		<div { ...blockProps }>
 			{ controls }
 			{ mediaInspectorPanel }
-			{ !! logoUrl && logoImage }
-			{ ! logoUrl && ! canUserEdit && (
+			{ ( !! logoUrl || !! temporaryURL ) && logoImage }
+			{ ! temporaryURL && ! logoUrl && ! canUserEdit && (
 				<Placeholder className="site-logo_placeholder">
 					{ !! isLoading && (
 						<span className="components-placeholder__preview">
@@ -662,7 +657,7 @@ export default function LogoEdit( {
 					) }
 				</Placeholder>
 			) }
-			{ ! logoUrl && canUserEdit && (
+			{ ! temporaryURL && ! logoUrl && canUserEdit && (
 				<MediaPlaceholder
 					onSelect={ onInitialSelectLogo }
 					accept={ ACCEPT_MEDIA_STRING }

package/src/site-logo/editor.scss

@@ -17,10 +17,6 @@
 		&:focus {
 			box-shadow: none;
 		}
-
-		&.is-transient img {
-			opacity: 0.3;
-		}
 	}
 
 	img {
@@ -28,10 +24,27 @@
 		height: auto;
 		max-width: 100%;
 	}
+
+	&.is-transient {
+		position: relative;
+
+		img {
+			opacity: 0.3;
+		}
+
+		// Shown while image is being uploaded.
+		.components-spinner {
+			position: absolute;
+			top: 50%;
+			left: 50%;
+			transform: translate(-50%, -50%);
+			margin: 0;
+		}
+	}
 }
 
 // Provide special styling for the placeholder.
-// @todo: this particular minimal style of placeholder could be componentized further.
+// @todo this particular minimal style of placeholder could be componentized further.
 .wp-block-site-logo.wp-block-site-logo {
 
 	&.is-default-size .components-placeholder {
@@ -54,7 +67,7 @@
 		border-radius: inherit;
 
 		// Provide a minimum size for the placeholder, for when the logo is resized.
-		// @todo: resizing is currently only possible by adding an image, resizing,
+		// @todo resizing is currently only possible by adding an image, resizing,
 		// and then removing the image again. We might want to enable resizing on the
 		// placeholder itself.
 		min-height: $grid-unit-60;

package/src/site-tagline/block.json

@@ -10,6 +10,10 @@
 	"attributes": {
 		"textAlign": {
 			"type": "string"
+		},
+		"level": {
+			"type": "number",
+			"default": 0
 		}
 	},
 	"example": {},

package/src/site-tagline/edit.js

@@ -12,17 +12,20 @@ import {
 	AlignmentControl,
 	useBlockProps,
 	BlockControls,
+	HeadingLevelDropdown,
 	RichText,
 } from '@wordpress/block-editor';
 import { __ } from '@wordpress/i18n';
 import { createBlock, getDefaultBlockName } from '@wordpress/blocks';
 
+const HEADING_LEVELS = [ 0, 1, 2, 3, 4, 5, 6 ];
+
 export default function SiteTaglineEdit( {
 	attributes,
 	setAttributes,
 	insertBlocksAfter,
 } ) {
-	const { textAlign } = attributes;
+	const { textAlign, level } = attributes;
 	const { canUserEdit, tagline } = useSelect( ( select ) => {
 		const { canUser, getEntityRecord, getEditedEntityRecord } =
 			select( coreStore );
@@ -38,6 +41,7 @@ export default function SiteTaglineEdit( {
 		};
 	}, [] );
 
+	const TagName = level === 0 ? 'p' : `h${ level }`;
 	const { editEntityRecord } = useDispatch( coreStore );
 
 	function setTagline( newTagline ) {
@@ -58,7 +62,7 @@ export default function SiteTaglineEdit( {
 			onChange={ setTagline }
 			aria-label={ __( 'Site tagline text' ) }
 			placeholder={ __( 'Write site tagline…' ) }
-			tagName="p"
+			tagName={ TagName }
 			value={ tagline }
 			disableLineBreaks
 			__unstableOnSplitAtEnd={ () =>
@@ -67,11 +71,20 @@ export default function SiteTaglineEdit( {
 			{ ...blockProps }
 		/>
 	) : (
-		<p { ...blockProps }>{ tagline || __( 'Site Tagline placeholder' ) }</p>
+		<TagName { ...blockProps }>
+			{ tagline || __( 'Site Tagline placeholder' ) }
+		</TagName>
 	);
 	return (
 		<>
 			<BlockControls group="block">
+				<HeadingLevelDropdown
+					options={ HEADING_LEVELS }
+					value={ level }
+					onChange={ ( newLevel ) =>
+						setAttributes( { level: newLevel } )
+					}
+				/>
 				<AlignmentControl
 					onChange={ ( newAlign ) =>
 						setAttributes( { textAlign: newAlign } )

package/src/site-tagline/index.php

@@ -19,11 +19,18 @@ function render_block_core_site_tagline( $attributes ) {
 	if ( ! $site_tagline ) {
 		return;
 	}
+
+	$tag_name           = 'p';
 	$align_class_name   = empty( $attributes['textAlign'] ) ? '' : "has-text-align-{$attributes['textAlign']}";
 	$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => $align_class_name ) );
 
+	if ( isset( $attributes['level'] ) && 0 !== $attributes['level'] ) {
+		$tag_name = 'h' . (int) $attributes['level'];
+	}
+
 	return sprintf(
-		'<p %1$s>%2$s</p>',
+		'<%1$s %2$s>%3$s</%1$s>',
+		$tag_name,
 		$wrapper_attributes,
 		$site_tagline
 	);
@@ -42,4 +49,5 @@ function register_block_core_site_tagline() {
 		)
 	);
 }
+
 add_action( 'init', 'register_block_core_site_tagline' );

package/src/social-link/block.json

@@ -5,7 +5,7 @@
 	"title": "Social Icon",
 	"category": "widgets",
 	"parent": [ "core/social-links" ],
-	"description": "Display an icon linking to a social media profile or site.",
+	"description": "Display an icon linking to a social profile or site.",
 	"textdomain": "default",
 	"attributes": {
 		"url": {

package/src/social-link/edit.js

@@ -23,7 +23,7 @@ import {
 	PanelRow,
 	TextControl,
 } from '@wordpress/components';
-import { __, sprintf } from '@wordpress/i18n';
+import { __ } from '@wordpress/i18n';
 import { keyboardReturn } from '@wordpress/icons';
 
 /**
@@ -58,7 +58,9 @@ const SocialLinkURLPopover = ( {
 						onChange={ ( nextURL ) =>
 							setAttributes( { url: nextURL } )
 						}
-						placeholder={ __( 'Enter address' ) }
+						placeholder={ __( 'Enter social link' ) }
+						label={ __( 'Enter social link' ) }
+						hideLabelFromVision
 						disableSuggestions
 						onKeyDown={ ( event ) => {
 							if (
@@ -91,7 +93,7 @@ const SocialLinkEdit = ( {
 	setAttributes,
 	clientId,
 } ) => {
-	const { url, service, label, rel } = attributes;
+	const { url, service, label = '', rel } = attributes;
 	const {
 		showLabels,
 		iconColor,
@@ -113,7 +115,12 @@ const SocialLinkEdit = ( {
 
 	const IconComponent = getIconBySite( service );
 	const socialLinkName = getNameBySite( service );
-	const socialLinkLabel = label ?? socialLinkName;
+	// The initial label (ie. the link text) is an empty string.
+	// We want to prevent empty links so that the link text always fallbacks to
+	// the social name, even when users enter and save an empty string or only
+	// spaces. The PHP render callback fallbacks to the social name as well.
+	const socialLinkText = label.trim() === '' ? socialLinkName : label;
+
 	const blockProps = useBlockProps( {
 		className: classes,
 		style: {
@@ -125,25 +132,19 @@ const SocialLinkEdit = ( {
 	return (
 		<>
 			<InspectorControls>
-				<PanelBody
-					title={ sprintf(
-						/* translators: %s: name of the social service. */
-						__( '%s label' ),
-						socialLinkName
-					) }
-					initialOpen={ false }
-				>
+				<PanelBody title={ __( 'Settings' ) }>
 					<PanelRow>
 						<TextControl
 							__nextHasNoMarginBottom
-							label={ __( 'Link label' ) }
+							label={ __( 'Link text' ) }
 							help={ __(
-								'Briefly describe the link to help screen reader users.'
+								'The link text is visible when enabled from the parent Social Icons block.'
 							) }
-							value={ label || '' }
+							value={ label }
 							onChange={ ( value ) =>
-								setAttributes( { label: value || undefined } )
+								setAttributes( { label: value } )
 							}
+							placeholder={ socialLinkName }
 						/>
 					</PanelRow>
 				</PanelBody>
@@ -168,18 +169,18 @@ const SocialLinkEdit = ( {
 							'screen-reader-text': ! showLabels,
 						} ) }
 					>
-						{ socialLinkLabel }
+						{ socialLinkText }
 					</span>
-					{ isSelected && showURLPopover && (
-						<SocialLinkURLPopover
-							url={ url }
-							setAttributes={ setAttributes }
-							setPopover={ setPopover }
-							popoverAnchor={ popoverAnchor }
-							clientId={ clientId }
-						/>
-					) }
 				</Button>
+				{ isSelected && showURLPopover && (
+					<SocialLinkURLPopover
+						url={ url }
+						setAttributes={ setAttributes }
+						setPopover={ setPopover }
+						popoverAnchor={ popoverAnchor }
+						clientId={ clientId }
+					/>
+				) }
 			</li>
 		</>
 	);

package/src/social-link/index.php

@@ -19,9 +19,11 @@
 function render_block_core_social_link( $attributes, $content, $block ) {
 	$open_in_new_tab = isset( $block->context['openInNewTab'] ) ? $block->context['openInNewTab'] : false;
 
+	$text = ! empty( $attributes['label'] ) ? trim( $attributes['label'] ) : '';
+
 	$service     = isset( $attributes['service'] ) ? $attributes['service'] : 'Icon';
 	$url         = isset( $attributes['url'] ) ? $attributes['url'] : false;
-	$label       = ! empty( $attributes['label'] ) ? $attributes['label'] : block_core_social_link_get_name( $service );
+	$text        = $text ? $text : 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;
 
@@ -57,7 +59,7 @@ function render_block_core_social_link( $attributes, $content, $block ) {
 	$link  = '<li ' . $wrapper_attributes . '>';
 	$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' ) . '">' . esc_html( $label ) . '</span>';
+	$link .= '<span class="wp-block-social-link-label' . ( $show_labels ? '' : ' screen-reader-text' ) . '">' . esc_html( $text ) . '</span>';
 	$link .= '</a></li>';
 
 	$processor = new WP_HTML_Tag_Processor( $link );

package/src/social-links/block.json

@@ -5,7 +5,7 @@
 	"title": "Social Icons",
 	"category": "widgets",
 	"allowedBlocks": [ "core/social-link" ],
-	"description": "Display icons linking to your social media profiles or sites.",
+	"description": "Display icons linking to your social profiles or sites.",
 	"keywords": [ "links" ],
 	"textdomain": "default",
 	"attributes": {

package/src/social-links/edit.js

@@ -203,7 +203,7 @@ export function SocialLinksEdit( props ) {
 					/>
 					<ToggleControl
 						__nextHasNoMarginBottom
-						label={ __( 'Show labels' ) }
+						label={ __( 'Show text' ) }
 						checked={ showLabels }
 						onChange={ () =>
 							setAttributes( { showLabels: ! showLabels } )

package/src/social-links/editor.scss

@@ -4,13 +4,6 @@
 		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.
@@ -74,7 +67,6 @@
 .wp-block-social-links .wp-block-social-links__social-prompt {
 	min-height: $button-size-small;
 	list-style: none;
-	order: 2; // Move after the appender button. Because this element is non-interactive, it does not affect tab order.
 
 	// Show as block UI.
 	font-family: $default-font;
@@ -93,7 +85,7 @@
 }
 
 // Improve the preview, ensure buttons are fully opaque despite being disabled.
-// @todo: Look at improving the preview component to make this unnecessary.
+// @todo Look at improving the preview component to make this unnecessary.
 .block-editor-block-preview__content .components-button:disabled {
 	opacity: 1;
 }

package/src/table/theme.scss

@@ -1,6 +1,4 @@
 .wp-block-table {
-	margin: 0 0 1em 0;
-
 	td,
 	th {
 		word-break: normal;
@@ -10,3 +8,7 @@
 		@include caption-style-theme();
 	}
 }
+
+:where(.wp-block-table) {
+	margin: 0 0 1em 0;
+}