@wordpress/block-library 9.23.0 → 9.25.0

package/build-style/video/style.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/build-style/video/theme-rtl.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/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.25.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.25.0",
+		"@wordpress/api-fetch": "^7.25.0",
+		"@wordpress/autop": "^4.25.0",
+		"@wordpress/blob": "^4.25.0",
+		"@wordpress/block-editor": "^14.20.0",
+		"@wordpress/blocks": "^14.14.0",
+		"@wordpress/components": "^29.11.0",
+		"@wordpress/compose": "^7.25.0",
+		"@wordpress/core-data": "^7.25.0",
+		"@wordpress/data": "^10.25.0",
+		"@wordpress/date": "^5.25.0",
+		"@wordpress/deprecated": "^4.25.0",
+		"@wordpress/dom": "^4.25.0",
+		"@wordpress/element": "^6.25.0",
+		"@wordpress/escape-html": "^3.25.0",
+		"@wordpress/hooks": "^4.25.0",
+		"@wordpress/html-entities": "^4.25.0",
+		"@wordpress/i18n": "^5.25.0",
+		"@wordpress/icons": "^10.25.0",
+		"@wordpress/interactivity": "^6.25.0",
+		"@wordpress/interactivity-router": "^2.25.0",
+		"@wordpress/keyboard-shortcuts": "^5.25.0",
+		"@wordpress/keycodes": "^4.25.0",
+		"@wordpress/notices": "^5.25.0",
+		"@wordpress/patterns": "^2.25.0",
+		"@wordpress/primitives": "^4.25.0",
+		"@wordpress/private-apis": "^1.25.0",
+		"@wordpress/reusable-blocks": "^5.25.0",
+		"@wordpress/rich-text": "^7.25.0",
+		"@wordpress/server-side-render": "^6.1.0",
+		"@wordpress/url": "^4.25.0",
+		"@wordpress/viewport": "^6.25.0",
+		"@wordpress/wordcount": "^4.25.0",
 		"change-case": "^4.1.2",
 		"clsx": "^2.1.1",
 		"colord": "^2.7.0",
@@ -91,5 +91,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "ab5c79cd40adbb68898536c50e035b0a734338ea"
+	"gitHead": "d1acd76ffff33ab01f0a948d2f51e5e45c95158d"
 }

package/src/button/edit.js

@@ -10,6 +10,7 @@ import { NEW_TAB_TARGET, NOFOLLOW_REL } from './constants';
 import { getUpdatedLinkAttributes } from './get-updated-link-attributes';
 import removeAnchorTag from '../utils/remove-anchor-tag';
 import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
