Add accordion block

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,31 @@
+<?php
+/**
+ * Plugin Name:       Accordion
+ * Description:       Container block for accordion items.
+ * Requires at least: 6.1
+ * Requires PHP:      7.0
+ * Version:           0.1.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 wpsp_accordion_block_init() {
+	register_block_type( __DIR__ . '/build/accordion' );
+	register_block_type( __DIR__ . '/build/accordion-item' );
+}
+add_action( 'init', 'wpsp_accordion_block_init' );

accordion/package.json

@@ -0,0 +1,27 @@
+{
+	"name": "accordion",
+	"version": "0.1.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/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.1.0
+License:           GPL-2.0-or-later
+License URI:       https://www.gnu.org/licenses/gpl-2.0.html
+
+Container block for accordion items.
+
+== 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-item/block.json

@@ -0,0 +1,75 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 3,
+	"name": "wpsp/accordion-item",
+	"version": "0.1.0",
+	"title": "Accordion Item",
+	"category": "design",
+	"icon": "button",
+	"description": "Accordion item block for displaying hidden content via a toggle.",
+	"example": {},
+	"parent": [ "wpsp/accordion" ],
+	"supports": {
+		"color": {
+			"background": true,
+			"gradient": true
+		},
+		"align": 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": {
+		"openByDefault": {
+			"type": "boolean",
+			"default": false
+		},
+		"title": {
+			"type": "rich-text",
+			"source": "rich-text",
+			"selector": "span"
+		},
+		"level": {
+			"type": "number",
+			"default": 3
+		}
+	},
+	"textdomain": "accordion",
+	"editorScript": "file:./index.js",
+	"render": "file:./render.php"
+}

accordion/src/accordion-item/edit.js

@@ -0,0 +1,80 @@
+import clsx from 'clsx';
+import { __ } from '@wordpress/i18n';
+import {
+	useBlockProps,
+	useInnerBlocksProps,
+	InspectorControls,
+	BlockControls,
+	HeadingLevelDropdown,
+	RichText,
+} from '@wordpress/block-editor';
+import {
+	PanelBody,
+	PanelRow,
+	ToggleControl,
+	ToolbarGroup,
+} from '@wordpress/components';
+
+export default function Edit( { attributes, setAttributes } ) {
+	const { openByDefault, level, title, iconPosition } = attributes;
+	const TagName = 'h' + level;
+
+	const headingClassName = clsx( {
+		'wpsp-accordion-item__heading': true,
+		'icon-position-left': iconPosition === 'left',
+	} );
+
+	const innerBlocksProps = useInnerBlocksProps( {
+		className: 'wpsp-accordion-item__content',
+	} );
+
+	return (
+		<>
+			<BlockControls>
+				<ToolbarGroup>
+					<HeadingLevelDropdown
+						value={ level }
+						onChange={ ( newLevel ) =>
+							setAttributes( { level: newLevel } )
+						}
+					/>
+				</ToolbarGroup>
+			</BlockControls>
+			<InspectorControls key="setting">
+				<PanelBody title={ __( 'Display' ) }>
+					<PanelRow>
+						<ToggleControl
+							label={ __( 'Open by default' ) }
+							onChange={ ( value ) => {
+								setAttributes( {
+									openByDefault: value,
+								} );
+							} }
+							checked={ openByDefault }
+						/>
+					</PanelRow>
+				</PanelBody>
+			</InspectorControls>
+			<div
+				{ ...useBlockProps( {
+					className: 'is-open', // Force the editing interface to be open for now.
+				} ) }
+			>
+				<TagName className={ headingClassName }>
+					<button className="wpsp-accordion-item__toggle">
+						<RichText
+							disableLineBreaks
+							tagName="span"
+							value={ title }
+							onChange={ ( newTitle ) =>
+								setAttributes( { title: newTitle } )
+							}
+							placeholder={ __( 'Add text...' ) }
+						/>
+					</button>
+				</TagName>
+				<div { ...innerBlocksProps } />
+			</div>
+		</>
+	);
+}

accordion/src/accordion-item/index.js

@@ -0,0 +1,9 @@
+import { registerBlockType } from '@wordpress/blocks';
+import Edit from './edit';
+import save from './save';
+import metadata from './block.json';
+
+registerBlockType( metadata.name, {
+	edit: Edit,
+	save,
+} );

accordion/src/accordion-item/render.php

@@ -0,0 +1,33 @@
+<?php
+$p = new WP_HTML_Tag_Processor( $content );
+$unique_id = wp_unique_id( 'wpsp-accordion-item-' );
+
+while ( $p->next_tag() ){
+    if ( $p->has_class( 'wp-block-wpsp-accordion-item') ) {
+        $p->set_attribute( 'data-id', $unique_id );
+        $p->set_attribute( 'data-wp-class--is-open', 'state.isOpen' );
+    }
+}
+
+$content = $p->get_updated_html();
+$p = new WP_HTML_Tag_Processor( $content );
+
+while ( $p->next_tag() ){
+    if ( $p->has_class( 'wpsp-accordion-item__toggle' ) ) {
+        $p->set_attribute( 'data-wp-on--click', 'actions.toggle' );
+        $p->set_attribute( 'aria-controls', $unique_id );
+    } 
+}
+
+$content = $p->get_updated_html();
+$p = new WP_HTML_Tag_Processor( $content );
+
+while ( $p->next_tag() ){
+    if ( $p->has_class( 'wpsp-accordion-item__content' ) ) {
+        $p->set_attribute( 'id', $unique_id );
+        $p->set_attribute( 'data-wp-bind--aria-expanded', 'state.isOpen' );
+        $p->set_attribute( 'data-wp-bind--aria-hidden', '!state.isOpen' );
+    }
+}
+
+echo $p->get_updated_html();

accordion/src/accordion-item/save.js

@@ -0,0 +1,32 @@
+import clsx from 'clsx';
+import { __ } from '@wordpress/i18n';
+import {
+	useBlockProps,
+	useInnerBlocksProps,
+	RichText,
+} from '@wordpress/block-editor';
+
+export default function save( { attributes } ) {
+	const { level, title, iconPosition } = attributes;
+	const TagName = 'h' + level;
+
+	const headingClassName = clsx( {
+		'wpsp-accordion-item__heading': true,
+		'icon-position-left': iconPosition === 'left',
+	} );
+
+	return (
+		<div { ...useBlockProps.save() }>
+			<TagName className={ headingClassName }>
+				<button className="wpsp-accordion-item__toggle">
+					<RichText.Content tagName="span" value={ title } />
+				</button>
+			</TagName>
+			<div
+				{ ...useInnerBlocksProps.save( {
+					className: 'wpsp-accordion-item__content',
+				} ) }
+			/>
+		</div>
+	);
+}