@wordpress/block-library 9.23.0 → 9.24.0

package/build-style/video/theme.css

@@ -1,15 +1,12 @@
-/**
-*  Converts a hex value into the rgb equivalent.
-*
-* @param {string} hex - the hexadecimal value to convert
-* @return {string} comma separated rgb values
-*/
 /**
  * Colors
  */
 /**
  * Breakpoints & Media Queries
  */
+/**
+ * Colors
+ */
 /**
  * SCSS Variables.
  *
@@ -18,14 +15,50 @@
  * For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
  */
 /**
-*  Converts a hex value into the rgb equivalent.
-*
-* @param {string} hex - the hexadecimal value to convert
-* @return {string} comma separated rgb values
-*/
+ * Fonts & basic variables.
+ */
+/**
+ * Typography
+ */
+/**
+ * Grid System.
+ * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
+ */
+/**
+ * Radius scale.
+ */
+/**
+ * Elevation scale.
+ */
+/**
+ * Dimensions.
+ */
+/**
+ * Mobile specific styles
+ */
+/**
+ * Editor styles.
+ */
+/**
+ * Block & Editor UI.
+ */
+/**
+ * Block paddings.
+ */
+/**
+ * React Native specific.
+ * These variables do not appear to be used anywhere else.
+ */
 /**
  * Colors
  */
+/**
+ * SCSS Variables.
+ *
+ * Please use variables from this sheet to ensure consistency across the UI.
+ * Don't add to this sheet unless you're pretty sure the value will be reused in many places.
+ * For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
+ */
 /**
  * Fonts & basic variables.
  */
@@ -61,6 +94,9 @@
  * React Native specific.
  * These variables do not appear to be used anywhere else.
  */
