@wordpress/block-library 9.15.1 → 9.17.0

package/src/paragraph/editor.scss

@@ -22,3 +22,10 @@
 .block-editor-block-list__block[data-type="core/paragraph"].has-text-align-left[style*="writing-mode: vertical-lr"] {
 	rotate: 180deg;
 }
+
+// Hide the placeholder when the editor is in zoomed out mode.
+.is-zoomed-out .block-editor-block-list__block[data-empty="true"] {
+	[data-rich-text-placeholder] {
+		opacity: 0;
+	}
+}

package/src/paragraph/style.scss

@@ -44,7 +44,7 @@ p.has-drop-cap.has-background {
 }
 
 // Use :where to contain the specificity of this rule
-// so it's easily overrideable by any theme that targets
+// so it's easily overridable by any theme that targets
 // links using the a element.
 // For example, this is what global styles does.
 :where(p.has-text-color:not(.has-link-color)) a {

package/src/pattern/block.json

@@ -2,7 +2,7 @@
 	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 3,
 	"name": "core/pattern",
-	"title": "Pattern placeholder",
+	"title": "Pattern Placeholder",
 	"category": "theme",
 	"description": "Show a block pattern.",
 	"supports": {

package/src/post-author-name/edit.js

@@ -15,7 +15,16 @@ import {
 import { useSelect } from '@wordpress/data';
 import { __, sprintf } from '@wordpress/i18n';
 import { store as coreStore } from '@wordpress/core-data';
-import { PanelBody, ToggleControl } from '@wordpress/components';
+import {
+	ToggleControl,
+	__experimentalToolsPanel as ToolsPanel,
+	__experimentalToolsPanelItem as ToolsPanelItem,
+} from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
 
 function PostAuthorNameEdit( {
 	context: { postType, postId },
@@ -61,6 +70,8 @@ function PostAuthorNameEdit( {
 		displayName
 	);
 
+	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
+
 	return (
 		<>
 			<BlockControls group="block">
@@ -72,26 +83,53 @@ function PostAuthorNameEdit( {
 				/>
 			</BlockControls>
 			<InspectorControls>
-				<PanelBody title={ __( 'Settings' ) }>
-					<ToggleControl
-						__nextHasNoMarginBottom
+				<ToolsPanel
+					label={ __( 'Settings' ) }
+					resetAll={ () => {
+						setAttributes( {
+							isLink: false,
+							linkTarget: '_self',
+						} );
+					} }
+					dropdownMenuProps={ dropdownMenuProps }
+				>
+					<ToolsPanelItem
 						label={ __( 'Link to author archive' ) }
-						onChange={ () => setAttributes( { isLink: ! isLink } ) }
-						checked={ isLink }
-					/>
-					{ isLink && (
+						isShownByDefault
+						hasValue={ () => isLink }
+						onDeselect={ () => setAttributes( { isLink: false } ) }
+					>
 						<ToggleControl
 							__nextHasNoMarginBottom
-							label={ __( 'Open in new tab' ) }
-							onChange={ ( value ) =>
-								setAttributes( {
-									linkTarget: value ? '_blank' : '_self',
-								} )
+							label={ __( 'Link to author archive' ) }
+							onChange={ () =>
+								setAttributes( { isLink: ! isLink } )
 							}
-							checked={ linkTarget === '_blank' }
+							checked={ isLink }
 						/>
+					</ToolsPanelItem>
+					{ isLink && (
+						<ToolsPanelItem
+							label={ __( 'Open in new tab' ) }
+							isShownByDefault
+							hasValue={ () => linkTarget !== '_self' }
+							onDeselect={ () =>
+								setAttributes( { linkTarget: '_self' } )
+							}
+						>
+							<ToggleControl
+								__nextHasNoMarginBottom
+								label={ __( 'Open in new tab' ) }
+								onChange={ ( value ) =>
+									setAttributes( {
+										linkTarget: value ? '_blank' : '_self',
+									} )
+								}
+								checked={ linkTarget === '_blank' }
+							/>
+						</ToolsPanelItem>
 					) }
-				</PanelBody>
+				</ToolsPanel>
 			</InspectorControls>
 			<div { ...blockProps }>
 				{ supportsAuthor

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

@@ -47,7 +47,13 @@
 			"radius": true,
 			"color": true,
 			"width": true,
-			"style": true
+			"style": true,
+			"__experimentalDefaultControls": {
+				"radius": true,
+				"color": true,
+				"width": true,
+				"style": true
+			}
 		}
 	},
 	"style": "wp-block-post-comments-link"

package/src/post-content/block.json

@@ -35,6 +35,7 @@
 		},
 		"color": {
 			"gradients": true,
+			"heading": true,
 			"link": true,
 			"__experimentalDefaultControls": {
 				"background": false,
@@ -69,4 +70,4 @@
 	},
 	"style": "wp-block-post-content",
 	"editorStyle": "wp-block-post-content-editor"
-}
+}

package/src/post-date/edit.js

@@ -179,9 +179,7 @@ export default function PostDateEdit( {
 					dropdownMenuProps={ dropdownMenuProps }
 				>
 					<ToolsPanelItem
-						hasValue={ () =>
-							format !== undefined && format !== siteFormat
-						}
+						hasValue={ () => !! format }
 						label={ __( 'Date Format' ) }
 						onDeselect={ () =>
 							setAttributes( { format: undefined } )

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

@@ -49,11 +49,6 @@ function getMediaSourceUrlBySizeSlug( media, slug ) {
 	);
 }
 
-const disabledClickProps = {
-	onClick: ( event ) => event.preventDefault(),
-	'aria-disabled': true,
-};
-
 export default function PostFeaturedImageEdit( {
 	clientId,
 	attributes,
@@ -318,11 +313,7 @@ export default function PostFeaturedImageEdit( {
 				{ controls }
 				<div { ...blockProps }>
 					{ !! isLink ? (
-						<a
-							href={ postPermalink }
-							target={ linkTarget }
-							{ ...disabledClickProps }
-						>
+						<a href={ postPermalink } target={ linkTarget }>
 							{ placeholder() }
 						</a>
 					) : (
@@ -430,11 +421,7 @@ export default function PostFeaturedImageEdit( {
 			<figure { ...blockProps }>
 				{ /* If the featured image is linked, wrap in an <a /> tag to trigger any inherited link element styles */ }
 				{ !! isLink ? (
-					<a
-						href={ postPermalink }
-						target={ linkTarget }
-						{ ...disabledClickProps }
-					>
+					<a href={ postPermalink } target={ linkTarget }>
 						{ image }
 					</a>
 				) : (

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

@@ -100,9 +100,9 @@
 
 	// When the Post Featured Image block is linked,
 	// it's wrapped with a disabled <a /> tag.
-	// Restore cursor style so it doesn't appear 'clickable'.
+	// Ensure that the link is not clickable.
 	> a {
-		cursor: default;
+		pointer-events: none;
 	}
 
 	// When the Post Featured Image block is linked,

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

@@ -47,6 +47,7 @@ const Overlay = ( {
 							gradient: undefined,
 							customGradient: undefined,
 						} ),
+						clearable: true,
 					},
 				] }
 				panelId={ clientId }

package/src/post-navigation-link/variations.js

@@ -8,7 +8,7 @@ const variations = [
 	{
 		isDefault: true,
 		name: 'post-next',
-		title: __( 'Next post' ),
+		title: __( 'Next Post' ),
 		description: __(
 			'Displays the post link that follows the current post.'
 		),
@@ -24,7 +24,7 @@ const variations = [
 	},
 	{
 		name: 'post-previous',
-		title: __( 'Previous post' ),
+		title: __( 'Previous Post' ),
 		description: __(
 			'Displays the post link that precedes the current post.'
 		),

package/src/post-terms/edit.js

@@ -122,6 +122,7 @@ export default function PostTermsEdit( {
 								key={ postTerm.id }
 								href={ postTerm.link }
 								onClick={ ( event ) => event.preventDefault() }
+								rel="tag"
 							>
 								{ decodeEntities( postTerm.name ) }
 							</a>

package/src/post-time-to-read/block.json

@@ -3,7 +3,7 @@
 	"apiVersion": 3,
 	"__experimental": true,
 	"name": "core/post-time-to-read",
-	"title": "Time To Read",
+	"title": "Time to Read",
 	"category": "theme",
 	"description": "Show minutes required to finish reading the post.",
 	"textdomain": "default",

package/src/query/edit/inspector-controls/author-control.js

@@ -30,7 +30,7 @@ function AuthorControl( { value, onChange } ) {
 	const authorsInfo = getEntitiesInfo( authorsList );
 	/**
 	 * We need to normalize the value because the block operates on a
-	 * comma(`,`) separated string value and `FormTokenFiels` needs an
+	 * comma(`,`) separated string value and `FormTokenField` needs an
 	 * array.
 	 */
 	const normalizedValue = ! value ? [] : value.toString().split( ',' );

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

@@ -2,7 +2,6 @@
  * WordPress dependencies
  */
 import {
-	PanelBody,
 	TextControl,
 	SelectControl,
 	RangeControl,
@@ -187,110 +186,171 @@ export default function QueryInspectorControls( props ) {
 	return (
 		<>
 			{ showSettingsPanel && (
-				<PanelBody title={ __( 'Settings' ) }>
+				<ToolsPanel
+					label={ __( 'Settings' ) }
+					resetAll={ () => {
+						setQuery( {
+							postType: 'post',
+							order: 'desc',
+							orderBy: 'date',
+							sticky: '',
+							inherit: true,
+						} );
+					} }
+					dropdownMenuProps={ dropdownMenuProps }
+				>
 					{ showInheritControl && (
-						<ToggleGroupControl
-							__next40pxDefaultSize
-							__nextHasNoMarginBottom
+						<ToolsPanelItem
+							hasValue={ () => ! inherit }
 							label={ __( 'Query type' ) }
-							isBlock
-							onChange={ ( value ) => {
-								setQuery( { inherit: value === 'default' } );
-							} }
-							help={
-								inherit
-									? __(
-											'Display a list of posts or custom post types based on the current template.'
-									  )
-									: __(
-											'Display a list of posts or custom post types based on specific criteria.'
-									  )
-							}
-							value={ !! inherit ? 'default' : 'custom' }
+							onDeselect={ () => setQuery( { inherit: true } ) }
+							isShownByDefault
 						>
-							<ToggleGroupControlOption
-								value="default"
-								label={ __( 'Default' ) }
-							/>
-							<ToggleGroupControlOption
-								value="custom"
-								label={ __( 'Custom' ) }
-							/>
-						</ToggleGroupControl>
-					) }
-					{ showPostTypeControl &&
-						( postTypesSelectOptions.length > 2 ? (
-							<SelectControl
-								__nextHasNoMarginBottom
-								__next40pxDefaultSize
-								options={ postTypesSelectOptions }
-								value={ postType }
-								label={ postTypeControlLabel }
-								onChange={ onPostTypeChange }
-								help={ postTypeControlHelp }
-							/>
-						) : (
 							<ToggleGroupControl
-								__nextHasNoMarginBottom
 								__next40pxDefaultSize
+								__nextHasNoMarginBottom
+								label={ __( 'Query type' ) }
 								isBlock
-								value={ postType }
-								label={ postTypeControlLabel }
-								onChange={ onPostTypeChange }
-								help={ postTypeControlHelp }
+								onChange={ ( value ) => {
+									setQuery( {
+										inherit: value === 'default',
+									} );
+								} }
+								help={
+									inherit
+										? __(
+												'Display a list of posts or custom post types based on the current template.'
+										  )
+										: __(
+												'Display a list of posts or custom post types based on specific criteria.'
+										  )
+								}
+								value={ !! inherit ? 'default' : 'custom' }
 							>
-								{ postTypesSelectOptions.map( ( option ) => (
-									<ToggleGroupControlOption
-										key={ option.value }
-										value={ option.value }
-										label={ option.label }
-									/>
-								) ) }
+								<ToggleGroupControlOption
+									value="default"
+									label={ __( 'Default' ) }
+								/>
+								<ToggleGroupControlOption
+									value="custom"
+									label={ __( 'Custom' ) }
+								/>
 							</ToggleGroupControl>
-						) ) }
+						</ToolsPanelItem>
+					) }
 
-					{ showColumnsControl && (
-						<>
-							<RangeControl
-								__nextHasNoMarginBottom
-								__next40pxDefaultSize
-								label={ __( 'Columns' ) }
-								value={ displayLayout.columns }
-								onChange={ ( value ) =>
-									setDisplayLayout( {
-										columns: value,
-									} )
-								}
-								min={ 2 }
-								max={ Math.max( 6, displayLayout.columns ) }
-							/>
-							{ displayLayout.columns > 6 && (
-								<Notice
-									status="warning"
-									isDismissible={ false }
+					{ showPostTypeControl && (
+						<ToolsPanelItem
+							hasValue={ () => postType !== 'post' }
+							label={ postTypeControlLabel }
+							onDeselect={ () => onPostTypeChange( 'post' ) }
+							isShownByDefault
+						>
+							{ postTypesSelectOptions.length > 2 ? (
+								<SelectControl
+									__nextHasNoMarginBottom
+									__next40pxDefaultSize
+									options={ postTypesSelectOptions }
+									value={ postType }
+									label={ postTypeControlLabel }
+									onChange={ onPostTypeChange }
+									help={ postTypeControlHelp }
+								/>
+							) : (
+								<ToggleGroupControl
+									__nextHasNoMarginBottom
+									__next40pxDefaultSize
+									isBlock
+									value={ postType }
+									label={ postTypeControlLabel }
+									onChange={ onPostTypeChange }
+									help={ postTypeControlHelp }
 								>
-									{ __(
-										'This column count exceeds the recommended amount and may cause visual breakage.'
+									{ postTypesSelectOptions.map(
+										( option ) => (
+											<ToggleGroupControlOption
+												key={ option.value }
+												value={ option.value }
+												label={ option.label }
+											/>
+										)
 									) }
-								</Notice>
+								</ToggleGroupControl>
 							) }
-						</>
+						</ToolsPanelItem>
 					) }
+
+					{ showColumnsControl && (
+						<ToolsPanelItem
+							hasValue={ () => displayLayout?.columns !== 2 }
+							label={ __( 'Columns' ) }
+							onDeselect={ () =>
+								setDisplayLayout( { columns: 2 } )
+							}
+							isShownByDefault
+						>
+							<>
+								<RangeControl
+									__nextHasNoMarginBottom
+									__next40pxDefaultSize
+									label={ __( 'Columns' ) }
+									value={ displayLayout.columns }
+									onChange={ ( value ) =>
+										setDisplayLayout( {
+											columns: value,
+										} )
+									}
+									min={ 2 }
+									max={ Math.max( 6, displayLayout.columns ) }
+								/>
+								{ displayLayout.columns > 6 && (
+									<Notice
+										status="warning"
+										isDismissible={ false }
+									>
+										{ __(
+											'This column count exceeds the recommended amount and may cause visual breakage.'
+										) }
+									</Notice>
+								) }
+							</>
+						</ToolsPanelItem>
+					) }
+
 					{ showOrderControl && (
-						<OrderControl
-							{ ...{ order, orderBy } }
-							onChange={ setQuery }
-						/>
+						<ToolsPanelItem
+							hasValue={ () =>
+								order !== 'desc' || orderBy !== 'date'
+							}
+							label={ __( 'Order by' ) }
+							onDeselect={ () =>
+								setQuery( { order: 'desc', orderBy: 'date' } )
+							}
+							isShownByDefault
+						>
+							<OrderControl
+								{ ...{ order, orderBy } }
+								onChange={ setQuery }
+							/>
+						</ToolsPanelItem>
 					) }
+
 					{ showStickyControl && (
-						<StickyControl
-							value={ sticky }
-							onChange={ ( value ) =>
-								setQuery( { sticky: value } )
-							}
-						/>
+						<ToolsPanelItem
+							hasValue={ () => !! sticky }
+							label={ __( 'Sticky posts' ) }
+							onDeselect={ () => setQuery( { sticky: '' } ) }
+							isShownByDefault
+						>
+							<StickyControl
+								value={ sticky }
+								onChange={ ( value ) =>
+									setQuery( { sticky: value } )
+								}
+							/>
+						</ToolsPanelItem>
 					) }
-				</PanelBody>
+				</ToolsPanel>
 			) }
 			{ ! inherit && showDisplayPanel && (
 				<ToolsPanel

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

@@ -23,6 +23,7 @@ import QueryInspectorControls from './inspector-controls';
 import EnhancedPaginationModal from './enhanced-pagination-modal';
 import { getQueryContextFromTemplate } from '../utils';
 import QueryToolbar from './query-toolbar';
+import { htmlElementMessages } from '../../utils/messages';
 
 const DEFAULTS_POSTS_PER_PAGE = 3;
 
@@ -132,17 +133,6 @@ export default function QueryContent( {
 		setAttributes( {
 			displayLayout: { ...displayLayout, ...newDisplayLayout },
 		} );
-	const htmlElementMessages = {
-		main: __(
-			'The <main> element should be used for the primary content of your document only.'
-		),
-		section: __(
-			"The <section> element should represent a standalone portion of the document that can't be better represented by another element."
-		),
-		aside: __(
-			"The <aside> element should represent a portion of a document whose content is only indirectly related to the document's main content."
-		),
-	};
 
 	return (
 		<>

package/src/query/editor.scss

@@ -1,24 +1,3 @@
-.block-library-query-toolbar__popover .components-popover__content {
-	min-width: 230px;
-
-	.block-library-query-toolbar__popover-number-control {
-		margin-bottom: $grid-unit-10;
-	}
-}
-
-.block-library-query__pattern-selection-content .block-editor-block-patterns-list {
-	display: grid;
-	grid-template-columns: 1fr 1fr 1fr;
-	grid-gap: $grid-unit-10;
-
-	.block-editor-block-patterns-list__list-item {
-		margin-bottom: 0;
-		.block-editor-block-preview__container {
-			max-height: 250px;
-		}
-	}
-}
-
 .block-library-query-pattern__selection-modal {
 
 	.block-editor-block-patterns-list {
@@ -45,22 +24,12 @@
 	}
 }
 
-.block-library-query-toolspanel__design {
-	.block-library-query-pattern__selection-content {
-		margin-top: $grid-unit-10;
-	}
-}
-
 .wp-block-query__enhanced-pagination-modal {
 	@include break-small() {
 		max-width: $break-mobile;
 	}
 }
 
-.wp-block-query__enhanced-pagination-notice {
-	margin: 0;
-}
-
 .block-editor-block-settings-menu__popover {
 	&.is-expanded {
 		overflow-y: scroll;

package/src/query/utils.js

@@ -81,7 +81,7 @@ export const getValueFromObjectPath = ( object, path ) => {
  *
  * @param {Object[]} entities The array of entities.
  * @param {string}   path     The path to map a `name` property from the entity.
- * @return {IHasNameAndId[]} An array of enitities that now implement the `IHasNameAndId` interface.
+ * @return {IHasNameAndId[]} An array of entities that now implement the `IHasNameAndId` interface.
  */
 export const mapToIHasNameAndId = ( entities, path ) => {
 	return ( entities || [] ).map( ( entity ) => ( {

package/src/query-no-results/block.json

@@ -2,7 +2,7 @@
 	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 3,
 	"name": "core/query-no-results",
-	"title": "No results",
+	"title": "No Results",
 	"category": "theme",
 	"description": "Contains the block elements used to render content when no query results are found.",
 	"ancestor": [ "core/query" ],

package/src/query-pagination-numbers/edit.js

@@ -67,7 +67,7 @@ export default function QueryPaginationNumbersEdit( {
 				>
 					<ToolsPanelItem
 						label={ __( 'Number of links' ) }
-						hasValue={ () => midSize !== undefined }
+						hasValue={ () => midSize !== 2 }
 						onDeselect={ () => setAttributes( { midSize: 2 } ) }
 						isShownByDefault
 					>