@wordpress/block-library 9.30.1-next.a730c9c8c.0 → 9.31.1-next.f56bd8138.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-library",
-	"version": "9.30.1-next.a730c9c8c.0",
+	"version": "9.31.1-next.f56bd8138.0",
 	"description": "Block library for the WordPress editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -42,39 +42,39 @@
 	],
 	"dependencies": {
 		"@babel/runtime": "7.25.7",
-		"@wordpress/a11y": "^4.30.1-next.a730c9c8c.0",
-		"@wordpress/api-fetch": "^7.30.1-next.a730c9c8c.0",
-		"@wordpress/autop": "^4.30.1-next.a730c9c8c.0",
-		"@wordpress/blob": "^4.30.1-next.a730c9c8c.0",
-		"@wordpress/block-editor": "^15.3.1-next.a730c9c8c.0",
-		"@wordpress/blocks": "^15.3.1-next.a730c9c8c.0",
-		"@wordpress/components": "^30.3.2-next.a730c9c8c.0",
-		"@wordpress/compose": "^7.30.1-next.a730c9c8c.0",
-		"@wordpress/core-data": "^7.30.1-next.a730c9c8c.0",
-		"@wordpress/data": "^10.30.1-next.a730c9c8c.0",
-		"@wordpress/date": "^5.30.1-next.a730c9c8c.0",
-		"@wordpress/deprecated": "^4.30.1-next.a730c9c8c.0",
-		"@wordpress/dom": "^4.30.1-next.a730c9c8c.0",
-		"@wordpress/element": "^6.30.1-next.a730c9c8c.0",
-		"@wordpress/escape-html": "^3.30.1-next.a730c9c8c.0",
-		"@wordpress/hooks": "^4.30.1-next.a730c9c8c.0",
-		"@wordpress/html-entities": "^4.30.1-next.a730c9c8c.0",
-		"@wordpress/i18n": "^6.3.1-next.a730c9c8c.0",
-		"@wordpress/icons": "^10.30.1-next.a730c9c8c.0",
-		"@wordpress/interactivity": "^6.30.1-next.a730c9c8c.0",
-		"@wordpress/interactivity-router": "^2.30.1-next.a730c9c8c.0",
-		"@wordpress/keyboard-shortcuts": "^5.30.1-next.a730c9c8c.0",
-		"@wordpress/keycodes": "^4.30.1-next.a730c9c8c.0",
-		"@wordpress/notices": "^5.30.1-next.a730c9c8c.0",
-		"@wordpress/patterns": "^2.30.1-next.a730c9c8c.0",
-		"@wordpress/primitives": "^4.30.1-next.a730c9c8c.0",
-		"@wordpress/private-apis": "^1.30.1-next.a730c9c8c.0",
-		"@wordpress/reusable-blocks": "^5.30.1-next.a730c9c8c.0",
-		"@wordpress/rich-text": "^7.30.1-next.a730c9c8c.0",
-		"@wordpress/server-side-render": "^6.6.1-next.a730c9c8c.0",
-		"@wordpress/url": "^4.30.1-next.a730c9c8c.0",
-		"@wordpress/viewport": "^6.30.1-next.a730c9c8c.0",
-		"@wordpress/wordcount": "^4.30.1-next.a730c9c8c.0",
+		"@wordpress/a11y": "^4.31.1-next.f56bd8138.0",
+		"@wordpress/api-fetch": "^7.31.1-next.f56bd8138.0",
+		"@wordpress/autop": "^4.31.1-next.f56bd8138.0",
+		"@wordpress/blob": "^4.31.1-next.f56bd8138.0",
+		"@wordpress/block-editor": "^15.4.1-next.f56bd8138.0",
+		"@wordpress/blocks": "^15.4.1-next.f56bd8138.0",
+		"@wordpress/components": "^30.5.1-next.f56bd8138.0",
+		"@wordpress/compose": "^7.31.1-next.f56bd8138.0",
+		"@wordpress/core-data": "^7.31.1-next.f56bd8138.0",
+		"@wordpress/data": "^10.31.1-next.f56bd8138.0",
+		"@wordpress/date": "^5.31.1-next.f56bd8138.0",
+		"@wordpress/deprecated": "^4.31.1-next.f56bd8138.0",
+		"@wordpress/dom": "^4.31.1-next.f56bd8138.0",
+		"@wordpress/element": "^6.31.1-next.f56bd8138.0",
+		"@wordpress/escape-html": "^3.31.1-next.f56bd8138.0",
+		"@wordpress/hooks": "^4.31.1-next.f56bd8138.0",
+		"@wordpress/html-entities": "^4.31.1-next.f56bd8138.0",
+		"@wordpress/i18n": "^6.4.1-next.f56bd8138.0",
+		"@wordpress/icons": "^10.31.1-next.f56bd8138.0",
+		"@wordpress/interactivity": "^6.31.1-next.f56bd8138.0",
+		"@wordpress/interactivity-router": "^2.31.1-next.f56bd8138.0",
+		"@wordpress/keyboard-shortcuts": "^5.31.1-next.f56bd8138.0",
+		"@wordpress/keycodes": "^4.31.1-next.f56bd8138.0",
+		"@wordpress/notices": "^5.31.1-next.f56bd8138.0",
+		"@wordpress/patterns": "^2.31.1-next.f56bd8138.0",
+		"@wordpress/primitives": "^4.31.1-next.f56bd8138.0",
+		"@wordpress/private-apis": "^1.31.1-next.f56bd8138.0",
+		"@wordpress/reusable-blocks": "^5.31.1-next.f56bd8138.0",
+		"@wordpress/rich-text": "^7.31.1-next.f56bd8138.0",
+		"@wordpress/server-side-render": "^6.7.1-next.f56bd8138.0",
+		"@wordpress/url": "^4.31.1-next.f56bd8138.0",
+		"@wordpress/viewport": "^6.31.1-next.f56bd8138.0",
+		"@wordpress/wordcount": "^4.31.1-next.f56bd8138.0",
 		"change-case": "^4.1.2",
 		"clsx": "^2.1.1",
 		"colord": "^2.7.0",
@@ -92,5 +92,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "85a580bd2c55f811c8969b42dbb10209d19d514e"
+	"gitHead": "ea4a281fd857f48338877590de8c8eb9b9a8cef4"
 }

