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

package/src/accordion/edit.js

@@ -6,7 +6,9 @@ import {
 	useInnerBlocksProps,
 	InspectorControls,
 	BlockControls,
+	useBlockEditingMode,
 	store as blockEditorStore,
+	HeadingLevelDropdown,
 } from '@wordpress/block-editor';
 import { __ } from '@wordpress/i18n';
 import {
@@ -16,8 +18,9 @@ import {
 	__experimentalToolsPanel as ToolsPanel,
 	__experimentalToolsPanelItem as ToolsPanelItem,
 	ToolbarButton,
+	ToolbarGroup,
 } from '@wordpress/components';
-import { useDispatch } from '@wordpress/data';
+import { useDispatch, useSelect, useRegistry } from '@wordpress/data';
 import { createBlock } from '@wordpress/blocks';
 
 /**
@@ -25,20 +28,32 @@ import { createBlock } from '@wordpress/blocks';
  */
 import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
 
-const ACCORDION_BLOCK_NAME = 'core/accordion-content';
+const ACCORDION_BLOCK_NAME = 'core/accordion-item';
+const ACCORDION_HEADING_BLOCK_NAME = 'core/accordion-heading';
 const ACCORDION_BLOCK = {
 	name: ACCORDION_BLOCK_NAME,
 };
 
 export default function Edit( {
-	attributes: { autoclose, iconPosition, showIcon },
+	attributes: {
+		autoclose,
+		iconPosition,
+		showIcon,
+		headingLevel,
+		levelOptions,
+	},
 	clientId,
 	setAttributes,
 	isSelected: isSingleSelected,
 } ) {
+	const registry = useRegistry();
+	const { getBlockOrder } = useSelect( blockEditorStore );
 	const blockProps = useBlockProps();
 	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
-	const { insertBlock } = useDispatch( blockEditorStore );
+	const { updateBlockAttributes, insertBlock } =
+		useDispatch( blockEditorStore );
+	const blockEditingMode = useBlockEditingMode();
+	const isContentOnlyMode = blockEditingMode === 'contentOnly';
 
 	const innerBlocksProps = useInnerBlocksProps( blockProps, {
 		template: [ [ ACCORDION_BLOCK_NAME ], [ ACCORDION_BLOCK_NAME ] ],
@@ -47,19 +62,60 @@ export default function Edit( {
 		templateInsertUpdatesSelection: true,
 	} );
 
-	const addAccordionContentBlock = () => {
-		const newAccordionContent = createBlock( ACCORDION_BLOCK_NAME );
-		insertBlock( newAccordionContent, undefined, clientId );
+	const addAccordionItemBlock = () => {
+		// When adding, set the header's level to current headingLevel
+		const newAccordionItem = createBlock( ACCORDION_BLOCK_NAME, {}, [
+			createBlock( ACCORDION_HEADING_BLOCK_NAME, {
+				level: headingLevel,
+			} ),
+			createBlock( 'core/accordion-panel', {} ),
+		] );
+		insertBlock( newAccordionItem, undefined, clientId );
+	};
+
+	/**
+	 * Update all child Accordion Header blocks with a new heading level
+	 * based on the accordion group setting.
+	 * @param {number} newHeadingLevel The new heading level to set
+	 */
+	const updateHeadingLevel = ( newHeadingLevel ) => {
+		const innerBlockClientIds = getBlockOrder( clientId );
+
+		// Get all accordion-header blocks from all accordion-content blocks.
+		const accordionHeaderClientIds = [];
+		innerBlockClientIds.forEach( ( contentClientId ) => {
+			const headerClientIds = getBlockOrder( contentClientId );
+			accordionHeaderClientIds.push( ...headerClientIds );
+		} );
+
+		// Update own and child block heading levels.
+		registry.batch( () => {
+			setAttributes( { headingLevel: newHeadingLevel } );
+			updateBlockAttributes( accordionHeaderClientIds, {
+				level: newHeadingLevel,
+			} );
+		} );
 	};
 
 	return (
 		<>
-			{ isSingleSelected && (
-				<BlockControls group="other">
-					<ToolbarButton onClick={ addAccordionContentBlock }>
-						{ __( 'Add' ) }
-					</ToolbarButton>
-				</BlockControls>
+			{ isSingleSelected && ! isContentOnlyMode && (
+				<>
+					<BlockControls>
+						<ToolbarGroup>
+							<HeadingLevelDropdown
+								value={ headingLevel }
+								options={ levelOptions }
+								onChange={ updateHeadingLevel }
+							/>
+						</ToolbarGroup>
+					</BlockControls>
+					<BlockControls group="other">
+						<ToolbarButton onClick={ addAccordionItemBlock }>
+							{ __( 'Add' ) }
+						</ToolbarButton>
+					</BlockControls>
+				</>
 			) }
 			<InspectorControls key="setting">
 				<ToolsPanel
@@ -69,6 +125,7 @@ export default function Edit( {
 							autoclose: false,
 							showIcon: true,
 							iconPosition: 'right',
+							headingLevel: 3,
 						} );
 					} }
 					dropdownMenuProps={ dropdownMenuProps }

package/src/accordion/index.js

@@ -21,10 +21,10 @@ export const settings = {
 	example: {
 		innerBlocks: [
 			{
-				name: 'core/accordion-content',
+				name: 'core/accordion-item',
 				innerBlocks: [
 					{
-						name: 'core/accordion-header',
+						name: 'core/accordion-heading',
 						attributes: {
 							title: __(
 								'Lorem ipsum dolor sit amet, consectetur.'
@@ -34,10 +34,10 @@ export const settings = {
 				],
 			},
 			{
-				name: 'core/accordion-content',
+				name: 'core/accordion-item',
 				innerBlocks: [
 					{
-						name: 'core/accordion-header',
+						name: 'core/accordion-heading',
 						attributes: {
 							title: __(
 								'Suspendisse commodo lacus, interdum et.'

package/src/accordion/index.php

@@ -20,7 +20,7 @@ function render_block_core_accordion( $attributes, $content ) {
 
 	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 . ', "accordionContents": [] }' );
+		$p->set_attribute( 'data-wp-context', '{ "autoclose": ' . $autoclose . ', "accordionItems": [] }' );
 
 		// Only modify content if directives have been set.
 		$content = $p->get_updated_html();

package/src/accordion/view.js

@@ -6,28 +6,28 @@ import { store, getContext, withSyncEvent } from '@wordpress/interactivity';
 store( 'core/accordion', {
 	state: {
 		get isOpen() {
-			const { id, accordionContents } = getContext();
-			const accordionContent = accordionContents.find(
+			const { id, accordionItems } = getContext();
+			const accordionItem = accordionItems.find(
 				( item ) => item.id === id
 			);
-			return accordionContent ? accordionContent.isOpen : false;
+			return accordionItem ? accordionItem.isOpen : false;
 		},
 	},
 	actions: {
 		toggle: () => {
 			const context = getContext();
-			const { id, autoclose, accordionContents } = context;
-			const accordionContent = accordionContents.find(
+			const { id, autoclose, accordionItems } = context;
+			const accordionItem = accordionItems.find(
 				( item ) => item.id === id
 			);
 
 			if ( autoclose ) {
-				accordionContents.forEach( ( item ) => {
+				accordionItems.forEach( ( item ) => {
 					item.isOpen =
-						item.id === id ? ! accordionContent.isOpen : false;
+						item.id === id ? ! accordionItem.isOpen : false;
 				} );
 			} else {
-				accordionContent.isOpen = ! accordionContent.isOpen;
+				accordionItem.isOpen = ! accordionItem.isOpen;
 			}
 		},
 		handleKeyDown: withSyncEvent( ( event ) => {
@@ -42,8 +42,8 @@ store( 'core/accordion', {
 
 			event.preventDefault();
 			const context = getContext();
-			const { id, accordionContents } = context;
-			const currentIndex = accordionContents.findIndex(
+			const { id, accordionItems } = context;
+			const currentIndex = accordionItems.findIndex(
 				( item ) => item.id === id
 			);
 
@@ -56,18 +56,18 @@ store( 'core/accordion', {
 				case 'ArrowDown':
 					nextIndex = Math.min(
 						currentIndex + 1,
-						accordionContents.length - 1
+						accordionItems.length - 1
 					);
 					break;
 				case 'Home':
 					nextIndex = 0;
 					break;
 				case 'End':
-					nextIndex = accordionContents.length - 1;
+					nextIndex = accordionItems.length - 1;
 					break;
 			}
 
-			const nextId = accordionContents[ nextIndex ].id;
+			const nextId = accordionItems[ nextIndex ].id;
 			const nextButton = document.getElementById( nextId );
 			if ( nextButton ) {
 				nextButton.focus();
@@ -75,10 +75,10 @@ store( 'core/accordion', {
 		} ),
 	},
 	callbacks: {
-		initAccordionContents: () => {
+		initAccordionItems: () => {
 			const context = getContext();
 			const { id, openByDefault } = context;
-			context.accordionContents.push( {
+			context.accordionItems.push( {
 				id,
 				isOpen: openByDefault,
 			} );

package/src/{accordion-header → accordion-heading}/block.json

@@ -1,15 +1,16 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 3,
-	"name": "core/accordion-header",
-	"title": "Accordion Header",
+	"name": "core/accordion-heading",
+	"title": "Accordion Heading",
 	"category": "design",
-	"description": "Displays an accordion header.",
+	"description": "Displays an accordion heading.",
 	"__experimental": true,
-	"parent": [ "core/accordion-content" ],
+	"parent": [ "core/accordion-item" ],
 	"usesContext": [
 		"core/accordion-icon-position",
-		"core/accordion-show-icon"
+		"core/accordion-show-icon",
+		"core/accordion-heading-level"
 	],
 	"supports": {
 		"anchor": true,
@@ -39,7 +40,6 @@
 			}
 		},
 		"typography": {
-			"textAlign": true,
 			"fontSize": true,
 			"__experimentalFontFamily": true,
 			"__experimentalFontWeight": true,
@@ -52,7 +52,8 @@
 				"fontFamily": true
 			}
 		},
-		"shadow": true
+		"shadow": true,
+		"blockVisibility": false
 	},
 	"attributes": {
 		"openByDefault": {
@@ -62,19 +63,11 @@
 		"title": {
 			"type": "rich-text",
 			"source": "rich-text",
-			"selector": ".accordion-content__toggle-title",
+			"selector": ".wp-block-accordion-heading__toggle-title",
 			"role": "content"
 		},
 		"level": {
-			"type": "number",
-			"default": 3
-		},
-		"levelOptions": {
-			"type": "array"
-		},
-		"textAlignment": {
-			"type": "string",
-			"default": "left"
+			"type": "number"
 		},
 		"iconPosition": {
 			"type": "string",

package/src/accordion-heading/edit.js

@@ -0,0 +1,70 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { useEffect } from '@wordpress/element';
+import {
+	useBlockProps,
+	__experimentalGetSpacingClassesAndStyles as useSpacingProps,
+	RichText,
+} from '@wordpress/block-editor';
+
+export default function Edit( { attributes, setAttributes, context } ) {
+	const { title } = attributes;
+	const {
+		'core/accordion-icon-position': iconPosition,
+		'core/accordion-show-icon': showIcon,
+		'core/accordion-heading-level': headingLevel,
+	} = context;
+	const TagName = 'h' + headingLevel;
+
+	// Set icon attributes.
+	useEffect( () => {
+		if ( iconPosition !== undefined && showIcon !== undefined ) {
+			setAttributes( {
+				iconPosition,
+				showIcon,
+			} );
+		}
+	}, [ iconPosition, showIcon, setAttributes ] );
+
+	const blockProps = useBlockProps();
+	const spacingProps = useSpacingProps( attributes );
+
+	return (
+		<TagName { ...blockProps }>
+			<button
+				className="wp-block-accordion-heading__toggle"
+				style={ spacingProps.style }
+			>
+				{ showIcon && iconPosition === 'left' && (
+					<span
+						className="wp-block-accordion-heading__toggle-icon"
+						aria-hidden="true"
+					>
+						+
+					</span>
+				) }
+				<RichText
+					withoutInteractiveFormatting
+					disableLineBreaks
+					tagName="span"
+					value={ title }
+					onChange={ ( newTitle ) =>
+						setAttributes( { title: newTitle } )
+					}
+					placeholder={ __( 'Accordion title' ) }
+					className="wp-block-accordion-heading__toggle-title"
+				/>
+				{ showIcon && iconPosition === 'right' && (
+					<span
+						className="wp-block-accordion-heading__toggle-icon"
+						aria-hidden="true"
+					>
+						+
+					</span>
+				) }
+			</button>
+		</TagName>
+	);
+}

package/src/{accordion-header → accordion-heading}/save.js

@@ -1,7 +1,3 @@
-/**
- * External dependencies
- */
-import clsx from 'clsx';
 /**
  * WordPress dependencies
  */
@@ -12,40 +8,34 @@ import {
 } from '@wordpress/block-editor';
 
 export default function save( { attributes } ) {
-	const { level, title, iconPosition, textAlign, showIcon } = attributes;
-	const TagName = 'h' + level;
+	const { level, title, iconPosition, showIcon } = attributes;
+	const TagName = 'h' + ( level || 3 );
 
-	const blockProps = useBlockProps.save( {
-		className: clsx( 'accordion-content__heading', {
-			[ `has-text-align-${ textAlign }` ]: textAlign,
-		} ),
-	} );
+	const blockProps = useBlockProps.save();
 	const spacingProps = getSpacingClassesAndStyles( attributes );
 
 	return (
 		<TagName { ...blockProps }>
 			<button
-				className={ clsx( 'accordion-content__toggle' ) }
-				style={ {
-					...spacingProps.style,
-				} }
+				className="wp-block-accordion-heading__toggle"
+				style={ spacingProps.style }
 			>
 				{ showIcon && iconPosition === 'left' && (
 					<span
-						className="accordion-content__toggle-icon"
+						className="wp-block-accordion-heading__toggle-icon"
 						aria-hidden="true"
 					>
 						+
 					</span>
 				) }
 				<RichText.Content
-					className="accordion-content__toggle-title"
+					className="wp-block-accordion-heading__toggle-title"
 					tagName="span"
 					value={ title }
 				/>
 				{ showIcon && iconPosition === 'right' && (
 					<span
-						className="accordion-content__toggle-icon"
+						className="wp-block-accordion-heading__toggle-icon"
 						aria-hidden="true"
 					>
 						+

package/src/accordion-heading/style.scss

@@ -0,0 +1,43 @@
+.wp-block-accordion-heading__toggle {
+	font-family: inherit;
+	font-size: inherit;
+	font-weight: inherit;
+	line-height: inherit;
+	letter-spacing: inherit;
+	text-transform: inherit;
+	text-decoration: inherit;
+	word-spacing: inherit;
+	background: none;
+	border: none;
+	color: inherit;
+	padding: var(--wp--preset--spacing--20, 1em) 0;
+	cursor: pointer;
+	overflow: hidden;
+	display: flex;
+	align-items: center;
+	text-align: inherit;
+	position: relative;
+	width: 100%;
+
+	&:not(:focus-visible) {
+		outline: none;
+	}
+
+	&:hover {
+		.wp-block-accordion-heading__toggle-title {
+			text-decoration: underline;
+		}
+	}
+}
+
+.wp-block-accordion-heading__toggle-title {
+	flex: 1;
+}
+
+.wp-block-accordion-heading__toggle-icon {
+	width: 1.2em;
+	height: 1.2em;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}

package/src/{accordion-content → accordion-item}/block.json

@@ -1,13 +1,13 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 3,
-	"name": "core/accordion-content",
-	"title": "Accordion Content",
+	"name": "core/accordion-item",
+	"title": "Accordion Item",
 	"category": "design",
-	"description": "Displays a section of content in an accordion, including a header and expandable content.",
+	"description": "Displays a section of content in an accordion, including a heading and expandable content.",
 	"__experimental": true,
 	"parent": [ "core/accordion" ],
-	"allowedBlocks": [ "core/accordion-header", "core/accordion-panel" ],
+	"allowedBlocks": [ "core/accordion-heading", "core/accordion-panel" ],
 	"supports": {
 		"color": {
 			"background": true,
@@ -52,5 +52,6 @@
 			"default": false
 		}
 	},
-	"textdomain": "default"
+	"textdomain": "default",
+	"style": "wp-block-accordion-item"
 }

package/src/{accordion-content → accordion-item}/edit.js

@@ -25,7 +25,12 @@ import clsx from 'clsx';
  */
 import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
 
-export default function Edit( { attributes, clientId, setAttributes } ) {
+export default function Edit( {
+	attributes,
+	clientId,
+	setAttributes,
+	context,
+} ) {
 	const { openByDefault } = attributes;
 	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
 
@@ -70,9 +75,14 @@ export default function Edit( { attributes, clientId, setAttributes } ) {
 		} ),
 	} );
 
+	// Get heading level from context.
+	const headingLevel = context && context[ 'core/accordion-heading-level' ];
 	const innerBlocksProps = useInnerBlocksProps( blockProps, {
 		template: [
-			[ 'core/accordion-header', {} ],
+			[
+				'core/accordion-heading',
+				headingLevel ? { level: headingLevel } : {},
+			],
 			[
 				'core/accordion-panel',
 				{

package/src/{accordion-content → accordion-item}/index.php

@@ -1,7 +1,7 @@
 <?php
 
 /**
- * Server-side rendering of the `core/accordion-content` block.
+ * Server-side rendering of the `core/accordion-item` block.
  *
  * @package WordPress
  * @since 6.6.0
@@ -11,13 +11,13 @@
  *
  * @return string Returns the updated markup.
  */
-function block_core_accordion_content_render( $attributes, $content ) {
+function block_core_accordion_item_render( $attributes, $content ) {
 	if ( ! $content ) {
 		return $content;
 	}
 
 	$p         = new WP_HTML_Tag_Processor( $content );
-	$unique_id = wp_unique_id( 'accordion-content-' );
+	$unique_id = wp_unique_id( 'accordion-item-' );
 
 	// Initialize the state of the item on the server using a closure,
 	// since we need to get derived state based on the current context.
@@ -31,13 +31,13 @@ function block_core_accordion_content_render( $attributes, $content ) {
 		)
 	);
 
-	if ( $p->next_tag( array( 'class_name' => 'wp-block-accordion-content' ) ) ) {
+	if ( $p->next_tag( array( 'class_name' => 'wp-block-accordion-item' ) ) ) {
 		$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.initAccordionContents' );
+		$p->set_attribute( 'data-wp-init', 'callbacks.initAccordionItems' );
 
-		if ( $p->next_tag( array( 'class_name' => 'accordion-content__toggle' ) ) ) {
+		if ( $p->next_tag( array( 'class_name' => 'wp-block-accordion-heading__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 );
@@ -59,16 +59,16 @@ function block_core_accordion_content_render( $attributes, $content ) {
 }
 
 /**
- * Registers the `core/accordion-content` block on server.
+ * Registers the `core/accordion-item` block on server.
  *
  * @since 6.6.0
  */
-function register_block_core_accordion_content() {
+function register_block_core_accordion_item() {
 	register_block_type_from_metadata(
-		__DIR__ . '/accordion-content',
+		__DIR__ . '/accordion-item',
 		array(
-			'render_callback' => 'block_core_accordion_content_render',
+			'render_callback' => 'block_core_accordion_item_render',
 		)
 	);
 }
-add_action( 'init', 'register_block_core_accordion_content' );
+add_action( 'init', 'register_block_core_accordion_item' );

package/src/{accordion-content → accordion-item}/save.js

@@ -9,17 +9,11 @@ import clsx from 'clsx';
 
 export default function save( { attributes } ) {
 	const { openByDefault } = attributes;
-	const blockProps = useBlockProps.save();
-	const className = clsx(
-		{
+	const blockProps = useBlockProps.save( {
+		className: clsx( {
 			'is-open': openByDefault,
-		},
-		blockProps.className
-	);
-	const innerBlocksProps = useInnerBlocksProps.save( {
-		...blockProps,
-		className,
+		} ),
 	} );
-
+	const innerBlocksProps = useInnerBlocksProps.save( blockProps );
 	return <div { ...innerBlocksProps } />;
 }

package/src/accordion-item/style.scss

@@ -0,0 +1,21 @@
+.wp-block-accordion-item {
+	display: grid;
+	grid-template-rows: max-content 0fr;
+
+	&.is-open {
+		grid-template-rows: max-content 1fr;
+
+		> .wp-block-accordion-heading .wp-block-accordion-heading__toggle-icon {
+			transform: rotate(45deg);
+		}
+	}
+
+	/* Add transitions only for users who do not prefer reduced motion */
+	@media (prefers-reduced-motion: no-preference) {
+		transition: grid-template-rows 0.3s ease-out;
+
+		> .wp-block-accordion-heading .wp-block-accordion-heading__toggle-icon {
+			transition: transform 0.2s ease-in-out;
+		}
+	}
+}

package/src/accordion-panel/block.json

@@ -6,7 +6,7 @@
 	"category": "design",
 	"description": "Displays an accordion panel.",
 	"__experimental": true,
-	"parent": [ "core/accordion-content" ],
+	"parent": [ "core/accordion-item" ],
 	"supports": {
 		"color": {
 			"background": true,
@@ -47,7 +47,8 @@
 			}
 		},
 		"shadow": true,
-		"layout": true
+		"layout": true,
+		"blockVisibility": false
 	},
 	"attributes": {
 		"allowedBlocks": {
@@ -67,5 +68,6 @@
 			"default": false
 		}
 	},
-	"textdomain": "default"
+	"textdomain": "default",
+	"style": "wp-block-accordion-panel"
 }