Implement Accordion Block Plugin

accordion/.gitignore

@@ -0,0 +1,35 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Output of `npm pack`
+*.tgz
+
+# Output of `wp-scripts plugin-zip`
+*.zip
+
+# dotenv environment variables file
+.env
+
+# Build files
+build/
+
+package-lock.json

accordion/accordion.php

@@ -0,0 +1,33 @@
+<?php
+/**
+ * Plugin Name:       Accordion
+ * Description:       Container block for accordion items.
+ * Requires at least: 6.1
+ * Requires PHP:      7.0
+ * Version:           0.3.0
+ * Author:            Studio 51
+ * License:           GPL-2.0-or-later
+ * License URI:       https://www.gnu.org/licenses/gpl-2.0.html
+ * Text Domain:       accordion
+ *
+ * @package Wpsp
+ */
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit; // Exit if accessed directly.
+}
+
+/**
+ * Registers the block using the metadata loaded from the `block.json` file.
+ * Behind the scenes, it registers also all assets so they can be enqueued
+ * through the block editor in the corresponding context.
+ *
+ * @see https://developer.wordpress.org/reference/functions/register_block_type/
+ */
+function wpcomsp_accordion_block_init() {
+	register_block_type( __DIR__ . '/build/accordion-group' );
+	register_block_type( __DIR__ . '/build/accordion-item' );
+	register_block_type( __DIR__ . '/build/accordion-trigger' );
+	register_block_type( __DIR__ . '/build/accordion-content' );
+}
+add_action( 'init', 'wpcomsp_accordion_block_init' );

accordion/package.json

@@ -0,0 +1,28 @@
+{
+	"name": "accordion",
+	"version": "0.3.0",
+	"description": "Accordion block for displaying hidden content via a toggle.",
+	"author": "The WordPress Contributors",
+	"license": "GPL-2.0-or-later",
+	"main": "build/accordion-item/index.js",
+	"scripts": {
+		"build": "wp-scripts build --experimental-modules",
+		"format": "wp-scripts format",
+		"lint:css": "wp-scripts lint-style",
+		"lint:js": "wp-scripts lint-js",
+		"packages-update": "wp-scripts packages-update",
+		"plugin-zip": "wp-scripts plugin-zip",
+		"start": "wp-scripts start --experimental-modules"
+	},
+	"files": [
+		"[^.]*"
+	],
+	"dependencies": {
+		"@wordpress/interactivity": "^6.0.0",
+		"clsx": "^2.1.1"
+	},
+	"devDependencies": {
+		"@wordpress/icons": "^10.3.0",
+		"@wordpress/scripts": "^27.9.0"
+	}
+}

accordion/readme.txt

@@ -0,0 +1,55 @@
+=== Accordion ===
+Contributors:      Studio 51
+Tags:              block
+Tested up to:      6.1
+Stable tag:        0.2.0
+License:           GPL-2.0-or-later
+License URI:       https://www.gnu.org/licenses/gpl-2.0.html
+
+An accordion block.
+
+== Description ==
+
+This is the long description. No limit, and you can use Markdown (as well as in the following sections).
+
+For backwards compatibility, if this section is missing, the full length of the short description will be used, and
+Markdown parsed.
+
+== Installation ==
+
+This section describes how to install the plugin and get it working.
+
+e.g.
+
+1. Upload the plugin files to the `/wp-content/plugins/accordion` directory, or install the plugin through the WordPress plugins screen directly.
+1. Activate the plugin through the 'Plugins' screen in WordPress
+
+
+== Frequently Asked Questions ==
+
+= A question that someone might have =
+
+An answer to that question.
+
+= What about foo bar? =
+
+Answer to foo bar dilemma.
+
+== Screenshots ==
+
+1. This screen shot description corresponds to screenshot-1.(png|jpg|jpeg|gif). Note that the screenshot is taken from
+the /assets directory or the directory that contains the stable readme.txt (tags or trunk). Screenshots in the /assets
+directory take precedence. For example, `/assets/screenshot-1.png` would win over `/tags/4.3/screenshot-1.png`
+(or jpg, jpeg, gif).
+2. This is the second screen shot
+
+== Changelog ==
+
+= 0.1.0 =
+* Release
+
+== Arbitrary section ==
+
+You may provide arbitrary sections, in the same format as the ones above. This may be of use for extremely complicated
+plugins where more information needs to be conveyed that doesn't fit into the categories of "description" or
+"installation." Arbitrary sections will be shown below the built-in sections outlined above.

accordion/src/accordion-content/block.json

@@ -0,0 +1,75 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 3,
+	"name": "wpcomsp/accordion-content",
+	"version": "0.1.0",
+	"title": "Content",
+	"category": "design",
+	"description": "Accordion item content",
+	"example": {},
+	"parent": [ "wpcomsp/accordion-item" ],
+	"supports": {
+		"color": {
+			"background": true,
+			"gradient": true
+		},
+		"border": true,
+		"interactivity": true,
+		"spacing": {
+			"padding": true,
+			"margin": [ "top", "bottom" ],
+			"blockGap": true,
+			"__experimentalDefaultControls": {
+				"padding": true,
+				"blockGap": true
+			}
+		},
+		"__experimentalBorder": {
+			"color": true,
+			"radius": true,
+			"style": true,
+			"width": true,
+			"__experimentalDefaultControls": {
+				"color": true,
+				"radius": true,
+				"style": true,
+				"width": true
+			}
+		},
+		"typography": {
+			"fontSize": true,
+			"lineHeight": true,
+			"__experimentalFontFamily": true,
+			"__experimentalFontWeight": true,
+			"__experimentalFontStyle": true,
+			"__experimentalTextTransform": true,
+			"__experimentalTextDecoration": true,
+			"__experimentalLetterSpacing": true,
+			"__experimentalDefaultControls": {
+				"fontSize": true
+			}
+		},
+		"shadow": true,
+		"layout": true
+	},
+	"attributes": {
+		"allowedBlocks": {
+			"type": "array"
+		},
+		"templateLock": {
+			"type": [ "string", "boolean" ],
+			"enum": [ "all", "insert", "contentOnly", false ],
+			"default": false
+		},
+		"openByDefault": {
+			"type": "boolean",
+			"default": false
+		},
+		"isSelected": {
+			"type": "boolean",
+			"default": false
+		}
+	},
+	"textdomain": "accordion",
+	"editorScript": "file:./index.js"
+}