+/**
+ * Breakpoints & Media Queries
+ */
 /**
 *  Converts a hex value into the rgb equivalent.
 *

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-library",
-	"version": "9.23.0",
+	"version": "9.24.0",
 	"description": "Block library for the WordPress editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -41,39 +41,39 @@
 	],
 	"dependencies": {
 		"@babel/runtime": "7.25.7",
-		"@wordpress/a11y": "^4.23.0",
-		"@wordpress/api-fetch": "^7.23.0",
-		"@wordpress/autop": "^4.23.0",
-		"@wordpress/blob": "^4.23.0",
-		"@wordpress/block-editor": "^14.18.0",
-		"@wordpress/blocks": "^14.12.0",
-		"@wordpress/components": "^29.9.0",
-		"@wordpress/compose": "^7.23.0",
-		"@wordpress/core-data": "^7.23.0",
-		"@wordpress/data": "^10.23.0",
-		"@wordpress/date": "^5.23.0",
-		"@wordpress/deprecated": "^4.23.0",
-		"@wordpress/dom": "^4.23.0",
-		"@wordpress/element": "^6.23.0",
-		"@wordpress/escape-html": "^3.23.0",
-		"@wordpress/hooks": "^4.23.0",
-		"@wordpress/html-entities": "^4.23.0",
-		"@wordpress/i18n": "^5.23.0",
-		"@wordpress/icons": "^10.23.0",
-		"@wordpress/interactivity": "^6.23.0",
-		"@wordpress/interactivity-router": "^2.23.0",
-		"@wordpress/keyboard-shortcuts": "^5.23.0",
-		"@wordpress/keycodes": "^4.23.0",
-		"@wordpress/notices": "^5.23.0",
-		"@wordpress/patterns": "^2.23.0",
-		"@wordpress/primitives": "^4.23.0",
-		"@wordpress/private-apis": "^1.23.0",
-		"@wordpress/reusable-blocks": "^5.23.0",
-		"@wordpress/rich-text": "^7.23.0",
-		"@wordpress/server-side-render": "^5.23.0",
-		"@wordpress/url": "^4.23.0",
-		"@wordpress/viewport": "^6.23.0",
-		"@wordpress/wordcount": "^4.23.0",
+		"@wordpress/a11y": "^4.24.0",
+		"@wordpress/api-fetch": "^7.24.0",
+		"@wordpress/autop": "^4.24.0",
+		"@wordpress/blob": "^4.24.0",
+		"@wordpress/block-editor": "^14.19.0",
+		"@wordpress/blocks": "^14.13.0",
+		"@wordpress/components": "^29.10.0",
+		"@wordpress/compose": "^7.24.0",
+		"@wordpress/core-data": "^7.24.0",
+		"@wordpress/data": "^10.24.0",
+		"@wordpress/date": "^5.24.0",
+		"@wordpress/deprecated": "^4.24.0",
+		"@wordpress/dom": "^4.24.0",
+		"@wordpress/element": "^6.24.0",
+		"@wordpress/escape-html": "^3.24.0",
+		"@wordpress/hooks": "^4.24.0",
+		"@wordpress/html-entities": "^4.24.0",
+		"@wordpress/i18n": "^5.24.0",
+		"@wordpress/icons": "^10.24.0",
+		"@wordpress/interactivity": "^6.24.0",
+		"@wordpress/interactivity-router": "^2.24.0",
+		"@wordpress/keyboard-shortcuts": "^5.24.0",
+		"@wordpress/keycodes": "^4.24.0",
+		"@wordpress/notices": "^5.24.0",
+		"@wordpress/patterns": "^2.24.0",
+		"@wordpress/primitives": "^4.24.0",
+		"@wordpress/private-apis": "^1.24.0",
+		"@wordpress/reusable-blocks": "^5.24.0",
+		"@wordpress/rich-text": "^7.24.0",
+		"@wordpress/server-side-render": "^6.0.0",
+		"@wordpress/url": "^4.24.0",
+		"@wordpress/viewport": "^6.24.0",
+		"@wordpress/wordcount": "^4.24.0",
 		"change-case": "^4.1.2",
 		"clsx": "^2.1.1",
 		"colord": "^2.7.0",
@@ -91,5 +91,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "ab5c79cd40adbb68898536c50e035b0a734338ea"
+	"gitHead": "9c03d1458cae76792ae15e67b421205836bf4393"
 }

package/src/button/style.scss

@@ -10,7 +10,6 @@ $blocks-block__margin: 0.5em;
 	word-break: break-word; // overflow-wrap doesn't work well if a link is wrapped in the div, so use word-break here.
 	box-sizing: border-box;
 	height: 100%;
-	width: 100%;
 	align-content: center;
 
 	&.aligncenter {

package/src/buttons/style.scss

@@ -82,6 +82,11 @@ $blocks-block__margin: 0.5em;
 			font-size: inherit;
 		}
 	}
+
+	// Needed to make the buttons stretch correctly in a vertical layout.
+	.wp-block-button__link {
+		width: 100%;
+	}
 }
 
 // Legacy buttons that did not come in a wrapping container.

package/src/code/block.json

@@ -11,7 +11,8 @@
 			"type": "rich-text",
 			"source": "rich-text",
 			"selector": "code",
-			"__unstablePreserveWhiteSpace": true
+			"__unstablePreserveWhiteSpace": true,
+			"role": "content"
 		}
 	},
 	"supports": {

package/src/details/block.json

@@ -15,7 +15,8 @@
 		"summary": {
 			"type": "rich-text",
 			"source": "rich-text",
-			"selector": "summary"
+			"selector": "summary",
+			"role": "content"
 		},
 		"name": {
 			"type": "string",

package/src/html/block.json

@@ -10,7 +10,8 @@
 	"attributes": {
 		"content": {
 			"type": "string",
-			"source": "raw"
+			"source": "raw",
+			"role": "content"
 		}
 	},
 	"supports": {

package/src/html/editor.scss

@@ -10,6 +10,7 @@
 	// The editing view for the HTML block is equivalent to block UI.
 	// Therefore we increase specificity to avoid theme styles bleeding in.
 	.block-editor-plain-text {
+		display: block;
 		box-sizing: border-box;
 		max-height: 250px;
 		@include editor-input-reset();

package/src/image/constants.js

@@ -7,3 +7,4 @@ export const NEW_TAB_REL = [ 'noreferrer', 'noopener' ];
 export const ALLOWED_MEDIA_TYPES = [ 'image' ];
 export const MEDIA_ID_NO_FEATURED_IMAGE_SET = 0;
 export const SIZED_LAYOUTS = [ 'flex', 'grid' ];
+export const DEFAULT_MEDIA_SIZE_SLUG = 'full';

package/src/image/edit.js

@@ -42,6 +42,7 @@ import {
 	LINK_DESTINATION_MEDIA,
 	LINK_DESTINATION_NONE,
 	ALLOWED_MEDIA_TYPES,
+	DEFAULT_MEDIA_SIZE_SLUG,
 } from './constants';
 
 export const pickRelevantMediaFiles = ( image, size ) => {
@@ -239,7 +240,7 @@ export function ImageEdit( {
 
 		// Try to use the previous selected image size if its available
 		// otherwise try the default image size or fallback to "full"
-		let newSize = 'full';
+		let newSize = DEFAULT_MEDIA_SIZE_SLUG;
 		if ( sizeSlug && hasSize( media, sizeSlug ) ) {
 			newSize = sizeSlug;
 		} else if ( hasSize( media, imageDefaultSize ) ) {

package/src/image/image.js

@@ -53,12 +53,13 @@ import { unlock } from '../lock-unlock';
 import { createUpgradedEmbedBlock } from '../embed/util';
 import { isExternalImage } from './edit';
 import { Caption } from '../utils/caption';
-
-/**
- * Module constants
- */
 import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