package/src/accordion/block.json

@@ -19,7 +19,7 @@
 		},
 		"color": {
 			"background": true,
-			"gradient": true
+			"gradients": true
 		},
 		"__experimentalBorder": {
 			"color": true,
@@ -40,7 +40,20 @@
 		},
 		"shadow": true,
 		"layout": true,
-		"interactivity": true
+		"interactivity": true,
+		"typography": {
+			"fontSize": true,
+			"lineHeight": true,
+			"__experimentalFontFamily": true,
+			"__experimentalFontWeight": true,
+			"__experimentalFontStyle": true,
+			"__experimentalTextTransform": true,
+			"__experimentalTextDecoration": true,
+			"__experimentalLetterSpacing": true,
+			"__experimentalDefaultControls": {
+				"fontSize": true
+			}
+		}
 	},
 	"attributes": {
 		"iconPosition": {
@@ -62,5 +75,6 @@
 	},
 	"allowedBlocks": [ "core/accordion-content" ],
 	"textdomain": "default",
-	"style": "wp-block-accordion"
+	"style": "wp-block-accordion",
+	"viewScriptModule": "@wordpress/block-library/accordion/view"
 }

package/src/accordion/edit.js

@@ -34,6 +34,7 @@ export default function Edit( {
 	attributes: { autoclose, iconPosition, showIcon },
 	clientId,
 	setAttributes,
+	isSelected: isSingleSelected,
 } ) {
 	const blockProps = useBlockProps();
 	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
@@ -53,14 +54,13 @@ export default function Edit( {
 
 	return (
 		<>
-			<BlockControls group="other">
-				<ToolbarButton
-					label={ __( 'Add accordion content block' ) }
-					onClick={ addAccordionContentBlock }
-				>
-					{ __( 'Add' ) }
-				</ToolbarButton>
-			</BlockControls>
+			{ isSingleSelected && (
+				<BlockControls group="other">
+					<ToolbarButton onClick={ addAccordionContentBlock }>
+						{ __( 'Add' ) }
+					</ToolbarButton>
+				</BlockControls>
+			) }
 			<InspectorControls key="setting">
 				<ToolsPanel
 					label={ __( 'Settings' ) }
@@ -109,6 +109,9 @@ export default function Edit( {
 							onChange={ ( value ) => {
 								setAttributes( {
 									showIcon: value,
+									iconPosition: value
+										? iconPosition
+										: 'right',
 								} );
 							} }
 							checked={ showIcon }
@@ -117,34 +120,36 @@ export default function Edit( {
 							) }
 						/>
 					</ToolsPanelItem>
-					<ToolsPanelItem
-						label={ __( 'Icon Position' ) }
-						isShownByDefault
-						hasValue={ () => iconPosition !== 'right' }
-						onDeselect={ () =>
-							setAttributes( { iconPosition: 'right' } )
-						}
-					>
-						<ToggleGroupControl
-							__nextHasNoMarginBottom
-							__next40pxDefaultSize
-							isBlock
+					{ showIcon && (
+						<ToolsPanelItem
 							label={ __( 'Icon Position' ) }
-							value={ iconPosition }
-							onChange={ ( value ) => {
-								setAttributes( { iconPosition: value } );
-							} }
+							isShownByDefault
+							hasValue={ () => iconPosition !== 'right' }
+							onDeselect={ () =>
+								setAttributes( { iconPosition: 'right' } )
+							}
 						>
-							<ToggleGroupControlOption
-								label={ __( 'Left' ) }
-								value="left"
-							/>
-							<ToggleGroupControlOption
-								label={ __( 'Right' ) }
-								value="right"
-							/>
-						</ToggleGroupControl>
-					</ToolsPanelItem>
+							<ToggleGroupControl
+								__nextHasNoMarginBottom
+								__next40pxDefaultSize
+								isBlock
+								label={ __( 'Icon Position' ) }
+								value={ iconPosition }
+								onChange={ ( value ) => {
+									setAttributes( { iconPosition: value } );
+								} }
+							>
+								<ToggleGroupControlOption
+									label={ __( 'Left' ) }
+									value="left"
+								/>
+								<ToggleGroupControlOption
+									label={ __( 'Right' ) }
+									value="right"
+								/>
+							</ToggleGroupControl>
+						</ToolsPanelItem>
+					) }
 				</ToolsPanel>
 			</InspectorControls>
 			<div { ...innerBlocksProps } />

package/src/accordion/index.js

@@ -1,3 +1,8 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
 /**
  * Internal dependencies
  */
@@ -13,7 +18,36 @@ export { metadata, name };
 
 export const settings = {
 	icon,
-	example: {},
+	example: {
+		innerBlocks: [
+			{
+				name: 'core/accordion-content',
+				innerBlocks: [
+					{
+						name: 'core/accordion-header',
+						attributes: {
+							title: __(
+								'Lorem ipsum dolor sit amet, consectetur.'
+							),
+						},
+					},
+				],
+			},
+			{
+				name: 'core/accordion-content',
+				innerBlocks: [
+					{
+						name: 'core/accordion-header',
+						attributes: {
+							title: __(
+								'Suspendisse commodo lacus, interdum et.'
+							),
+						},
+					},
+				],
+			},
+		],
+	},
 	edit,
 	save,
 };

package/src/accordion/index.php

@@ -15,28 +15,12 @@ function render_block_core_accordion( $attributes, $content ) {
 		return $content;
 	}
 
-	$suffix = wp_scripts_get_suffix();
-	if ( defined( 'IS_GUTENBERG_PLUGIN' ) && IS_GUTENBERG_PLUGIN ) {
-		$module_url = gutenberg_url( '/build-module/block-library/accordion/view.min.js' );
-	}
-
-	wp_register_script_module(
-		'@wordpress/block-library/accordion',
-		isset( $module_url ) ? $module_url : includes_url( "blocks/accordion/view{$suffix}.js" ),
-		array( '@wordpress/interactivity' ),
-		defined( 'GUTENBERG_VERSION' ) ? GUTENBERG_VERSION : get_bloginfo( 'version' )
-	);
-
-	wp_enqueue_script_module( '@wordpress/block-library/accordion' );
-
-	$p             = new WP_HTML_Tag_Processor( $content );
-	$autoclose     = $attributes['autoclose'] ? 'true' : 'false';
-	$icon          = $attributes['icon'] ?? 'plus';
-	$icon_position = $attributes['iconPosition'] ?? 'right';
+	$p         = new WP_HTML_Tag_Processor( $content );
+	$autoclose = $attributes['autoclose'] ? 'true' : 'false';
 
 	if ( $p->next_tag( array( 'class_name' => 'wp-block-accordion' ) ) ) {
 		$p->set_attribute( 'data-wp-interactive', 'core/accordion' );
-		$p->set_attribute( 'data-wp-context', '{ "autoclose": ' . $autoclose . ', "isOpen": [], "icon": "' . $icon . '", "iconPosition": "' . $icon_position . '" }' );
+		$p->set_attribute( 'data-wp-context', '{ "autoclose": ' . $autoclose . ', "accordionContents": [] }' );
 
 		// Only modify content if directives have been set.
 		$content = $p->get_updated_html();

package/src/accordion/save.js

@@ -1,23 +1,9 @@
-/**
- * External dependencies
- */
-import clsx from 'clsx';
 /**
  * WordPress dependencies
  */
 import { useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor';
 
-export default function save( { attributes } ) {
-	const { iconPosition } = attributes;
+export default function save() {
 	const blockProps = useBlockProps.save();
-	const className = clsx(
-		{
-			'icon-position-left': iconPosition === 'left',
-		},
-		blockProps.className
-	);
-
-	return (
-		<div { ...useInnerBlocksProps.save( { ...blockProps, className } ) } />
-	);
+	return <div { ...useInnerBlocksProps.save( blockProps ) } />;
 }

package/src/accordion/style.scss

@@ -1,3 +1,8 @@
+.wp-block-accordion {
+	// This block allows custom padding, margin, and border, as it affects how the block’s width and height are calculated.
+	box-sizing: border-box;
+}
+
 .wp-block-accordion-content {
 	display: grid;
 	grid-template-rows: max-content 0fr;
@@ -7,7 +12,7 @@
 	grid-template-rows: max-content 1fr;
 
 	> .wp-block-accordion-header {
-		.accordion-content__toggle-icon.has-icon-plus {
+		.accordion-content__toggle-icon {
 			transform: rotate(45deg);
 		}
 	}
@@ -36,8 +41,16 @@
 	width: 100%;
 }
 
-.accordion-content__toggle > span {
-	width: 100%;
+.accordion-content__toggle-title {
+	flex: 1;
+}
+
+.accordion-content__toggle-icon {
+	width: 1.2em;
+	height: 1.2em;
+	display: flex;
+	align-items: center;
+	justify-content: center;
 }
 
 .is-layout-flow > .wp-block-accordion-panel,
@@ -60,11 +73,6 @@
 	background-color: unset;
 }
 
-.wp-block-accordion-header.icon-position-left .accordion-content__toggle {
-	/* stylelint-disable-next-line declaration-property-value-allowed-list -- This should be refactored to not use the row-reverse value. */
-	flex-direction: row-reverse;
-}
-
 .accordion-content__toggle:focus-visible {
 	outline: 2px solid -webkit-focus-ring-color;
 	outline-offset: 2px;

package/src/accordion/view.js

@@ -1,38 +1,87 @@
 /**
  * WordPress dependencies
  */
-import { store, getContext } from '@wordpress/interactivity';
+import { store, getContext, withSyncEvent } from '@wordpress/interactivity';
 
-const { state } = store( 'core/accordion', {
+store( 'core/accordion', {
 	state: {
 		get isOpen() {
-			const { isOpen, id } = getContext();
-			return isOpen.includes( id );
+			const { id, accordionContents } = getContext();
+			const accordionContent = accordionContents.find(
+				( item ) => item.id === id
+			);
+			return accordionContent ? accordionContent.isOpen : false;
 		},
 	},
 	actions: {
 		toggle: () => {
 			const context = getContext();
-			const { id, autoclose } = context;
+			const { id, autoclose, accordionContents } = context;
+			const accordionContent = accordionContents.find(
+				( item ) => item.id === id
+			);
 
 			if ( autoclose ) {
-				context.isOpen = state.isOpen ? [] : [ id ];
-			} else if ( state.isOpen ) {
-				context.isOpen = context.isOpen.filter(
-					( item ) => item !== id
-				);
+				accordionContents.forEach( ( item ) => {
+					item.isOpen =
+						item.id === id ? ! accordionContent.isOpen : false;
+				} );
 			} else {
-				context.isOpen.push( id );
+				accordionContent.isOpen = ! accordionContent.isOpen;
 			}
 		},
+		handleKeyDown: withSyncEvent( ( event ) => {
+			if (
+				event.key !== 'ArrowUp' &&
+				event.key !== 'ArrowDown' &&
+				event.key !== 'Home' &&
+				event.key !== 'End'
+			) {
+				return;
+			}
+
+			event.preventDefault();
+			const context = getContext();
+			const { id, accordionContents } = context;
+			const currentIndex = accordionContents.findIndex(
+				( item ) => item.id === id
+			);
+
+			let nextIndex;
+
+			switch ( event.key ) {
+				case 'ArrowUp':
+					nextIndex = Math.max( 0, currentIndex - 1 );
+					break;
+				case 'ArrowDown':
+					nextIndex = Math.min(
+						currentIndex + 1,
+						accordionContents.length - 1
+					);
+					break;
+				case 'Home':
+					nextIndex = 0;
+					break;
+				case 'End':
+					nextIndex = accordionContents.length - 1;
+					break;
+			}
+
+			const nextId = accordionContents[ nextIndex ].id;
+			const nextButton = document.getElementById( nextId );
+			if ( nextButton ) {
+				nextButton.focus();
+			}
+		} ),
 	},
 	callbacks: {
-		initIsOpen: () => {
+		initAccordionContents: () => {
 			const context = getContext();
 			const { id, openByDefault } = context;
-			if ( openByDefault ) {
-				context.isOpen.push( id );
-			}
+			context.accordionContents.push( {
+				id,
+				isOpen: openByDefault,
+			} );
 		},
 	},
 } );

package/src/accordion-content/block.json

@@ -11,7 +11,7 @@
 	"supports": {
 		"color": {
 			"background": true,
-			"gradient": true
+			"gradients": true
 		},
 		"interactivity": true,
 		"spacing": {
@@ -31,7 +31,20 @@
 			}
 		},
 		"shadow": true,
-		"layout": true
+		"layout": true,
+		"typography": {
+			"fontSize": true,
+			"lineHeight": true,
+			"__experimentalFontFamily": true,
+			"__experimentalFontWeight": true,
+			"__experimentalFontStyle": true,
+			"__experimentalTextTransform": true,
+			"__experimentalTextDecoration": true,
+			"__experimentalLetterSpacing": true,
+			"__experimentalDefaultControls": {
+				"fontSize": true
+			}
+		}
 	},
 	"attributes": {
 		"openByDefault": {

package/src/accordion-content/index.php

@@ -35,10 +35,11 @@ function block_core_accordion_content_render( $attributes, $content ) {
 		$open_by_default = $attributes['openByDefault'] ? 'true' : 'false';
 		$p->set_attribute( 'data-wp-context', '{ "id": "' . $unique_id . '", "openByDefault": ' . $open_by_default . ' }' );
 		$p->set_attribute( 'data-wp-class--is-open', 'state.isOpen' );
-		$p->set_attribute( 'data-wp-init', 'callbacks.initIsOpen' );
+		$p->set_attribute( 'data-wp-init', 'callbacks.initAccordionContents' );
 
 		if ( $p->next_tag( array( 'class_name' => 'accordion-content__toggle' ) ) ) {
 			$p->set_attribute( 'data-wp-on--click', 'actions.toggle' );
+			$p->set_attribute( 'data-wp-on--keydown', 'actions.handleKeyDown' );
 			$p->set_attribute( 'id', $unique_id );
 			$p->set_attribute( 'aria-controls', $unique_id . '-panel' );
 			$p->set_attribute( 'data-wp-bind--aria-expanded', 'state.isOpen' );

package/src/accordion-header/block.json

@@ -15,17 +15,16 @@
 		"anchor": true,
 		"color": {
 			"background": true,
-			"gradient": true
+			"gradients": true
 		},
 		"align": false,
 		"interactivity": true,
 		"spacing": {
 			"padding": true,
-			"margin": [ "top", "bottom" ],
 			"__experimentalDefaultControls": {
-				"padding": true,
-				"margin": true
-			}
+				"padding": true
+			},
+			"__experimentalSkipSerialization": true
 		},
 		"__experimentalBorder": {
 			"color": true,
@@ -63,7 +62,8 @@
 		"title": {
 			"type": "rich-text",
 			"source": "rich-text",
-			"selector": "span"
+			"selector": ".accordion-content__toggle-title",
+			"role": "content"
 		},
 		"level": {
 			"type": "number",