@wordpress/block-library 9.6.1 → 9.7.1-next.5368f64a9.0

package/src/page-list/edit.js

@@ -225,7 +225,11 @@ export default function PageListEdit( {
 						page.title?.rendered?.trim() !== ''
 							? page.title?.rendered
 							: __( '(no title)' ),
-					title: page.title?.rendered,
+					title:
+						// translators: displayed when a page has an empty title.
+						page.title?.rendered?.trim() !== ''
+							? page.title?.rendered
+							: __( '(no title)' ),
 					link: page.url,
 					hasChildren,
 				};
@@ -338,6 +342,7 @@ export default function PageListEdit( {
 					<PanelBody title={ __( 'Edit this menu' ) }>
 						<p>{ convertDescription }</p>
 						<Button
+							__next40pxDefaultSize
 							variant="primary"
 							accessibleWhenDisabled
 							disabled={ ! hasResolvedPages }

package/src/page-list/index.php

@@ -192,7 +192,9 @@ function block_core_page_list_render_nested_page_list( $open_submenus_on_click,
 			$css_class .= ' menu-item-home';
 		}
 
-		$title      = wp_kses_post( $page['title'] );
+		$title = wp_kses_post( $page['title'] );
+		$title = $title ? $title : __( '(no title)' );
+
 		$aria_label = sprintf(
 			/* translators: Accessibility text. %s: Parent page title. */
 			__( '%s submenu' ),

package/src/post-comments-form/form.js

@@ -84,6 +84,7 @@ const CommentsForm = ( { postId, postType } ) => {
 		if ( 'closed' === commentStatus ) {
 			const actions = [
 				<Button
+					__next40pxDefaultSize
 					key="enableComments"
 					onClick={ () => setCommentStatus( 'open' ) }
 					variant="primary"

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,7 @@ export default function PostFeaturedImageEdit( {
 				mediaLibraryButton={ ( { open } ) => {
 					return (
 						<Button
+							__next40pxDefaultSize
 							icon={ upload }
 							variant="primary"
 							label={ label }
@@ -366,11 +366,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/post-title/block.json

@@ -80,5 +80,8 @@
 			}
 		}
 	},
-	"style": "wp-block-post-title"
+	"style": "wp-block-post-title",
+	"selectors": {
+		"typography": ".wp-block-post-title, .wp-block-post-title > a"
+	}
 }

package/src/post-title/style.scss

@@ -3,6 +3,30 @@
 	// This block has customizable padding, border-box makes that more predictable.
 	box-sizing: border-box;
 
+	&[style*="font-weight"] :where(a) {
+		font-weight: inherit;
+	}
+	&[class*="-font-family"] :where(a),
+	&[style*="font-family"] :where(a) {
+		font-family: inherit;
+	}
+	&[class*="-font-size"] :where(a),
+	&[style*="font-size"] :where(a) {
+		font-size: inherit;
+	}
+	&[style*="line-height"] :where(a) {
+		line-height: inherit;
+	}
+	&[style*="font-style"] :where(a) {
+		font-style: inherit;
+	}
+	&[style*="letter-spacing"] :where(a) {
+		letter-spacing: inherit;
+	}
+	&[style*="text-decoration"] :where(a) {
+		text-decoration: inherit;
+	}
+
 	a {
 		display: inline-block;
 	}

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

@@ -42,7 +42,7 @@ export default function EnhancedPaginationModal( {
 	};
 
 	let notice = __(
-		'If you still want to prevent full page reloads, remove that block, then disable "Force page reload" again in the Query Block settings.'
+		'If you still want to prevent full page reloads, remove that block, then disable "Reload full page" again in the Query Block settings.'
 	);
 	if ( hasBlocksFromPlugins ) {
 		notice =
@@ -63,7 +63,7 @@ export default function EnhancedPaginationModal( {
 	return (
 		isOpen && (
 			<Modal
-				title={ __( 'Query block: Force page reload enabled' ) }
+				title={ __( 'Query block: Reload full page enabled' ) }
 				className="wp-block-query__enhanced-pagination-modal"
 				aria={ {
 					describedby: modalDescriptionId,
@@ -75,7 +75,11 @@ export default function EnhancedPaginationModal( {
 			>
 				<VStack alignment="right" spacing={ 5 }>
 					<span id={ modalDescriptionId }>{ notice }</span>
-					<Button variant="primary" onClick={ closeModal }>
+					<Button
+						__next40pxDefaultSize
+						variant="primary"
+						onClick={ closeModal }
+					>
 						{ __( 'OK' ) }
 					</Button>
 				</VStack>

package/src/query/edit/inspector-controls/enhanced-pagination-control.js

@@ -25,11 +25,11 @@ export default function EnhancedPaginationControl( {
 		);
 	} else if ( enhancedPagination ) {
 		help = __(
-			"Browsing between pages won't require a full page reload, unless non-compatible blocks are detected."
+			'Reload the full page—instead of just the posts list—when visitors navigate between pages.'
 		);
 	} else if ( hasUnsupportedBlocks ) {
 		help = __(
-			"Force page reload can't be disabled because there are non-compatible blocks inside the Query block."
+			'Enhancement disabled because there are non-compatible blocks inside the Query block.'
 		);
 	}
 
@@ -37,7 +37,7 @@ export default function EnhancedPaginationControl( {
 		<>
 			<ToggleControl
 				__nextHasNoMarginBottom
-				label={ __( 'Force page reload' ) }
+				label={ __( 'Reload full page' ) }
 				help={ help }
 				checked={
 					! enhancedPagination && ! fullPageClientSideNavigation

package/src/query/edit/inspector-controls/index.js

@@ -25,7 +25,6 @@ import AuthorControl from './author-control';
 import ParentControl from './parent-control';
 import { TaxonomyControls } from './taxonomy-controls';
 import StickyControl from './sticky-control';
-import EnhancedPaginationControl from './enhanced-pagination-control';
 import CreateNewPostLink from './create-new-post-link';
 import PerPageControl from './per-page-control';
 import OffsetControl from './offset-controls';
@@ -43,9 +42,8 @@ import { useToolsPanelDropdownMenuProps } from '../../../utils/hooks';
 const { BlockInfo } = unlock( blockEditorPrivateApis );
 
 export default function QueryInspectorControls( props ) {
-	const { attributes, setQuery, setDisplayLayout, setAttributes, clientId } =
-		props;
-	const { query, displayLayout, enhancedPagination } = attributes;
+	const { attributes, setQuery, setDisplayLayout } = props;
+	const { query, displayLayout } = attributes;
 	const {
 		order,
 		orderBy,
@@ -262,11 +260,6 @@ export default function QueryInspectorControls( props ) {
 							}
 						/>
 					) }
-					<EnhancedPaginationControl
-						enhancedPagination={ enhancedPagination }
-						setAttributes={ setAttributes }
-						clientId={ clientId }
-					/>
 				</PanelBody>
 			) }
 			{ ! inherit && showDisplayPanel && (

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

@@ -18,6 +18,7 @@ import { store as coreStore } from '@wordpress/core-data';
 /**
  * Internal dependencies
  */
+import EnhancedPaginationControl from './inspector-controls/enhanced-pagination-control';
 import QueryToolbar from './query-toolbar';
 import QueryInspectorControls from './inspector-controls';
 import EnhancedPaginationModal from './enhanced-pagination-modal';
@@ -36,6 +37,7 @@ export default function QueryContent( {
 		queryId,
 		query,
 		displayLayout,
+		enhancedPagination,
 		tagName: TagName = 'div',
 		query: { inherit } = {},
 	} = attributes;
@@ -161,6 +163,11 @@ export default function QueryContent( {
 					}
 					help={ htmlElementMessages[ TagName ] }
 				/>
+				<EnhancedPaginationControl
+					enhancedPagination={ enhancedPagination }
+					setAttributes={ setAttributes }
+					clientId={ clientId }
+				/>
 			</InspectorControls>
 			<TagName { ...innerBlocksProps } />
 		</>

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

@@ -79,6 +79,7 @@ export default function QueryPlaceholder( {
 			>
 				{ !! hasPatterns && (
 					<Button
+						__next40pxDefaultSize
 						variant="primary"
 						onClick={ openPatternSelectionModal }
 					>
@@ -87,6 +88,7 @@ export default function QueryPlaceholder( {
 				) }
 
 				<Button
+					__next40pxDefaultSize
 					variant="secondary"
 					onClick={ () => {
 						setIsStartingBlank( true );

package/src/query/index.php

@@ -26,7 +26,7 @@ function render_block_core_query( $attributes, $content, $block ) {
 	if ( $is_interactive ) {
 		$suffix = wp_scripts_get_suffix();
 		if ( defined( 'IS_GUTENBERG_PLUGIN' ) && IS_GUTENBERG_PLUGIN ) {
-			$module_url = gutenberg_url( '/build/interactivity/query.min.js' );
+			$module_url = gutenberg_url( '/build-module/block-library/query/view.min.js' );
 		}
 
 		wp_register_script_module(

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/search/index.php

@@ -82,7 +82,7 @@ function render_block_core_search( $attributes ) {
 		if ( $is_expandable_searchfield ) {
 			$suffix = wp_scripts_get_suffix();
 			if ( defined( 'IS_GUTENBERG_PLUGIN' ) && IS_GUTENBERG_PLUGIN ) {
-				$module_url = gutenberg_url( '/build/interactivity/search.min.js' );
+				$module_url = gutenberg_url( '/build-module/block-library/search/view.min.js' );
 			}
 
 			wp_register_script_module(

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,7 @@ export default function LogoEdit( {
 								render={ ( { open } ) => (
 									<div className="block-library-site-logo__inspector-upload-container">
 										<Button
+											__next40pxDefaultSize
 											onClick={ open }
 											variant="secondary"
 										>
@@ -664,16 +653,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 +673,7 @@ export default function LogoEdit( {
 					mediaLibraryButton={ ( { open } ) => {
 						return (
 							<Button
+								__next40pxDefaultSize
 								icon={ upload }
 								variant="primary"
 								label={ __( 'Choose logo' ) }

package/src/site-title/block.json

@@ -75,5 +75,8 @@
 		}
 	},
 	"editorStyle": "wp-block-site-title-editor",
-	"style": "wp-block-site-title"
+	"style": "wp-block-site-title",
+	"selectors": {
+		"typography": ".wp-block-site-title > span, .wp-block-site-title > a"
+	}
 }

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/site-title/style.scss

@@ -2,6 +2,30 @@
 	// This block has customizable padding, border-box makes that more predictable.
 	box-sizing: border-box;
 
+	&[style*="font-weight"] :where(a) {
+		font-weight: inherit;
+	}
+	&[class*="-font-family"] :where(a),
+	&[style*="font-family"] :where(a) {
+		font-family: inherit;
+	}
+	&[class*="-font-size"] :where(a),
+	&[style*="font-size"] :where(a) {
+		font-size: inherit;
+	}
+	&[style*="line-height"] :where(a) {
+		line-height: inherit;
+	}
+	&[style*="font-style"] :where(a) {
+		font-style: inherit;
+	}
+	&[style*="letter-spacing"] :where(a) {
+		letter-spacing: inherit;
+	}
+	&[style*="text-decoration"] :where(a) {
+		text-decoration: inherit;
+	}
+
 	:where(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