Add Accordion Block

docs/reference-guides/core-blocks.md

@@ -8,6 +8,51 @@ This page lists the blocks included in the block-library package.
 
 <!-- START TOKEN Autogenerated - DO NOT EDIT -->
 
+## Accordion Group
+
+A group of headers and associated expandable content. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/accordion-group))
+
+-	**Name:** core/accordion-group
+-	**Experimental:** true
+-	**Category:** design
+-	**Allowed Blocks:** core/accordion-item
+-	**Supports:** align (full, wide), background (backgroundImage, backgroundSize), color (background, gradient, text), interactivity, layout, shadow, spacing (blockGap, margin, padding), ~~html~~
+-	**Attributes:** allowedBlocks, autoclose, iconPosition
+
+## Accordion Header
+
+Accordion header. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/accordion-header))
+
+-	**Name:** core/accordion-header
+-	**Experimental:** true
+-	**Category:** design
+-	**Parent:** core/accordion-item
+-	**Supports:** anchor, border, color (background, gradient, text), interactivity, layout, shadow, spacing (margin, padding), typography (fontSize, textAlign), ~~align~~
+-	**Attributes:** icon, iconPosition, level, levelOptions, openByDefault, textAlignment, title
+
+## Accordion
+
+A single accordion that displays a header and expandable content. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/accordion-item))
+
+-	**Name:** core/accordion-item
+-	**Experimental:** true
+-	**Category:** design
+-	**Parent:** core/accordion-group
+-	**Allowed Blocks:** core/accordion-header, core/accordion-panel
+-	**Supports:** align (full, wide), color (background, gradient, text), interactivity, layout, shadow, spacing (blockGap, margin)
+-	**Attributes:** openByDefault
+
+## Accordion Panel
+
+Accordion Panel ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/accordion-panel))
+
+-	**Name:** core/accordion-panel
+-	**Experimental:** true
+-	**Category:** design
+-	**Parent:** core/accordion-item
+-	**Supports:** border, color (background, gradient, text), interactivity, layout, shadow, spacing (blockGap, margin, padding), typography (fontSize, lineHeight)
+-	**Attributes:** allowedBlocks, isSelected, openByDefault, templateLock
+
 ## Archives
 
 Display a date archive of your posts. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/archives))

lib/blocks.php

