@wordpress/block-library 9.4.0 → 9.5.0

package/src/loginout/block.json

@@ -22,6 +22,12 @@
 	},
 	"supports": {
 		"className": true,
+		"color": {
+			"background": true,
+			"text": false,
+			"gradients": true,
+			"link": true
+		},
 		"spacing": {
 			"margin": true,
 			"padding": true,
@@ -43,8 +49,15 @@
 				"fontSize": true
 			}
 		},
+		"__experimentalBorder": {
+			"radius": true,
+			"color": true,
+			"width": true,
+			"style": true
+		},
 		"interactivity": {
 			"clientNavigation": true
 		}
-	}
+	},
+	"style": "wp-block-loginout"
 }

package/src/loginout/style.scss

@@ -0,0 +1,4 @@
+.wp-block-loginout {
+	// This block has customizable padding, border-box makes that more predictable.
+	box-sizing: border-box;
+}

package/src/media-text/style.native.scss

@@ -7,6 +7,7 @@ $media-to-text: 12px;
 }
 
 .has-media-on-the-right {
+	/* stylelint-disable-next-line declaration-property-value-allowed-list -- This should be refactored to not use the row-reverse value. */
 	flex-direction: row-reverse;
 }
 
@@ -14,6 +15,7 @@ $media-to-text: 12px;
 	flex-direction: column;
 
 	&.has-media-on-the-right {
+		/* stylelint-disable-next-line declaration-property-value-allowed-list -- This should be refactored to not use the column-reverse value. */
 		flex-direction: column-reverse;
 	}
 }

package/src/navigation/edit/index.js

