@wordpress/block-library 9.6.0 → 9.7.0

package/src/post-featured-image/dimension-controls.js

@@ -134,8 +134,7 @@ const DimensionControls = ( {
 				panelId={ clientId }
 			>
 				<SelectControl
-					// TODO: Switch to `true` (40px size) if possible
-					__next40pxDefaultSize={ false }
+					__next40pxDefaultSize
 					__nextHasNoMarginBottom
 					label={ __( 'Aspect ratio' ) }
 					value={ aspectRatio }
@@ -157,6 +156,7 @@ const DimensionControls = ( {
 				panelId={ clientId }
 			>
 				<UnitControl
+					__next40pxDefaultSize
 					label={ __( 'Height' ) }
 					labelPosition="top"
 					value={ height || '' }
@@ -179,6 +179,7 @@ const DimensionControls = ( {
 				panelId={ clientId }
 			>
 				<UnitControl
+					__next40pxDefaultSize
 					label={ __( 'Width' ) }
 					labelPosition="top"
 					value={ width || '' }
@@ -235,8 +236,7 @@ const DimensionControls = ( {
 					panelId={ clientId }
 				>
 					<SelectControl
-						// TODO: Switch to `true` (40px size) if possible
-						__next40pxDefaultSize={ false }
+						__next40pxDefaultSize
 						__nextHasNoMarginBottom
 						label={ __( 'Resolution' ) }
 						value={ sizeSlug || DEFAULT_SIZE }

package/src/post-featured-image/edit.js

@@ -10,7 +10,6 @@ import { isBlobURL } from '@wordpress/blob';
 import { useEntityProp, store as coreStore } from '@wordpress/core-data';
 import { useSelect, useDispatch } from '@wordpress/data';
 import {
-	MenuItem,
 	ToggleControl,
 	PanelBody,
 	Placeholder,
@@ -309,6 +308,8 @@ export default function PostFeaturedImageEdit( {
 				mediaLibraryButton={ ( { open } ) => {
 					return (
 						<Button
+							// TODO: Switch to `true` (40px size) if possible
+							__next40pxDefaultSize={ false }
 							icon={ upload }
 							variant="primary"
 							label={ label }
@@ -366,11 +367,8 @@ export default function PostFeaturedImageEdit( {
 						accept="image/*"
 						onSelect={ onSelectImage }
 						onError={ onUploadError }
-					>
-						<MenuItem onClick={ () => setFeaturedImage( 0 ) }>
-							{ __( 'Reset' ) }
-						</MenuItem>
-					</MediaReplaceFlow>
+						onReset={ () => setFeaturedImage( 0 ) }
+					/>
 				</BlockControls>
 			) }
 			<figure { ...blockProps }>

package/src/post-featured-image/style.scss

@@ -5,7 +5,7 @@
 		display: block;
 		height: 100%;
 	}
-	img {
+	:where(img) {
 		max-width: 100%;
 		width: 100%;
 		height: auto;

package/src/query/edit/enhanced-pagination-modal.js

@@ -75,7 +75,12 @@ export default function EnhancedPaginationModal( {
 			>
 				<VStack alignment="right" spacing={ 5 }>
 					<span id={ modalDescriptionId }>{ notice }</span>
-					<Button variant="primary" onClick={ closeModal }>
+					<Button
+						// TODO: Switch to `true` (40px size) if possible
+						__next40pxDefaultSize={ false }
+						variant="primary"
+						onClick={ closeModal }
+					>
 						{ __( 'OK' ) }
 					</Button>
 				</VStack>

package/src/query/edit/query-placeholder.js

@@ -79,6 +79,8 @@ export default function QueryPlaceholder( {
 			>
 				{ !! hasPatterns && (
 					<Button
+						// TODO: Switch to `true` (40px size) if possible
+						__next40pxDefaultSize={ false }
 						variant="primary"
 						onClick={ openPatternSelectionModal }
 					>
@@ -87,6 +89,8 @@ export default function QueryPlaceholder( {
 				) }
 
 				<Button
+					// TODO: Switch to `true` (40px size) if possible
+					__next40pxDefaultSize={ false }
 					variant="secondary"
 					onClick={ () => {
 						setIsStartingBlank( true );

package/src/query-pagination/editor.scss

@@ -1,11 +1,9 @@
-$pagination-margin: 0.5em;
-
 // Center flex items. This has an equivalent in style.scss.
 .wp-block[data-align="center"] > .wp-block-query-pagination {
 	justify-content: center;
 }
 
-.editor-styles-wrapper {
+:where(.editor-styles-wrapper) {
 	.wp-block-query-pagination {
 		max-width: 100%;
 		&.block-editor-block-list__layout {
@@ -14,21 +12,3 @@ $pagination-margin: 0.5em;
 	}
 }
 
-.wp-block-query-pagination {
-	> .wp-block-query-pagination-next,
-	> .wp-block-query-pagination-previous,
-	> .wp-block-query-pagination-numbers {
-		// Override editor auto block margins.
-		margin-left: 0;
-		margin-top: $pagination-margin;
-
-		/*rtl:ignore*/
-		margin-right: $pagination-margin;
-		margin-bottom: $pagination-margin;
-
-		&:last-child {
-			/*rtl:ignore*/
-			margin-right: 0;
-		}
-	}
-}

package/src/query-pagination/style.scss

@@ -1,19 +1,4 @@
-$pagination-margin: 0.5em;
 .wp-block-query-pagination {
-	// Increased specificity to override blocks default margin.
-	> .wp-block-query-pagination-next,
-	> .wp-block-query-pagination-previous,
-	> .wp-block-query-pagination-numbers {
-		/*rtl:ignore*/
-		margin-right: $pagination-margin;
-		margin-bottom: $pagination-margin;
-
-		&:last-child {
-			/*rtl:ignore*/
-			margin-right: 0;
-		}
-	}
-
 	// This moves the next link to the right side of the container,
 	// which is important when it's the only block displayed
 	// and the block has a "space-between" justification.

package/src/site-logo/edit.js

@@ -14,7 +14,6 @@ import {
 } from '@wordpress/element';
 import { __, isRTL } from '@wordpress/i18n';
 import {
-	MenuItem,
 	PanelBody,
 	RangeControl,
 	ResizableBox,
@@ -356,22 +355,11 @@ function SiteLogoReplaceFlow( {
 	return (
 		<MediaReplaceFlow
 			{ ...mediaReplaceProps }
+			mediaURL={ mediaURL }
 			allowedTypes={ ALLOWED_MEDIA_TYPES }
 			accept={ ACCEPT_MEDIA_STRING }
-		>
-			{ ( { onClose } ) =>
-				mediaURL && (
-					<MenuItem
-						onClick={ () => {
-							onRemoveLogo();
-							onClose();
-						} }
-					>
-						{ __( 'Reset' ) }
-					</MenuItem>
-				)
-			}
-		</MediaReplaceFlow>
+			onReset={ onRemoveLogo }
+		/>
 	);
 }
 
@@ -435,7 +423,7 @@ export default function LogoEdit( {
 				context: 'view',
 			} );
 		const _isRequestingMediaItem =
-			_siteLogoId &&
+			!! _siteLogoId &&
 			! select( coreStore ).hasFinishedResolution( 'getMedia', [
 				_siteLogoId,
 				{ context: 'view' },
@@ -639,6 +627,8 @@ export default function LogoEdit( {
 								render={ ( { open } ) => (
 									<div className="block-library-site-logo__inspector-upload-container">
 										<Button
+											// TODO: Switch to `true` (40px size) if possible
+											__next40pxDefaultSize={ false }
 											onClick={ open }
 											variant="secondary"
 										>
@@ -664,16 +654,17 @@ export default function LogoEdit( {
 			{ controls }
 			{ mediaInspectorPanel }
 			{ ( !! logoUrl || !! temporaryURL ) && logoImage }
-			{ ! temporaryURL && ! logoUrl && ! canUserEdit && (
-				<Placeholder className="site-logo_placeholder">
-					{ !! isLoading && (
+			{ ( isLoading ||
+				( ! temporaryURL && ! logoUrl && ! canUserEdit ) ) && (
+				<Placeholder className="site-logo_placeholder" withIllustration>
+					{ isLoading && (
 						<span className="components-placeholder__preview">
 							<Spinner />
 						</span>
 					) }
 				</Placeholder>
 			) }
-			{ ! temporaryURL && ! logoUrl && canUserEdit && (
+			{ ! isLoading && ! temporaryURL && ! logoUrl && canUserEdit && (
 				<MediaPlaceholder
 					onSelect={ onInitialSelectLogo }
 					accept={ ACCEPT_MEDIA_STRING }
@@ -683,6 +674,8 @@ export default function LogoEdit( {
 					mediaLibraryButton={ ( { open } ) => {
 						return (
 							<Button
+								// TODO: Switch to `true` (40px size) if possible
+								__next40pxDefaultSize={ false }
 								icon={ upload }
 								variant="primary"
 								label={ __( 'Choose logo' ) }

package/src/site-title/editor.scss

@@ -2,7 +2,3 @@
 	padding: 1em 0;
 	border: 1px dashed;
 }
-
-.editor-styles-wrapper :where(.wp-block-site-title a) {
-	color: inherit;
-}

package/src/social-link/edit.js

@@ -81,6 +81,8 @@ const SocialLinkURLPopover = ( {
 					/>
 				</div>
 				<Button
+					// TODO: Switch to `true` (40px size) if possible
+					__next40pxDefaultSize={ false }
 					icon={ keyboardReturn }
 					label={ __( 'Apply' ) }
 					type="submit"

package/src/social-links/edit.js

@@ -14,8 +14,10 @@ import {
 	InspectorControls,
 	ContrastChecker,
 	withColors,
+	InnerBlocks,
 	__experimentalColorGradientSettingsDropdown as ColorGradientSettingsDropdown,
 	__experimentalUseMultipleOriginColorsAndGradients as useMultipleOriginColorsAndGradients,
+	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import {
 	MenuGroup,
@@ -26,6 +28,7 @@ import {
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { check } from '@wordpress/icons';
+import { useSelect } from '@wordpress/data';
 
 const sizeOptions = [
 	{ name: __( 'Small' ), value: 'has-small-icon-size' },
@@ -55,14 +58,22 @@ export function SocialLinksEdit( props ) {
 		size,
 	} = attributes;
 
+	const hasSelectedChild = useSelect(
+		( select ) =>
+			select( blockEditorStore ).hasSelectedInnerBlock( clientId ),
+		[ clientId ]
+	);
+
+	const hasAnySelected = isSelected || hasSelectedChild;
+
 	const logosOnly = attributes.className?.includes( 'is-style-logos-only' );
 
 	// Remove icon background color when logos only style is selected or
 	// restore it when any other style is selected.
-	const backgroundBackup = useRef( {} );
+	const backgroundBackupRef = useRef( {} );
 	useEffect( () => {
 		if ( logosOnly ) {
-			backgroundBackup.current = {
+			backgroundBackupRef.current = {
 				iconBackgroundColor,
 				iconBackgroundColorValue,
 				customIconBackgroundColor,
@@ -73,8 +84,9 @@ export function SocialLinksEdit( props ) {
 				iconBackgroundColorValue: undefined,
 			} );
 		} else {
-			setAttributes( { ...backgroundBackup.current } );
+			setAttributes( { ...backgroundBackupRef.current } );
 		}
+		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [ logosOnly ] );
 
 	const SocialPlaceholder = (
@@ -87,12 +99,6 @@ export function SocialLinksEdit( props ) {
 		</li>
 	);
 
-	const SelectedSocialPlaceholder = (
-		<li className="wp-block-social-links__social-prompt">
-			{ __( 'Click plus to add' ) }
-		</li>
-	);
-
 	// Fallback color values are used maintain selections in case switching
 	// themes and named colors in palette do not match.
 	const className = clsx( size, {
@@ -104,10 +110,11 @@ export function SocialLinksEdit( props ) {
 
 	const blockProps = useBlockProps( { className } );
 	const innerBlocksProps = useInnerBlocksProps( blockProps, {
-		placeholder: isSelected ? SelectedSocialPlaceholder : SocialPlaceholder,
+		placeholder: ! isSelected && SocialPlaceholder,
 		templateLock: false,
 		orientation: attributes.layout?.orientation ?? 'horizontal',
 		__experimentalAppenderTagName: 'li',
+		renderAppender: hasAnySelected && InnerBlocks.ButtonBlockAppender,
 	} );
 
 	const POPOVER_PROPS = {

package/src/social-links/editor.scss

@@ -1,11 +1,10 @@
 // Editor specific styles for Social Links.
-.wp-block-social-links {
-	div.block-editor-url-input {
-		display: inline-block;
-		margin-left: $grid-unit-10;
-	}
+.wp-block-social-links div.block-editor-url-input {
+	display: inline-block;
+	margin-left: $grid-unit-10;
 }
 
+
 // Prevent toolbar from jumping when selecting / hovering a link.
 .wp-social-link:hover {
 	transform: none;
@@ -98,3 +97,23 @@
 .wp-social-link.wp-social-link__is-incomplete:focus {
 	opacity: 1;
 }
+
+.wp-block-social-links .block-list-appender {
+	position: static; // display inline.
+
+	.block-editor-button-block-appender.components-button.components-button {
+		padding: $grid-unit-10 - 2px;
+	}
+}
+
+.wp-block-social-links {
+	&.has-small-icon-size .block-editor-button-block-appender.components-button.components-button {
+		padding: 0;
+	}
+	&.has-large-icon-size .block-editor-button-block-appender.components-button.components-button {
+		padding: $grid-unit-20 - 2px;
+	}
+	&.has-huge-icon-size .block-editor-button-block-appender.components-button.components-button {
+		padding: $grid-unit-30 - 1px;
+	}
+}

package/src/style.scss

@@ -13,6 +13,8 @@
 @import "./comment-date/style.scss";
 @import "./comment-content/style.scss";
 @import "./comment-author-name/style.scss";
+@import "./comment-edit-link/style.scss";
+@import "./comment-reply-link/style.scss";
 @import "./cover/style.scss";
 @import "./details/style.scss";
 @import "./embed/style.scss";

package/src/tag-cloud/index.php

@@ -29,8 +29,13 @@ function render_block_core_tag_cloud( $attributes ) {
 	);
 	$tag_cloud = wp_tag_cloud( $args );
 
-	if ( ! $tag_cloud ) {
-		$tag_cloud = __( 'There’s no content to show here yet.' );
+	if ( empty( $tag_cloud ) ) {
+		// Display placeholder content when there are no tags only in editor.
+		if ( wp_is_serving_rest_request() ) {
+			$tag_cloud = __( 'There’s no content to show here yet.' );
+		} else {
+			return '';
+		}
 	}
 
 	$wrapper_attributes = get_block_wrapper_attributes();

package/src/template-part/edit/advanced-controls.js

@@ -82,7 +82,6 @@ export function TemplatePartAdvancedControls( {
 						} }
 						onFocus={ ( event ) => event.target.select() }
 					/>
-
 					<SelectControl
 						__next40pxDefaultSize
 						__nextHasNoMarginBottom

package/src/template-part/edit/index.js

@@ -254,16 +254,18 @@ export default function TemplatePartEdit( {
 							</ToolbarButton>
 						</BlockControls>
 					) }
-				<InspectorControls group="advanced">
-					<TemplatePartAdvancedControls
-						tagName={ tagName }
-						setAttributes={ setAttributes }
-						isEntityAvailable={ isEntityAvailable }
-						templatePartId={ templatePartId }
-						defaultWrapper={ areaObject.tagName }
-						hasInnerBlocks={ hasInnerBlocks }
-					/>
-				</InspectorControls>
+				{ canUserEdit && (
+					<InspectorControls group="advanced">
+						<TemplatePartAdvancedControls
+							tagName={ tagName }
+							setAttributes={ setAttributes }
+							isEntityAvailable={ isEntityAvailable }
+							templatePartId={ templatePartId }
+							defaultWrapper={ areaObject.tagName }
+							hasInnerBlocks={ hasInnerBlocks }
+						/>
+					</InspectorControls>
+				) }
 				{ isPlaceholder && (
 					<TagName { ...blockProps }>
 						<TemplatePartPlaceholder

package/src/template-part/edit/placeholder.js

@@ -74,13 +74,20 @@ export default function TemplatePartPlaceholder( {
 
 			{ ! isResolving &&
 				!! ( templateParts.length || blockPatterns.length ) && (
-					<Button variant="primary" onClick={ onOpenSelectionModal }>
+					<Button
+						// TODO: Switch to `true` (40px size) if possible
+						__next40pxDefaultSize={ false }
+						variant="primary"
+						onClick={ onOpenSelectionModal }
+					>
 						{ __( 'Choose' ) }
 					</Button>
 				) }
 
 			{ ! isResolving && isBlockBasedTheme && canCreateTemplatePart && (
 				<Button
+					// TODO: Switch to `true` (40px size) if possible
+					__next40pxDefaultSize={ false }
 					variant="secondary"
 					onClick={ () => {
 						setShowTitleModal( true );

package/src/utils/hooks.js

@@ -37,36 +37,36 @@ export function useCanEditEntity( kind, name, recordId ) {
  * @param {Function} args.onError      Function called when an error happens.
  */
 export function useUploadMediaFromBlobURL( args = {} ) {
-	const latestArgs = useRef( args );
-	const hasUploadStarted = useRef( false );
+	const latestArgsRef = useRef( args );
+	const hasUploadStartedRef = useRef( false );
 	const { getSettings } = useSelect( blockEditorStore );
 
 	useLayoutEffect( () => {
-		latestArgs.current = args;
+		latestArgsRef.current = args;
 	} );
 
 	useEffect( () => {
 		// Uploading is a special effect that can't be canceled via the cleanup method.
 		// The extra check avoids duplicate uploads in development mode (React.StrictMode).
-		if ( hasUploadStarted.current ) {
+		if ( hasUploadStartedRef.current ) {
 			return;
 		}
 		if (
-			! latestArgs.current.url ||
-			! isBlobURL( latestArgs.current.url )
+			! latestArgsRef.current.url ||
+			! isBlobURL( latestArgsRef.current.url )
 		) {
 			return;
 		}
 
-		const file = getBlobByURL( latestArgs.current.url );
+		const file = getBlobByURL( latestArgsRef.current.url );
 		if ( ! file ) {
 			return;
 		}
 
-		const { url, allowedTypes, onChange, onError } = latestArgs.current;
+		const { url, allowedTypes, onChange, onError } = latestArgsRef.current;
 		const { mediaUpload } = getSettings();
 
-		hasUploadStarted.current = true;
+		hasUploadStartedRef.current = true;
 
 		mediaUpload( {
 			filesList: [ file ],
@@ -78,12 +78,12 @@ export function useUploadMediaFromBlobURL( args = {} ) {
 
 				revokeBlobURL( url );
 				onChange( media );
-				hasUploadStarted.current = false;
+				hasUploadStartedRef.current = false;
 			},
 			onError: ( message ) => {
 				revokeBlobURL( url );
 				onError( message );
-				hasUploadStarted.current = false;
+				hasUploadStartedRef.current = false;
 			},
 		} );
 	}, [ getSettings ] );

package/src/video/edit.js

@@ -42,23 +42,6 @@ import TracksEditor from './tracks-editor';
 import Tracks from './tracks';
 import { Caption } from '../utils/caption';
 
-// Much of this description is duplicated from MediaPlaceholder.
-const placeholder = ( content ) => {
-	return (
-		<Placeholder
-			className="block-editor-media-placeholder"
-			withIllustration
-			icon={ icon }
-			label={ __( 'Video' ) }
-			instructions={ __(
-				'Upload a video file, pick one from your media library, or add one with a URL.'
-			) }
-		>
-			{ content }
-		</Placeholder>
-	);
-};
-
 const ALLOWED_MEDIA_TYPES = [ 'video' ];
 const VIDEO_POSTER_ALLOWED_MEDIA_TYPES = [ 'image' ];
 
@@ -149,6 +132,23 @@ function VideoEdit( {
 		createErrorNotice( message, { type: 'snackbar' } );
 	}
 
+	// Much of this description is duplicated from MediaPlaceholder.
+	const placeholder = ( content ) => {
+		return (
+			<Placeholder
+				className="block-editor-media-placeholder"
+				withIllustration={ ! isSingleSelected }
+				icon={ icon }
+				label={ __( 'Video' ) }
+				instructions={ __(
+					'Upload a video file, pick one from your media library, or add one with a URL.'
+				) }
+			>
+				{ content }
+			</Placeholder>
+		);
+	};
+
 	const classes = clsx( className, {
 		'is-transient': !! temporaryURL,
 	} );
@@ -208,6 +208,7 @@ function VideoEdit( {
 							onSelect={ onSelectVideo }
 							onSelectURL={ onSelectURL }
 							onError={ onUploadError }
+							onReset={ () => onSelectVideo( undefined ) }
 						/>
 					</BlockControls>
 				</>
@@ -231,6 +232,8 @@ function VideoEdit( {
 								}
 								render={ ( { open } ) => (
 									<Button
+										// TODO: Switch to `true` (40px size) if possible
+										__next40pxDefaultSize={ false }
 										variant="primary"
 										onClick={ open }
 										ref={ posterImageButton }
@@ -259,6 +262,8 @@ function VideoEdit( {
 							</p>
 							{ !! poster && (
 								<Button
+									// TODO: Switch to `true` (40px size) if possible
+									__next40pxDefaultSize={ false }
 									onClick={ onRemovePoster }
 									variant="tertiary"
 								>
@@ -271,10 +276,10 @@ function VideoEdit( {
 			</InspectorControls>
 			<figure { ...blockProps }>
 				{ /*
-					Disable the video tag if the block is not selected
-					so the user clicking on it won't play the
-					video when the controls are enabled.
-				*/ }
+                Disable the video tag if the block is not selected
+                so the user clicking on it won't play the
+                video when the controls are enabled.
+            */ }
 				<Disabled isDisabled={ ! isSingleSelected }>
 					<video
 						controls={ controls }

package/src/video/editor.scss

@@ -1,40 +1,3 @@
-// Provide special styling for the placeholder.
-// @todo this particular minimal style of placeholder could be componentized further.
-.wp-block-video.wp-block-video {
-	// Show Placeholder style on-select.
-	&.is-selected .components-placeholder {
-		// Block UI appearance.
-		color: $gray-900;
-		background-color: $white;
-		box-shadow: inset 0 0 0 $border-width $gray-900;
-		border: none;
-
-		// @todo this should eventually be overridden by a custom border-radius set in the inspector.
-		border-radius: $radius-block-ui;
-
-		> svg {
-			opacity: 0;
-		}
-
-		.components-placeholder__illustration {
-			display: none;
-		}
-
-		&::before {
-			opacity: 0;
-		}
-	}
-
-	// Remove the transition while we still have a legacy placeholder style.
-	// Otherwise the content jumps between the 1px placeholder border, and any inherited custom
-	// parent border that may get applied when you deselect.
-	.components-placeholder__label,
-	.components-placeholder__instructions,
-	.components-button {
-		transition: none;
-	}
-}
-
 .wp-block[data-align="center"] > .wp-block-video {
 	text-align: center;
 }
@@ -85,7 +48,6 @@
 
 .block-library-video-tracks-editor > .components-popover__content {
 	width: 360px;
-	padding: 0;
 }
 
 .block-library-video-tracks-editor__track-list,
@@ -94,10 +56,3 @@
 		padding: 0;
 	}
 }
-
-.block-library-video-tracks-editor__single-track-editor,
-.block-library-video-tracks-editor__track-list,
-.block-library-video-tracks-editor__add-tracks-container {
-	padding: $grid-unit-15;
-}
-