-import { MIN_SIZE, ALLOWED_MEDIA_TYPES, SIZED_LAYOUTS } from './constants';
+import {
+	MIN_SIZE,
+	ALLOWED_MEDIA_TYPES,
+	SIZED_LAYOUTS,
+	DEFAULT_MEDIA_SIZE_SLUG,
+} from './constants';
 import { evalAspectRatio } from './utils';
 
 const { DimensionsTool, ResolutionTool } = unlock( blockEditorPrivateApis );
@@ -836,6 +837,7 @@ export default function Image( {
 					{ !! imageSizeOptions.length && (
 						<ResolutionTool
 							value={ sizeSlug }
+							defaultValue={ DEFAULT_MEDIA_SIZE_SLUG }
 							onChange={ updateImage }
 							options={ imageSizeOptions }
 						/>

package/src/more/block.json

@@ -10,7 +10,8 @@
 	"attributes": {
 		"customText": {
 			"type": "string",
-			"default": ""
+			"default": "",
+			"role": "content"
 		},
 		"noTeaser": {
 			"type": "boolean",

package/src/post-comments-form/style.scss

@@ -82,9 +82,4 @@
 			margin-left: 0.5em;
 		}
 	}
-
-	// Override the 100% width derived from the Button block
-	input[type="submit"] {
-		width: auto;
-	}
 }

package/src/post-excerpt/block.json

@@ -11,7 +11,8 @@
 			"type": "string"
 		},
 		"moreText": {
-			"type": "string"
+			"type": "string",
+			"role": "content"
 		},
 		"showMoreOnNewLine": {
 			"type": "boolean",

package/src/post-excerpt/edit.js

@@ -15,6 +15,7 @@ import {
 	RichText,
 	Warning,
 	useBlockProps,
+	useBlockEditingMode,
 } from '@wordpress/block-editor';
 import {
 	ToggleControl,
@@ -41,6 +42,8 @@ export default function PostExcerptEditor( {
 	isSelected,
 	context: { postId, postType, queryId },
 } ) {
+	const blockEditingMode = useBlockEditingMode();
+	const showControls = blockEditingMode === 'default';
 	const isDescendentOfQueryLoop = Number.isFinite( queryId );
 	const userCanEdit = useCanEditEntity( 'postType', postType, postId );
 	const [
@@ -220,14 +223,16 @@ export default function PostExcerptEditor( {
 	);
 	return (
 		<>
-			<BlockControls>
-				<AlignmentToolbar
-					value={ textAlign }
-					onChange={ ( newAlign ) =>
-						setAttributes( { textAlign: newAlign } )
-					}
-				/>
-			</BlockControls>
+			{ showControls && (
+				<BlockControls>
+					<AlignmentToolbar
+						value={ textAlign }
+						onChange={ ( newAlign ) =>
+							setAttributes( { textAlign: newAlign } )
+						}
+					/>
+				</BlockControls>
+			) }
 			<InspectorControls>
 				<ToolsPanel
 					label={ __( 'Settings' ) }

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

@@ -15,7 +15,8 @@
 			"default": "next"
 		},
 		"label": {
-			"type": "string"
+			"type": "string",
+			"role": "content"
 		},
 		"showTitle": {
 			"type": "boolean",

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

@@ -19,6 +19,7 @@ import {
 	BlockControls,
 	AlignmentToolbar,
 	useBlockProps,
+	useBlockEditingMode,
 } from '@wordpress/block-editor';
 import { __, _x } from '@wordpress/i18n';
 import { useSelect } from '@wordpress/data';
@@ -37,6 +38,8 @@ export default function PostNavigationLinkEdit( {
 	},
 	setAttributes,
 } ) {
+	const blockEditingMode = useBlockEditingMode();
+	const showControls = blockEditingMode === 'default';
 	const isNext = type === 'next';
 	let placeholder = isNext ? __( 'Next' ) : __( 'Previous' );
 
@@ -176,14 +179,16 @@ export default function PostNavigationLinkEdit( {
 					) }
 				/>
 			</InspectorControls>
-			<BlockControls>
-				<AlignmentToolbar
-					value={ textAlign }
-					onChange={ ( nextAlign ) => {
-						setAttributes( { textAlign: nextAlign } );
-					} }
-				/>
-			</BlockControls>
+			{ showControls && (
+				<BlockControls>
+					<AlignmentToolbar
+						value={ textAlign }
+						onChange={ ( nextAlign ) => {
+							setAttributes( { textAlign: nextAlign } );
+						} }
+					/>
+				</BlockControls>
+			) }
 			<div { ...blockProps }>
 				{ ! isNext && displayArrow && (
 					<span

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

@@ -6,34 +6,34 @@ import { next, previous } from '@wordpress/icons';
 
 const variations = [
 	{
-		isDefault: true,
-		name: 'post-next',
-		title: __( 'Next Post' ),
+		name: 'post-previous',
+		title: __( 'Previous Post' ),
 		description: __(
-			'Displays the post link that follows the current post.'
+			'Displays the post link that precedes the current post.'
 		),
-		icon: next,
-		attributes: { type: 'next' },
+		icon: previous,
+		attributes: { type: 'previous' },
 		scope: [ 'inserter', 'transform' ],
 		example: {
 			attributes: {
-				label: __( 'Next post' ),
+				label: __( 'Previous post' ),
 				arrow: 'arrow',
 			},
 		},
 	},
 	{
-		name: 'post-previous',
-		title: __( 'Previous Post' ),
+		isDefault: true,
+		name: 'post-next',
+		title: __( 'Next Post' ),
 		description: __(
-			'Displays the post link that precedes the current post.'
+			'Displays the post link that follows the current post.'
 		),
-		icon: previous,
-		attributes: { type: 'previous' },
+		icon: next,
+		attributes: { type: 'next' },
 		scope: [ 'inserter', 'transform' ],
 		example: {
 			attributes: {
-				label: __( 'Previous post' ),
+				label: __( 'Next post' ),
 				arrow: 'arrow',
 			},
 		},

package/src/post-template/edit.js

@@ -181,14 +181,15 @@ export default function PostTemplateEdit( {
 			 * Handle cases where sticky is set to `exclude` or `only`.
 			 * Which works as a `post__in/post__not_in` query for sticky posts.
 			 */
-			if ( sticky && sticky !== 'ignore' ) {
+			if ( [ 'exclude', 'only' ].includes( sticky ) ) {
 				query.sticky = sticky === 'only';
 			}
 
-			if ( sticky === 'ignore' ) {
+			// Empty string represents the default behavior of including sticky posts.
+			if ( [ '', 'ignore' ].includes( sticky ) ) {
 				// Remove any leftover sticky query parameter.
 				delete query.sticky;
-				query.ignore_sticky = true;
+				query.ignore_sticky = sticky === 'ignore';
 			}
 
 			// If `inherit` is truthy, adjust conditionally the query to create a better preview.

package/src/post-terms/block.json

@@ -19,11 +19,13 @@
 		},
 		"prefix": {
 			"type": "string",
-			"default": ""
+			"default": "",
+			"role": "content"
 		},
 		"suffix": {
 			"type": "string",
-			"default": ""
+			"default": "",
+			"role": "content"
 		}
 	},
 	"usesContext": [ "postId", "postType" ],

package/src/post-terms/edit.js

@@ -13,6 +13,7 @@ import {
 	useBlockProps,
 	useBlockDisplayInformation,
 	RichText,
+	useBlockEditingMode,
 } from '@wordpress/block-editor';
 import { createBlock, getDefaultBlockName } from '@wordpress/blocks';
 import { Spinner, TextControl } from '@wordpress/components';
@@ -46,6 +47,8 @@ export default function PostTermsEdit( {
 } ) {
 	const { term, textAlign, separator, prefix, suffix } = attributes;
 	const { postId, postType } = context;
+	const blockEditingMode = useBlockEditingMode();
+	const showControls = blockEditingMode === 'default';
 
 	const selectedTerm = useSelect(
 		( select ) => {
@@ -73,14 +76,16 @@ export default function PostTermsEdit( {
 
 	return (
 		<>
-			<BlockControls>
-				<AlignmentToolbar
-					value={ textAlign }
-					onChange={ ( nextAlign ) => {
-						setAttributes( { textAlign: nextAlign } );
-					} }
-				/>
-			</BlockControls>
+			{ showControls && (
+				<BlockControls>
+					<AlignmentToolbar
+						value={ textAlign }
+						onChange={ ( nextAlign ) => {
+							setAttributes( { textAlign: nextAlign } );
+						} }
+					/>
+				</BlockControls>
+			) }
 			<InspectorControls group="advanced">
 				<TextControl
 					__next40pxDefaultSize

package/src/preformatted/test/__snapshots__/transforms.native.js.snap

@@ -29,3 +29,9 @@ exports[`Preformatted block transforms to Paragraph block 1`] = `
 <p>Some <em>preformatted</em> text...<br />And more!</p>
 <!-- /wp:paragraph -->"
 `;
+
+exports[`Preformatted block transforms to Verse block 1`] = `
+"<!-- wp:verse -->
+<pre class="wp-block-verse">Some <em>preformatted</em> text...<br />And more!</pre>
+<!-- /wp:verse -->"
+`;

package/src/preformatted/test/transforms.native.js

@@ -16,7 +16,12 @@ const initialHtml = `
 <!-- /wp:preformatted -->`;
 
 const transformsWithInnerBlocks = [ 'Columns', 'Group' ];
-const blockTransforms = [ 'Paragraph', 'Code', ...transformsWithInnerBlocks ];
+const blockTransforms = [
+	'Paragraph',
+	'Code',
+	'Verse',
+	...transformsWithInnerBlocks,
+];
 
 setupCoreBlocks();
 

package/src/preformatted/transforms.js

@@ -7,7 +7,7 @@ const transforms = {
 	from: [
 		{
 			type: 'block',
-			blocks: [ 'core/code', 'core/paragraph' ],
+			blocks: [ 'core/code', 'core/paragraph', 'core/verse' ],
 			transform: ( { content, anchor } ) =>
 				createBlock( 'core/preformatted', {
 					content,
@@ -41,6 +41,12 @@ const transforms = {
 			blocks: [ 'core/code' ],
 			transform: ( attributes ) => createBlock( 'core/code', attributes ),
 		},
+		{
+			type: 'block',
+			blocks: [ 'core/verse' ],
+			transform: ( attributes ) =>
+				createBlock( 'core/verse', attributes ),
+		},
 	],
 };
 

package/src/read-more/block.json

@@ -8,7 +8,8 @@
 	"textdomain": "default",
 	"attributes": {
 		"content": {
-			"type": "string"
+			"type": "string",
+			"role": "content"
 		},
 		"linkTarget": {
 			"type": "string",

package/src/rss/block.json

@@ -18,7 +18,8 @@
 		},
 		"feedURL": {
 			"type": "string",
-			"default": ""
+			"default": "",
+			"role": "content"
 		},
 		"itemsToShow": {
 			"type": "number",