@@ -721,7 +721,7 @@ function Navigation( {
 	);
 
 	const accessibleDescriptionId = `${ clientId }-desc`;
-
+	const isHiddenByDefault = 'always' === overlayMenu;
 	const isManageMenusButtonDisabled =
 		! hasManagePermissions || ! hasResolvedNavigationMenus;
 
@@ -760,7 +760,7 @@ function Navigation( {
 					hasIcon={ hasIcon }
 					icon={ icon }
 					isResponsive={ isResponsive }
-					isHiddenByDefault={ 'always' === overlayMenu }
+					isHiddenByDefault={ isHiddenByDefault }
 					overlayBackgroundColor={ overlayBackgroundColor }
 					overlayTextColor={ overlayTextColor }
 				>
@@ -899,13 +899,13 @@ function Navigation( {
 							: undefined
 					}
 				>
-					{ isLoading && (
+					{ isLoading && ! isHiddenByDefault && (
 						<div className="wp-block-navigation__loading-indicator-container">
 							<Spinner className="wp-block-navigation__loading-indicator" />
 						</div>
 					) }
 
-					{ ! isLoading && (
+					{ ( ! isLoading || isHiddenByDefault ) && (
 						<>
 							<AccessibleMenuDescription
 								id={ accessibleDescriptionId }
@@ -917,7 +917,7 @@ function Navigation( {
 								icon={ icon }
 								isOpen={ isResponsiveMenuOpen }
 								isResponsive={ isResponsive }
-								isHiddenByDefault={ 'always' === overlayMenu }
+								isHiddenByDefault={ isHiddenByDefault }
 								overlayBackgroundColor={
 									overlayBackgroundColor
 								}

package/src/navigation/editor.scss

@@ -287,7 +287,6 @@ $color-control-label-height: 20px;
 		left: 0;
 		pointer-events: none;
 		border: $border-width dashed currentColor;
-		@include placeholder-style();
 
 		// Inherit border radius from style variations.
 		border-radius: inherit;

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

@@ -37,6 +37,18 @@
 			"__experimentalDefaultControls": {
 				"fontSize": true
 			}
+		},
+		"__experimentalBorder": {
+			"radius": true,
+			"color": true,
+			"width": true,
+			"style": true,
+			"__experimentalDefaultControls": {
+				"radius": true,
+				"color": true,
+				"width": true,
+				"style": true
+			}
 		}
 	},
 	"editorStyle": "wp-block-post-comments-form-editor",

package/src/post-content/block.json

@@ -54,5 +54,6 @@
 			}
 		}
 	},
+	"style": "wp-block-post-content",
 	"editorStyle": "wp-block-post-content-editor"
 }

package/src/post-content/style.scss

@@ -0,0 +1,5 @@
+.wp-block-post-content::after {
+	content: "";
+	display: table;
+	clear: both;
+}

package/src/post-date/block.json

@@ -56,6 +56,18 @@
 		},
 		"interactivity": {
 			"clientNavigation": true
+		},
+		"__experimentalBorder": {
+			"radius": true,
+			"color": true,
+			"width": true,
+			"style": true,
+			"__experimentalDefaultControls": {
+				"radius": true,
+				"color": true,
+				"width": true,
+				"style": true
+			}
 		}
 	}
 }

package/src/post-excerpt/block.json

@@ -56,6 +56,18 @@
 		},
 		"interactivity": {
 			"clientNavigation": true
+		},
+		"__experimentalBorder": {
+			"radius": true,
+			"color": true,
+			"width": true,
+			"style": true,
+			"__experimentalDefaultControls": {
+				"radius": true,
+				"color": true,
+				"width": true,
+				"style": true
+			}
 		}
 	},
 	"editorStyle": "wp-block-post-excerpt-editor",

package/src/post-excerpt/style.scss

@@ -1,5 +1,8 @@
 // Lowest specificity on wrapper margins to avoid overriding layout styles.
 :where(.wp-block-post-excerpt) {
+	// This block has customizable padding, border-box makes that more predictable.
+	box-sizing: border-box;
+
 	margin-top: var(--wp--style--block-gap);
 	margin-bottom: var(--wp--style--block-gap);
 }

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

@@ -157,6 +157,8 @@ export default function PostNavigationLinkEdit( {
 			</InspectorControls>
 			<InspectorControls group="advanced">
 				<SelectControl
+					__next40pxDefaultSize
+					__nextHasNoMarginBottom
 					label={ __( 'Filter by taxonomy' ) }
 					value={ taxonomy }
 					options={ getTaxonomyOptions() }

package/src/post-terms/block.json

@@ -60,6 +60,18 @@
 		},
 		"interactivity": {
 			"clientNavigation": true
+		},
+		"__experimentalBorder": {
+			"radius": true,
+			"color": true,
+			"width": true,
+			"style": true,
+			"__experimentalDefaultControls": {
+				"radius": true,
+				"color": true,
+				"width": true,
+				"style": true
+			}
 		}
 	},
 	"style": "wp-block-post-terms"

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

@@ -45,6 +45,12 @@
 		},
 		"interactivity": {
 			"clientNavigation": true
+		},
+		"__experimentalBorder": {
+			"radius": true,
+			"color": true,
+			"width": true,
+			"style": true
 		}
 	}
 }

package/src/post-title/block.json

@@ -15,6 +15,9 @@
 			"type": "number",
 			"default": 2
 		},
+		"levelOptions": {
+			"type": "array"
+		},
 		"isLink": {
 			"type": "boolean",
 			"default": false
@@ -63,6 +66,18 @@
 		},
 		"interactivity": {
 			"clientNavigation": true
+		},
+		"__experimentalBorder": {
+			"radius": true,
+			"color": true,
+			"width": true,
+			"style": true,
+			"__experimentalDefaultControls": {
+				"radius": true,
+				"color": true,
+				"width": true,
+				"style": true
+			}
 		}
 	},
 	"style": "wp-block-post-title"

package/src/post-title/edit.js