+import { unlock } from '../lock-unlock';
 
 /**
  * WordPress dependencies
@@ -47,6 +48,7 @@ import {
 	useBlockEditingMode,
 	getTypographyClassesAndStyles as useTypographyProps,
 	useSettings,
+	privateApis as blockEditorPrivateApis,
 } from '@wordpress/block-editor';
 import { displayShortcut, isKeyboardEvent, ENTER } from '@wordpress/keycodes';
 import { link, linkOff } from '@wordpress/icons';
@@ -59,6 +61,8 @@ import {
 import { useMergeRefs, useRefEffect } from '@wordpress/compose';
 import { useSelect, useDispatch } from '@wordpress/data';
 
+const { HTMLElementControl } = unlock( blockEditorPrivateApis );
+
 const LINK_SETTINGS = [
 	...LinkControl.DEFAULT_LINK_SETTINGS,
 	{
@@ -325,6 +329,10 @@ function ButtonEdit( props ) {
 		},
 	} );
 
+	const hasNonContentControls = blockEditingMode === 'default';
+	const hasBlockControls =
+		hasNonContentControls || ( isLinkTag && ! lockUrlControls );
+
 	return (
 		<>
 			<div
@@ -374,35 +382,32 @@ function ButtonEdit( props ) {
 					identifier="text"
 				/>
 			</div>
-			<BlockControls group="block">
-				{ blockEditingMode === 'default' && (
-					<AlignmentControl
-						value={ textAlign }
-						onChange={ ( nextAlign ) => {
-							setAttributes( { textAlign: nextAlign } );
-						} }
-					/>
-				) }
-				{ ! isURLSet && isLinkTag && ! lockUrlControls && (
-					<ToolbarButton
-						name="link"
-						icon={ link }
-						title={ __( 'Link' ) }
-						shortcut={ displayShortcut.primary( 'k' ) }
-						onClick={ startEditing }
-					/>
-				) }
-				{ isURLSet && isLinkTag && ! lockUrlControls && (
-					<ToolbarButton
-						name="link"
-						icon={ linkOff }
-						title={ __( 'Unlink' ) }
-						shortcut={ displayShortcut.primaryShift( 'k' ) }
-						onClick={ unlink }
-						isActive
-					/>
-				) }
-			</BlockControls>
+			{ hasBlockControls && (
+				<BlockControls group="block">
+					{ hasNonContentControls && (
+						<AlignmentControl
+							value={ textAlign }
+							onChange={ ( nextAlign ) => {
+								setAttributes( { textAlign: nextAlign } );
+							} }
+						/>
+					) }
+					{ isLinkTag && ! lockUrlControls && (
+						<ToolbarButton
+							name="link"
+							icon={ ! isURLSet ? link : linkOff }
+							title={ ! isURLSet ? __( 'Link' ) : __( 'Unlink' ) }
+							shortcut={
+								! isURLSet
+									? displayShortcut.primary( 'k' )
+									: displayShortcut.primaryShift( 'k' )
+							}
+							onClick={ ! isURLSet ? startEditing : unlink }
+							isActive={ isURLSet }
+						/>
+					) }
+				</BlockControls>
+			) }
 			{ isLinkTag &&
 				isSelected &&
 				( isEditingURL || isURLSet ) &&
@@ -455,6 +460,16 @@ function ButtonEdit( props ) {
 				/>
 			</InspectorControls>
 			<InspectorControls group="advanced">
+				<HTMLElementControl
+					tagName={ tagName }
+					onChange={ ( value ) =>
+						setAttributes( { tagName: value } )
+					}
+					options={ [
+						{ label: __( 'Default (<a>)' ), value: 'a' },
+						{ label: '<button>', value: 'button' },
+					] }
+				/>
 				{ isLinkTag && (
 					<TextControl
 						__next40pxDefaultSize

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/columns/edit.js

@@ -153,7 +153,6 @@ function ColumnInspectorControls( {
 		<ToolsPanel
 			label={ __( 'Settings' ) }
 			resetAll={ () => {
-				updateColumns( count, minCount );
 				setAttributes( {
 					isStackedOnMobile: true,
 				} );
@@ -161,36 +160,26 @@ function ColumnInspectorControls( {
 			dropdownMenuProps={ dropdownMenuProps }
 		>
 			{ canInsertColumnBlock && (
-				<ToolsPanelItem
-					label={ __( 'Columns' ) }
-					isShownByDefault
-					hasValue={ () => count }
-					onDeselect={ () => updateColumns( count, minCount ) }
-				>
-					<VStack spacing={ 4 }>
-						<RangeControl
-							__nextHasNoMarginBottom
-							__next40pxDefaultSize
-							label={ __( 'Columns' ) }
-							value={ count }
-							onChange={ ( value ) =>
-								updateColumns(
-									count,
-									Math.max( minCount, value )
-								)
-							}
-							min={ Math.max( 1, minCount ) }
-							max={ Math.max( 6, count ) }
-						/>
-						{ count > 6 && (
-							<Notice status="warning" isDismissible={ false }>
-								{ __(
-									'This column count exceeds the recommended amount and may cause visual breakage.'
-								) }
-							</Notice>
-						) }
-					</VStack>
-				</ToolsPanelItem>
+				<VStack spacing={ 4 } style={ { gridColumn: '1 / -1' } }>
+					<RangeControl
+						__nextHasNoMarginBottom
+						__next40pxDefaultSize
+						label={ __( 'Columns' ) }
+						value={ count }
+						onChange={ ( value ) =>
+							updateColumns( count, Math.max( minCount, value ) )
+						}
+						min={ Math.max( 1, minCount ) }
+						max={ Math.max( 6, count ) }
+					/>
+					{ count > 6 && (
+						<Notice status="warning" isDismissible={ false }>
+							{ __(
+								'This column count exceeds the recommended amount and may cause visual breakage.'
+							) }
+						</Notice>
+					) }
+				</VStack>
 			) }
 			<ToolsPanelItem
 				label={ __( 'Stack on mobile' ) }

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

@@ -15,7 +15,16 @@ import {
 	useBlockProps,
 } from '@wordpress/block-editor';
 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';
 
 /**
  * Renders the `core/comment-author-name` block on the editor.
@@ -36,6 +45,7 @@ export default function Edit( {
 	context: { commentId },
 	setAttributes,
 } ) {
+	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
 	const blockProps = useBlockProps( {
 		className: clsx( {
 			[ `has-text-align-${ textAlign }` ]: textAlign,
@@ -70,26 +80,57 @@ export default function Edit( {
 
 	const inspectorControls = (
 		<InspectorControls>
-			<PanelBody title={ __( 'Settings' ) }>
-				<ToggleControl
-					__nextHasNoMarginBottom
+			<ToolsPanel
+				label={ __( 'Settings' ) }
+				resetAll={ () => {
+					setAttributes( {
+						isLink: true,
+						linkTarget: '_self',
+					} );
+				} }
+				dropdownMenuProps={ dropdownMenuProps }
+			>
+				<ToolsPanelItem
 					label={ __( 'Link to authors URL' ) }
-					onChange={ () => setAttributes( { isLink: ! isLink } ) }
-					checked={ isLink }
-				/>
-				{ isLink && (
+					isShownByDefault
+					hasValue={ () => ! isLink }
+					onDeselect={ () =>
+						setAttributes( {
+							isLink: true,
+						} )
+					}
+				>
 					<ToggleControl
 						__nextHasNoMarginBottom
+						label={ __( 'Link to authors URL' ) }
+						onChange={ () => setAttributes( { isLink: ! isLink } ) }
+						checked={ isLink }
+					/>
+				</ToolsPanelItem>
+				{ isLink && (
+					<ToolsPanelItem
 						label={ __( 'Open in new tab' ) }
-						onChange={ ( value ) =>
+						isShownByDefault
+						hasValue={ () => linkTarget !== '_self' }
+						onDeselect={ () =>
 							setAttributes( {
-								linkTarget: value ? '_blank' : '_self',
+								linkTarget: '_self',
 							} )
 						}
-						checked={ linkTarget === '_blank' }
-					/>
+					>
+						<ToggleControl
+							__nextHasNoMarginBottom
+							label={ __( 'Open in new tab' ) }
+							onChange={ ( value ) =>
+								setAttributes( {
+									linkTarget: value ? '_blank' : '_self',
+								} )
+							}
+							checked={ linkTarget === '_blank' }
+						/>
+					</ToolsPanelItem>
 				) }
-			</PanelBody>
+			</ToolsPanel>
 		</InspectorControls>
 	);