@@ -14,6 +14,8 @@ function gutenberg_reregister_core_block_types() {
 	$blocks_dirs = array(
 		__DIR__ . '/../build/block-library/blocks/' => array(
 			'block_folders' => array(
+				'accordion-header',
+				'accordion-panel',
 				'audio',
 				'button',
 				'buttons',
@@ -45,6 +47,8 @@ function gutenberg_reregister_core_block_types() {
 				'embed',
 			),
 			'block_names'   => array(
+				'accordion-item.php'               => 'core/accordion-item',
+				'accordion-group.php'              => 'core/accordion-group',
 				'archives.php'                     => 'core/archives',
 				'avatar.php'                       => 'core/avatar',
 				'block.php'                        => 'core/block',

lib/experimental/editor-settings.php

@@ -28,15 +28,18 @@ function gutenberg_enable_experiments() {
 	if ( gutenberg_is_experiment_enabled( 'gutenberg-full-page-client-side-navigation' ) ) {
 		wp_add_inline_script( 'wp-block-library', 'window.__experimentalFullPageClientSideNavigation = true', 'before' );
 	}
+	if ( $gutenberg_experiments && array_key_exists( 'gutenberg-zoomed-out-patterns-tab', $gutenberg_experiments ) ) {
+		wp_add_inline_script( 'wp-block-editor', 'window.__experimentalEnableZoomedOutPatternsTab = true', 'before' );
+	}
 	if ( $gutenberg_experiments && array_key_exists( 'gutenberg-quick-edit-dataviews', $gutenberg_experiments ) ) {
 		wp_add_inline_script( 'wp-block-editor', 'window.__experimentalQuickEditDataViews = true', 'before' );
 	}
+	if ( $gutenberg_experiments && array_key_exists( 'gutenberg-block-bindings-ui', $gutenberg_experiments ) ) {
+		wp_add_inline_script( 'wp-block-editor', 'window.__experimentalBlockBindingsUI = true', 'before' );
+	}
 	if ( $gutenberg_experiments && array_key_exists( 'gutenberg-media-processing', $gutenberg_experiments ) ) {
 		wp_add_inline_script( 'wp-block-editor', 'window.__experimentalMediaProcessing = true', 'before' );
 	}
-	if ( $gutenberg_experiments && array_key_exists( 'gutenberg-zoom-out-experiment', $gutenberg_experiments ) ) {
-		wp_add_inline_script( 'wp-block-editor', 'window.__experimentalEnableZoomOutExperiment = true', 'before' );
-	}
 }
 
 add_action( 'admin_init', 'gutenberg_enable_experiments' );

packages/block-library/package.json

@@ -31,6 +31,7 @@
 		"{src,build,build-module}/*/init.js"
 	],
 	"wpScriptModuleExports": {
+		"./accordion-group/view": "./build-module/accordion-group/view.js",
 		"./file/view": "./build-module/file/view.js",
 		"./image/view": "./build-module/image/view.js",
 		"./navigation/view": "./build-module/navigation/view.js",

packages/block-library/src/accordion-group/block.json

@@ -0,0 +1,61 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 3,
+	"name": "core/accordion-group",
+	"title": "Accordion Group",
+	"category": "design",
+	"description": "A group of headers and associated expandable content.",
+	"example": {},
+	"__experimental": true,
+	"supports": {
+		"html": false,
+		"align": [ "wide", "full" ],
+		"background": {
+			"backgroundImage": true,
+			"backgroundSize": true,
+			"__experimentalDefaultControls": {
+				"backgroundImage": true
+			}
+		},
+		"color": {
+			"background": true,
+			"gradient": true
+		},
+		"__experimentalBorder": {
+			"color": true,
+			"radius": true,
+			"style": true,
+			"width": true,
+			"__experimentalDefaultControls": {
+				"color": true,
+				"radius": true,
+				"style": true,
+				"width": true
+			}
+		},
+		"spacing": {
+			"padding": true,
+			"margin": [ "top", "bottom" ],
+			"blockGap": true
+		},
+		"shadow": true,
+		"layout": true,
+		"interactivity": true
+	},
+	"attributes": {
+		"iconPosition": {
+			"type": "string",
+			"default": "right"
+		},
+		"autoclose": {
+			"type": "boolean",
+			"default": false
+		},
+		"allowedBlocks": {
+			"type": "array"
+		}
+	},
+	"allowedBlocks": [ "core/accordion-item" ],
+	"textdomain": "default",
+	"style": "wp-block-accordion-group"
+}

packages/block-library/src/accordion-group/edit.js

@@ -0,0 +1,49 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	useBlockProps,
+	useInnerBlocksProps,
+	InspectorControls,
+} from '@wordpress/block-editor';
+import { __ } from '@wordpress/i18n';
+import { PanelBody, ToggleControl } from '@wordpress/components';
+
+const ACCORDION_BLOCK_NAME = 'core/accordion-item';
+const ACCORDION_BLOCK = {
+	name: ACCORDION_BLOCK_NAME,
+};
+
+export default function Edit( { attributes: { autoclose }, setAttributes } ) {
+	const blockProps = useBlockProps();
+
+	const innerBlocksProps = useInnerBlocksProps( blockProps, {
+		template: [ [ ACCORDION_BLOCK_NAME ], [ ACCORDION_BLOCK_NAME ] ],
+		defaultBlock: ACCORDION_BLOCK,
+		directInsert: true,
+	} );
+
+	return (
+		<>
+			<InspectorControls key="setting">
+				<PanelBody title={ __( 'Settings' ) } initialOpen>
+					<ToggleControl
+						isBlock
+						__nextHasNoMarginBottom
+						label={ __( 'Auto-close' ) }
+						onChange={ ( value ) => {
+							setAttributes( {
+								autoclose: value,
+							} );
+						} }
+						checked={ autoclose }
+						help={ __(
+							'Automatically close accordions when a new one is opened.'
+						) }
+					/>
+				</PanelBody>
+			</InspectorControls>
+			<div { ...innerBlocksProps } />
+		</>
+	);
+}

packages/block-library/src/accordion-group/index.js

@@ -0,0 +1,49 @@
+/**
+ * WordPress dependencies
+ */
+import { SVG, Path } from '@wordpress/components';
+/**
+ * Internal dependencies
+ */
+import edit from './edit';
+import save from './save';
+import metadata from './block.json';
+import initBlock from '../utils/init-block';
+
+const icon = (
+	<SVG
+		width="24"
+		height="24"
+		viewBox="0 0 24 24"
+		fill="none"
+		xmlns="http://www.w3.org/2000/svg"
+	>
+		<Path
+			fillRule="evenodd"
+			clipRule="evenodd"
+			d="M19.5 9.25L9.5 9.25L9.5 7.75L19.5 7.75L19.5 9.25Z"
+			fill="currentColor"
+		/>
+		<Path d="M4.5 6L8.5 8.5L4.5 11L4.5 6Z" fill="currentColor" />
+		<Path
+			fillRule="evenodd"
+			clipRule="evenodd"
+			d="M19.5 16.25L9.5 16.25L9.5 14.75L19.5 14.75L19.5 16.25Z"
+			fill="currentColor"
+		/>
+		<Path d="M4.5 13L8.5 15.5L4.5 18L4.5 13Z" fill="currentColor" />
+	</SVG>
+);
+
+const { name } = metadata;
+
+export { metadata, name };
+
+export const settings = {
+	icon,
+	example: {},
+	edit,
+	save,
+};
+
+export const init = () => initBlock( { name, metadata, settings } );

packages/block-library/src/accordion-group/index.php

@@ -0,0 +1,59 @@
+<?php
+/**
+ * Server-side rendering of the `core/accordion-group` block.
+ *
+ * @package WordPress
+ * @since 6.6.0
+ *
+ * @param array $attributes The block attributes.
+ * @param string $content The block content.
+ *
+ * @return string Returns the updated markup.
+ */
+function render_block_core_accordion_group( $attributes, $content ) {
+	if ( ! $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-group/view.min.js' );
+	}
+
+	wp_register_script_module(
+		'@wordpress/block-library/accordion-group',
+		isset( $module_url ) ? $module_url : includes_url( "blocks/accordion-group/view{$suffix}.js" ),
+		array( '@wordpress/interactivity' ),
+		defined( 'GUTENBERG_VERSION' ) ? GUTENBERG_VERSION : get_bloginfo( 'version' )
+	);
+
+	wp_enqueue_script_module( '@wordpress/block-library/accordion-group' );
+
+	$p         = new WP_HTML_Tag_Processor( $content );
+	$autoclose = $attributes['autoclose'] ? 'true' : 'false';
+
+	if ( $p->next_tag( array( 'class_name' => 'wp-block-accordion-group' ) ) ) {
+		$p->set_attribute( 'data-wp-interactive', 'core/accordion' );
+		$p->set_attribute( 'data-wp-context', '{ "autoclose": ' . $autoclose . ', "isOpen": [] }' );
+
+		// Only modify content if directives have been set.
+		$content = $p->get_updated_html();
+	}
+
+	return $content;
+}
+
+/**
+ * Registers the `core/accordion-group` block on server.
+ *
+ * @since 6.6.0
+ */
+function register_block_core_accordion_group() {
+	register_block_type_from_metadata(
+		__DIR__ . '/accordion-group',
+		array(
+			'render_callback' => 'render_block_core_accordion_group',
+		)
+	);
+}
+add_action( 'init', 'register_block_core_accordion_group' );

packages/block-library/src/accordion-group/init.js

@@ -0,0 +1,6 @@
+/**
+ * Internal dependencies
+ */
+import { init } from './';
+
+export default init();

packages/block-library/src/accordion-group/save.js

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