@@ -22,7 +22,7 @@ import { useEntityProp, store as coreStore } from '@wordpress/core-data';
 import { useSelect } from '@wordpress/data';
 
 export default function PostTitleEdit( {
-	attributes: { level, textAlign, isLink, rel, linkTarget },
+	attributes: { level, levelOptions, textAlign, isLink, rel, linkTarget },
 	setAttributes,
 	context: { postType, postId, queryId },
 	insertBlocksAfter,
@@ -73,7 +73,7 @@ export default function PostTitleEdit( {
 		titleElement = userCanEdit ? (
 			<PlainText
 				tagName={ TagName }
-				placeholder={ __( 'No Title' ) }
+				placeholder={ __( 'No title' ) }
 				value={ rawTitle }
 				onChange={ setTitle }
 				__experimentalVersion={ 2 }
@@ -96,7 +96,7 @@ export default function PostTitleEdit( {
 					href={ link }
 					target={ linkTarget }
 					rel={ rel }
-					placeholder={ ! rawTitle.length ? __( 'No Title' ) : null }
+					placeholder={ ! rawTitle.length ? __( 'No title' ) : null }
 					value={ rawTitle }
 					onChange={ setTitle }
 					__experimentalVersion={ 2 }
@@ -125,6 +125,7 @@ export default function PostTitleEdit( {
 					<BlockControls group="block">
 						<HeadingLevelDropdown
 							value={ level }
+							options={ levelOptions }
 							onChange={ ( newLevel ) =>
 								setAttributes( { level: newLevel } )
 							}

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

@@ -36,6 +36,7 @@ export default function EnhancedPaginationControl( {
 	return (
 		<>
 			<ToggleControl
+				__nextHasNoMarginBottom
 				label={ __( 'Force page reload' ) }
 				help={ help }
 				checked={

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

@@ -6,7 +6,6 @@ import {
 	TextControl,
 	SelectControl,
 	RangeControl,
-	ToggleControl,
 	__experimentalToggleGroupControl as ToggleGroupControl,
 	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
 	Notice,
@@ -28,6 +27,9 @@ 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';
+import PagesControl from './pages-control';
 import { unlock } from '../../../lock-unlock';
 import {
 	usePostTypes,
@@ -48,7 +50,10 @@ export default function QueryInspectorControls( props ) {
 		order,
 		orderBy,
 		author: authorIds,
+		pages,
 		postType,
+		perPage,
+		offset,
 		sticky,
 		inherit,
 		taxQuery,
@@ -103,9 +108,9 @@ export default function QueryInspectorControls( props ) {
 	const showInheritControl = isControlAllowed( allowedControls, 'inherit' );
 	const showPostTypeControl =
 		! inherit && isControlAllowed( allowedControls, 'postType' );
-	const postTypeControlLabel = __( 'Content type' );
+	const postTypeControlLabel = __( 'Post type' );
 	const postTypeControlHelp = __(
-		'WordPress contains different types of content you can filter by. Posts and pages are the default types, but plugins could add more.'
+		'Select the type of content to display: posts, pages, or custom post types.'
 	);
 	const showColumnsControl = false;
 	const showOrderControl =
@@ -136,6 +141,16 @@ export default function QueryInspectorControls( props ) {
 		showParentControl;
 	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
 
+	const showPostCountControl = isControlAllowed(
+		allowedControls,
+		'postCount'
+	);
+	const showOffSetControl = isControlAllowed( allowedControls, 'offset' );
+	const showPagesControl = isControlAllowed( allowedControls, 'pages' );
+
+	const showDisplayPanel =
+		showPostCountControl || showOffSetControl || showPagesControl;
+
 	return (
 		<>
 			{ !! postType && (
@@ -146,17 +161,34 @@ export default function QueryInspectorControls( props ) {
 			{ showSettingsPanel && (
 				<PanelBody title={ __( 'Settings' ) }>
 					{ showInheritControl && (
-						<ToggleControl
+						<ToggleGroupControl
+							__next40pxDefaultSize
 							__nextHasNoMarginBottom
-							label={ __( 'Inherit query from template' ) }
-							help={ __(
-								'Enable to use the global query context that is set with the current template, such as an archive or search. Disable to customize the settings independently.'
-							) }
-							checked={ !! inherit }
-							onChange={ ( value ) =>
-								setQuery( { inherit: !! value } )
+							label={ __( 'Query type' ) }
+							isBlock
+							onChange={ ( value ) => {
+								setQuery( { inherit: !! value } );
+							} }
+							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 }
+						>
+							<ToggleGroupControlOption
+								value
+								label={ __( 'Default' ) }
+							/>
+							<ToggleGroupControlOption
+								value={ false }
+								label={ __( 'Custom' ) }
+							/>
+						</ToggleGroupControl>
 					) }
 					{ showPostTypeControl &&
 						( postTypesSelectOptions.length > 2 ? (
@@ -237,6 +269,47 @@ export default function QueryInspectorControls( props ) {
 					/>
 				</PanelBody>
 			) }
+			{ ! inherit && showDisplayPanel && (
+				<ToolsPanel
+					className="block-library-query-toolspanel__display"
+					label={ __( 'Display' ) }
+					resetAll={ () => {
+						setQuery( {
+							offset: 0,
+							pages: 0,
+						} );
+					} }
+					dropdownMenuProps={ dropdownMenuProps }
+				>
+					<ToolsPanelItem
+						label={ __( 'Items' ) }
+						hasValue={ () => perPage > 0 }
+					>
+						<PerPageControl
+							perPage={ perPage }
+							offset={ offset }
+							onChange={ setQuery }
+						/>
+					</ToolsPanelItem>
+					<ToolsPanelItem
+						label={ __( 'Offset' ) }
+						hasValue={ () => offset > 0 }
+						onDeselect={ () => setQuery( { offset: 0 } ) }
+					>
+						<OffsetControl
+							offset={ offset }
+							onChange={ setQuery }
+						/>
+					</ToolsPanelItem>
+					<ToolsPanelItem
+						label={ __( 'Max Pages to Show' ) }
+						hasValue={ () => pages > 0 }
+						onDeselect={ () => setQuery( { pages: 0 } ) }
+					>
+						<PagesControl pages={ pages } onChange={ setQuery } />
+					</ToolsPanelItem>
+				</ToolsPanel>
+			) }
 			{ ! inherit && showFiltersPanel && (
 				<ToolsPanel
 					className="block-library-query-toolspanel__filters" // unused but kept for backward compatibility

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

@@ -0,0 +1,31 @@
+/**
+ * WordPress dependencies
+ */
+import { __experimentalNumberControl as NumberControl } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+const MIN_OFFSET = 0;
+const MAX_OFFSET = 100;
+
+export const OffsetControl = ( { offset = 0, onChange } ) => {
+	return (
+		<NumberControl
+			__next40pxDefaultSize
+			label={ __( 'Offset' ) }
+			value={ offset }
+			min={ MIN_OFFSET }
+			onChange={ ( newOffset ) => {
+				if (
+					isNaN( newOffset ) ||
+					newOffset < MIN_OFFSET ||
+					newOffset > MAX_OFFSET
+				) {
+					return;
+				}
+				onChange( { offset: newOffset } );
+			} }
+		/>
+	);
+};
+
+export default OffsetControl;

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

@@ -0,0 +1,27 @@
+/**
+ * WordPress dependencies
+ */
+import { __experimentalNumberControl as NumberControl } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+export const PagesControl = ( { pages, onChange } ) => {
+	return (
+		<NumberControl
+			__next40pxDefaultSize
+			label={ __( 'Max pages' ) }
+			value={ pages }
+			min={ 0 }
+			onChange={ ( newPages ) => {
+				if ( isNaN( newPages ) || newPages < 0 ) {
+					return;
+				}
+				onChange( { pages: newPages } );
+			} }
+			help={ __(
+				'Limit the pages you want to show, even if the query has more results. To show all pages use 0 (zero).'
+			) }
+		/>
+	);
+};
+
+export default PagesControl;

package/src/query/edit/inspector-controls/per-page-control.js

@@ -0,0 +1,33 @@
+/**
+ * WordPress dependencies
+ */
+import { RangeControl } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+const MIN_POSTS_PER_PAGE = 1;
+const MAX_POSTS_PER_PAGE = 100;
+
+const PerPageControl = ( { perPage, offset = 0, onChange } ) => {
+	return (
+		<RangeControl
+			__next40pxDefaultSize
+			__nextHasNoMarginBottom
+			label={ __( 'Posts per page' ) }
+			min={ MIN_POSTS_PER_PAGE }
+			max={ MAX_POSTS_PER_PAGE }
+			onChange={ ( newPerPage ) => {
+				if (
+					isNaN( newPerPage ) ||
+					newPerPage < MIN_POSTS_PER_PAGE ||
+					newPerPage > MAX_POSTS_PER_PAGE
+				) {
+					return;
+				}
+				onChange( { perPage: newPerPage, offset } );
+			} }
+			value={ parseInt( perPage, 10 ) }
+		/>
+	);
+};
+
+export default PerPageControl;

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

@@ -20,7 +20,7 @@ export default function StickyControl( { value, onChange } ) {
 			value={ value }
 			onChange={ onChange }
 			help={ __(
-				'Blog posts can be “stickied”, a feature that places them at the top of the front page of posts, keeping it there until new sticky posts are published.'
+				'Sticky posts always appear first, regardless of their publish date.'
 			) }
 		/>
 	);

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

@@ -1,14 +1,8 @@
 /**
  * WordPress dependencies
  */
-import {
-	ToolbarGroup,
-	Dropdown,
-	ToolbarButton,
-	__experimentalNumberControl as NumberControl,
-} from '@wordpress/components';
+import { ToolbarGroup, ToolbarButton } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { settings } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -16,8 +10,6 @@ import { settings } from '@wordpress/icons';
 import { usePatterns } from '../utils';
 
 export default function QueryToolbar( {
-	attributes: { query },
-	setQuery,
 	openPatternSelectionModal,
 	name,
 	clientId,
@@ -26,87 +18,6 @@ export default function QueryToolbar( {
 
 	return (
 		<>
-			{ ! query.inherit && (
-				<ToolbarGroup>
-					<Dropdown
-						contentClassName="block-library-query-toolbar__popover"
-						renderToggle={ ( { onToggle } ) => (
-							<ToolbarButton
-								icon={ settings }
-								label={ __( 'Display settings' ) }
-								onClick={ onToggle }
-							/>
-						) }
-						renderContent={ () => (
-							<>
-								<NumberControl
-									__unstableInputWidth="60px"
-									className="block-library-query-toolbar__popover-number-control"
-									label={ __( 'Items per Page' ) }
-									labelPosition="edge"
-									min={ 1 }
-									max={ 100 }
-									onChange={ ( value ) => {
-										if (
-											isNaN( value ) ||
-											value < 1 ||
-											value > 100
-										) {
-											return;
-										}
-										setQuery( {
-											perPage: value,
-										} );
-									} }
-									step="1"
-									value={ query.perPage }
-									isDragEnabled={ false }
-								/>
-								<NumberControl
-									__unstableInputWidth="60px"
-									className="block-library-query-toolbar__popover-number-control"
-									label={ __( 'Offset' ) }
-									labelPosition="edge"
-									min={ 0 }
-									max={ 100 }
-									onChange={ ( value ) => {
-										if (
-											isNaN( value ) ||
-											value < 0 ||
-											value > 100
-										) {
-											return;
-										}
-										setQuery( { offset: value } );
-									} }
-									step="1"
-									value={ query.offset }
-									isDragEnabled={ false }
-								/>
-								<NumberControl
-									__unstableInputWidth="60px"
-									className="block-library-query-toolbar__popover-number-control"
-									label={ __( 'Max pages to show' ) }
-									labelPosition="edge"
-									min={ 0 }
-									onChange={ ( value ) => {
-										if ( isNaN( value ) || value < 0 ) {
-											return;
-										}
-										setQuery( { pages: value } );
-									} }
-									step="1"
-									value={ query.pages }
-									isDragEnabled={ false }
-									help={ __(
-										'Limit the pages you want to show, even if the query has more results. To show all pages use 0 (zero).'
-									) }
-								/>
-							</>
-						) }
-					/>
-				</ToolbarGroup>
-			) }
 			{ hasPatterns && (
 				<ToolbarGroup className="wp-block-template-part__block-control-group">
 					<ToolbarButton onClick={ openPatternSelectionModal }>