Add Accordions 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 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, shadow, spacing (margin, padding), typography (fontSize, textAlign), ~~align~~
+-	**Attributes:** iconPosition, level, levelOptions, openByDefault, showIcon, 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/accordions
+-	**Allowed Blocks:** core/accordion-header, core/accordion-panel
+-	**Supports:** align (full, wide), color (background, gradient, text), interactivity, 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, shadow, spacing (blockGap, margin, padding), typography (fontSize, lineHeight)
+-	**Attributes:** allowedBlocks, isSelected, openByDefault, templateLock
+
+## Accordions
+
+A group of Accordion headers and associated expandable content. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/accordions))
+
+-	**Name:** core/accordions
+-	**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, showIcon
+
 ## 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',
@@ -44,6 +46,8 @@ function gutenberg_reregister_core_block_types() {
 				'embed',
 			),
 			'block_names'   => array(
+				'accordion-item.php'               => 'core/accordion-item',
+				'accordions.php'                   => 'core/accordions',
 				'archives.php'                     => 'core/archives',
 				'avatar.php'                       => 'core/avatar',
 				'block.php'                        => 'core/block',

packages/block-library/package.json

@@ -27,6 +27,7 @@
 	"react-native": "src/index",
 	"wpScript": true,
 	"wpScriptModuleExports": {
+		"./accordions/view": "./build-module/accordions/view.js",
 		"./file/view": "./build-module/file/view.js",
 		"./form/view": "./build-module/form/view.js",
 		"./image/view": "./build-module/image/view.js",

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

@@ -0,0 +1,93 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 3,
+	"name": "core/accordion-header",
+	"version": "0.1.0",
+	"title": "Accordion Header",
+	"category": "design",
+	"description": "Accordion header.",
+	"example": {},
+	"__experimental": true,
+	"parent": [ "core/accordion-item" ],
+	"usesContext": [
+		"core/accordion-icon-position",
+		"core/accordion-show-icon"
+	],
+	"supports": {
+		"anchor": true,
+		"color": {
+			"background": true,
+			"gradient": true
+		},
+		"align": false,
+		"border": true,
+		"interactivity": true,
+		"spacing": {
+			"padding": true,
+			"margin": [ "top", "bottom" ],
+			"__experimentalDefaultControls": {
+				"padding": true,
+				"margin": true
+			}
+		},
+		"__experimentalBorder": {
+			"color": true,
+			"radius": true,
+			"style": true,
+			"width": true,
+			"__experimentalDefaultControls": {
+				"color": true,
+				"radius": true,
+				"style": true,
+				"width": true
+			}
+		},
+		"typography": {
+			"textAlign": true,
+			"fontSize": true,
+			"__experimentalFontFamily": true,
+			"__experimentalFontWeight": true,
+			"__experimentalFontStyle": true,
+			"__experimentalTextTransform": true,
+			"__experimentalTextDecoration": true,
+			"__experimentalLetterSpacing": true,
+			"__experimentalDefaultControls": {
+				"fontSize": true,
+				"fontFamily": true
+			}
+		},
+		"shadow": true
+	},
+	"attributes": {
+		"openByDefault": {
+			"type": "boolean",
+			"default": false
+		},
+		"title": {
+			"type": "rich-text",
+			"source": "rich-text",
+			"selector": "span"
+		},
+		"level": {
+			"type": "number",
+			"default": 3
+		},
+		"levelOptions": {
+			"type": "array"
+		},
+		"textAlignment": {
+			"type": "string",
+			"default": "left"
+		},
+		"iconPosition": {
+			"type": "string",
+			"enum": [ "left", "right" ],
+			"default": "right"
+		},
+		"showIcon": {
+			"type": "boolean",
+			"default": true
+		}
+	},
+	"textdomain": "default"
+}

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

@@ -0,0 +1,128 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { useEffect } from '@wordpress/element';
+import {
+	useBlockProps,
+	__experimentalUseBorderProps as useBorderProps,
+	__experimentalUseColorProps as useColorProps,
+	__experimentalGetSpacingClassesAndStyles as useSpacingProps,
+	__experimentalGetShadowClassesAndStyles as useShadowProps,
+	BlockControls,
+	HeadingLevelDropdown,
+	RichText,
+} from '@wordpress/block-editor';
+import { ToolbarGroup } from '@wordpress/components';
+/**
+ * Internal dependencies
+ */
+import { plus } from '../accordion-item/icons';
+
+const ICONS = {
+	plus,
+};
+
+export default function Edit( { attributes, setAttributes, context } ) {
+	const { level, title, textAlign, levelOptions } = attributes;
+	const {
+		'core/accordion-icon-position': iconPosition,
+		'core/accordion-show-icon': showIcon,
+	} = context;
+	const TagName = 'h' + level;
+
+	// Set icon attributes.
+	useEffect( () => {
+		if ( iconPosition !== undefined && showIcon !== undefined ) {
+			setAttributes( {
+				iconPosition,
+				showIcon,
+			} );
+		}
+	}, [ iconPosition, showIcon, setAttributes ] );
+
+	const blockProps = useBlockProps();
+	const borderProps = useBorderProps( attributes );
+	const colorProps = useColorProps( attributes );
+	const spacingProps = useSpacingProps( attributes );
+	const shadowProps = useShadowProps( attributes );
+
+	const Icon = ICONS.plus;
+	const shouldShowIcon = showIcon && Icon;
+
+	return (
+		<>
+			<BlockControls>
+				<ToolbarGroup>
+					<HeadingLevelDropdown
+						value={ level }
+						options={ levelOptions }
+						onChange={ ( newLevel ) =>
+							setAttributes( { level: newLevel } )
+						}
+					/>
+				</ToolbarGroup>
+			</BlockControls>
+			<TagName
+				{ ...blockProps }
+				className={ clsx(
+					blockProps.className,
+					colorProps.className,
+					borderProps.className,
+					'accordion-item__heading',
+					{
+						[ `has-custom-font-size` ]: blockProps.style.fontSize,
+						[ `icon-position-left` ]: iconPosition === 'left',
+						[ `has-text-align-${ textAlign }` ]: textAlign,
+					}
+				) }
+				style={ {
+					...borderProps.style,
+					...colorProps.style,
+					...shadowProps.style,
+				} }
+			>
+				<button
+					className={ clsx( 'accordion-item__toggle' ) }
+					style={ {
+						...spacingProps.style,
+					} }
+				>
+					<RichText
+						allowedFormats={ [
+							'core/bold',
+							'core/italic',
+							'core/image',
+							'core/strikethrough',
+						] }
+						disableLineBreaks
+						tagName="span"
+						value={ title }
+						onChange={ ( newTitle ) =>
+							setAttributes( { title: newTitle } )
+						}
+						placeholder={ __( 'Accordion title' ) }
+					/>
+					{ shouldShowIcon && (
+						<span
+							className={ clsx( `accordion-item__toggle-icon`, {
+								'has-icon-plus': true,
+							} ) }
+							style={ {
+								// TO-DO: make this configurable
+								width: `1.2em`,
+								height: `1.2em`,
+							} }
+						>
+							{ Icon && <Icon width="1.2em" height="1.2em" /> }
+						</span>
+					) }
+				</button>
+			</TagName>
+		</>
+	);
+}

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

@@ -0,0 +1,24 @@
+/**
+ * WordPress dependencies
+ */
+import { accordionHeader } from '@wordpress/icons';
+/**
+ * Internal dependencies
+ */
+import edit from './edit';
+import save from './save';
+import metadata from './block.json';
+import initBlock from '../utils/init-block';
+
+const { name } = metadata;
+
+export { metadata, name };
+
+export const settings = {
+	icon: accordionHeader,
+	example: {},
+	edit,
+	save,
+};
+
+export const init = () => initBlock( { name, metadata, settings } );

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

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