accordion/src/accordion-content/edit.js

@@ -0,0 +1,56 @@
+import { __ } from '@wordpress/i18n';
+import {
+	useBlockProps,
+	useInnerBlocksProps,
+	__experimentalUseBorderProps as useBorderProps,
+	__experimentalUseColorProps as useColorProps,
+	__experimentalGetSpacingClassesAndStyles as useSpacingProps,
+	__experimentalGetShadowClassesAndStyles as useShadowProps,
+} from '@wordpress/block-editor';
+import clsx from 'clsx';
+
+export default function Edit( { attributes } ) {
+	const { allowedBlocks, templateLock, openByDefault, isSelected } =
+		attributes;
+	const borderProps = useBorderProps( attributes );
+	const colorProps = useColorProps( attributes );
+	const spacingProps = useSpacingProps( attributes );
+	const shadowProps = useShadowProps( attributes );
+
+	const blockProps = useBlockProps();
+	const innerBlocksProps = useInnerBlocksProps(
+		{
+			className: 'wpcomsp-accordion-content__wrapper',
+			style: {
+				...spacingProps.style,
+			},
+		},
+		{
+			allowedBlocks,
+			template: [ [ 'core/paragraph', {} ] ],
+			templateLock,
+		}
+	);
+
+	return (
+		<div
+			{ ...blockProps }
+			className={ clsx(
+				blockProps.className,
+				colorProps.className,
+				borderProps.className,
+				{
+					[ `has-custom-font-size` ]: blockProps?.style?.fontSize,
+				}
+			) }
+			style={ {
+				...borderProps.style,
+				...colorProps.style,
+				...shadowProps.style,
+			} }
+			aria-hidden={ ! isSelected && ! openByDefault }
+		>
+			<div { ...innerBlocksProps } />
+		</div>
+	);
+}

accordion/src/accordion-content/index.js

@@ -0,0 +1,28 @@
+import { registerBlockType } from '@wordpress/blocks';
+import { SVG, Path } from '@wordpress/components';
+import Edit from './edit';
+import save from './save';
+import metadata from './block.json';
+
+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="M8.10417 6.00024H6.5C5.39543 6.00024 4.5 6.89567 4.5 8.00024V10.3336H6V8.00024C6 7.7241 6.22386 7.50024 6.5 7.50024H8.10417V6.00024ZM4.5 13.6669V16.0002C4.5 17.1048 5.39543 18.0002 6.5 18.0002H8.10417V16.5002H6.5C6.22386 16.5002 6 16.2764 6 16.0002V13.6669H4.5ZM10.3958 6.00024V7.50024H13.6042V6.00024H10.3958ZM15.8958 6.00024V7.50024H17.5C17.7761 7.50024 18 7.7241 18 8.00024V10.3336H19.5V8.00024C19.5 6.89567 18.6046 6.00024 17.5 6.00024H15.8958ZM19.5 13.6669H18V16.0002C18 16.2764 17.7761 16.5002 17.5 16.5002H15.8958V18.0002H17.5C18.6046 18.0002 19.5 17.1048 19.5 16.0002V13.6669ZM13.6042 18.0002V16.5002H10.3958V18.0002H13.6042Z"
+			fill="currentColor"
+		/>
+	</SVG>
+);
+
+registerBlockType( metadata.name, {
+	icon,
+	edit: Edit,
+	save,
+} );

accordion/src/accordion-content/save.js

@@ -0,0 +1,46 @@
+import { __ } from '@wordpress/i18n';
+import {
+	InnerBlocks,
+	useBlockProps,
+	__experimentalGetBorderClassesAndStyles as getBorderClassesAndStyles,
+	__experimentalGetColorClassesAndStyles as getColorClassesAndStyles,
+	__experimentalGetSpacingClassesAndStyles as getSpacingClassesAndStyles,
+	__experimentalGetShadowClassesAndStyles as getShadowClassesAndStyles,
+} from '@wordpress/block-editor';
+import clsx from 'clsx';
+
+export default function save( { attributes } ) {
+	const blockProps = useBlockProps.save();
+	const borderProps = getBorderClassesAndStyles( attributes );
+	const colorProps = getColorClassesAndStyles( attributes );
+	const spacingProps = getSpacingClassesAndStyles( attributes );
+	const shadowProps = getShadowClassesAndStyles( attributes );
+
+	return (
+		<div
+			{ ...blockProps }
+			className={ clsx(
+				blockProps.className,
+				colorProps.className,
+				borderProps.className,
+				{
+					[ `has-custom-font-size` ]: blockProps?.style?.fontSize,
+				}
+			) }
+			style={ {
+				...borderProps.style,
+				...colorProps.style,
+				...shadowProps.style,
+			} }
+		>
+			<div
+				className="wpcomsp-accordion-content__wrapper"
+				style={ {
+					...spacingProps.style,
+				} }
+			>
+				<InnerBlocks.Content />
+			</div>
+		</div>
+	);
+}