Merge pull request #97 from happyprime/fix/tweaks

Update docs, bump 3.0.0

.editorconfig

@@ -0,0 +1,12 @@
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
+indent_style = tab
+
+[*.{yml,yaml}]
+indent_style = space
+indent_size = 2

README.md

@@ -4,37 +4,54 @@ Display an accessible show/hide interface with details and summary elements.
 
 ## Description
 
-Show / Hide Section Block provides two blocks: a Show / Hide Group block that is populated with one or more Show / Hide Section blocks.
+Show / Hide Section Block provides four blocks that are used to display a group of `<details>` elements that each contain a `<summary>` and an arbitrary number of additional blocks.
+
+* The Show Hide Group block is a wrapping `<div>`.
+* The Show Hide Section block is a wrapping `<details>`. One or more of these blocks is added to a Show Hide Group block.
+* The Show Hide Summary block contains the content for a `<summary>` tag. One of these blocks is inside each Show Hide Section block.
+* The Show Hide Details block contains arbitrary content. One of these blocks is added inside each Show Hide Section block.
 
 The HTML output for an individual section is:
 
 	<!-- Each section block has a details element. -->
-	<details>
+	<details class="wp-block-happyprime-show-hide-section">
 		<!-- Each details element has a summary and additional, collapsible content. -->
-		<summary>Summary text</summary>
+		<summary class="wp-block-happyprime-show-hide-summary">Summary text</summary>
 		<!-- Additional inner blocks of any type are populated here. -->
 	</details>
 
 The HTML output for the group is:
 
-	<div>
-		<details>
-			<summary></summary>
+	<div class="wp-block-happyprime-show-hide-group">
+		<!-- Optional based on attribute -->
+		<button class="toggle-all" aria-expanded="false">Open all</button>
+		<details class="wp-block-happyprime-show-hide-section">
+			<summary class="wp-block-happyprime-show-hide-summary"></summary>
 			<!-- Additional blocks to be shown/hidden -->
 		</details>
-		<details>
-			<summary></summary>
+		<details class="wp-block-happyprime-show-hide-section">
+			<summary class="wp-block-happyprime-show-hide-summary"></summary>
 			<!-- Additional blocks to be shown hidden -->
 		</details>
 		<!-- Additional section blocks -->
 	</div>
 
 An option is provided in the block's side panel to toggle an "Open all"/"Close all" button. If this is toggled on for a block, an additional `<button>` element will be inserted and JavaScript will be used on the front-end to control the show/hide behavior of all `<details>` elements in the group at once.
 
-If the toggle is off, no JavaScript is loaded on the front end.
+If the toggle is off, no JavaScript is loaded on the front end and only the browser's default behavior is used for opening and closing `<details>` elements.
 
 ## Changelog
 
+### 3.0.0
+
+* Refactor block markup to improve editorial experience and formatting options.
+* Introduce `happyprime/show-hide-summary` block to manage `<summary>` content.
+* Introduce `happyprime/show-hide-details` block to manage remaningin `<details>` content.
+* Upgrade `happyprime/show-hide-group` and `happyprime/show-hide-section` blocks to API v3.
+* Add a deprecation routine to transform 2.0.x block markup into the new format.
+* Replace `@wordpress/scripts` with slimmer build configuration.
+* Bump minimum WordPress version to 6.4; confirm compatibility with 6.7.
+
 ### 2.0.3
 
 * Fix an issue where the front-end script was enqueued twice.

composer.json

@@ -1,6 +1,6 @@
 {
 	"name": "happyprime/show-hide-section-block",
-	"version": "1.3.2",
+	"version": "3.0.0",
 	"type": "wordpress-plugin",
 	"license": "GPLv2+",
 	"config": {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "show-hide-section",
-  "version": "2.0.3",
+  "version": "3.0.0",
   "description": "Display an accessible show/hide interface with details and summary elements.",
   "author": "Happy Prime",
   "license": "GPL-2.0-or-later",

plugin.php

@@ -2,7 +2,7 @@
 /**
  * Plugin Name: Show / Hide Section Block
  * Description: Display an accessible show/hide interface with details and summary elements.
- * Version: 2.0.3
+ * Version: 3.0.0
  * Plugin URI: https://wordpress.org/plugins/show-hide-section-block/
  * Author: Happy Prime
  * Author URI: https://happyprime.co/

readme.txt

@@ -3,45 +3,62 @@ Contributors: happyprime, jeremyfelt, slocker, philcable
 Tags: collapsible, details, summary
 Requires at least: 6.4
 Tested up to: 6.7
-Stable tag: 2.0.3
+Stable tag: 3.0.0
 License: GPLv2 or later
 Requires PHP: 7.4
 
 Display an accessible show/hide interface with details and summary elements.
 
 ## Description
 
-Show / Hide Section Block provides two blocks: a Show / Hide Group block that is populated with one or more Show / Hide Section blocks.
+Show / Hide Section Block provides four blocks that are used to display a group of `<details>` elements that each contain a `<summary>` and an arbitrary number of additional blocks.
+
+* The Show Hide Group block is a wrapping `<div>`.
+* The Show Hide Section block is a wrapping `<details>`. One or more of these blocks is added to a Show Hide Group block.
+* The Show Hide Summary block contains the content for a `<summary>` tag. One of these blocks is inside each Show Hide Section block.
+* The Show Hide Details block contains arbitrary content. One of these blocks is added inside each Show Hide Section block.
 
 The HTML output for an individual section is:
 
 	<!-- Each section block has a details element. -->
-	<details>
+	<details class="wp-block-happyprime-show-hide-section">
 		<!-- Each details element has a summary and additional, collapsible content. -->
-		<summary>Summary text</summary>
+		<summary class="wp-block-happyprime-show-hide-summary">Summary text</summary>
 		<!-- Additional inner blocks of any type are populated here. -->
 	</details>
 
 The HTML output for the group is:
 
-	<div>
-		<details>
-			<summary></summary>
+	<div class="wp-block-happyprime-show-hide-group">
+		<!-- Optional based on attribute -->
+		<button class="toggle-all" aria-expanded="false">Open all</button>
+		<details class="wp-block-happyprime-show-hide-section">
+			<summary class="wp-block-happyprime-show-hide-summary"></summary>
 			<!-- Additional blocks to be shown/hidden -->
 		</details>
-		<details>
-			<summary></summary>
+		<details class="wp-block-happyprime-show-hide-section">
+			<summary class="wp-block-happyprime-show-hide-summary"></summary>
 			<!-- Additional blocks to be shown hidden -->
 		</details>
 		<!-- Additional section blocks -->
 	</div>
 
 An option is provided in the block's side panel to toggle an "Open all"/"Close all" button. If this is toggled on for a block, an additional `<button>` element will be inserted and JavaScript will be used on the front-end to control the show/hide behavior of all `<details>` elements in the group at once.
 
-If the toggle is off, no JavaScript is loaded on the front end.
+If the toggle is off, no JavaScript is loaded on the front end and only the browser's default behavior is used for opening and closing `<details>` elements.
 
 ## Changelog
 
+### 3.0.0
+
+* Refactor block markup to improve editorial experience and formatting options.
+* Introduce `happyprime/show-hide-summary` block to manage `<summary>` content.
+* Introduce `happyprime/show-hide-details` block to manage remaningin `<details>` content.
+* Upgrade `happyprime/show-hide-group` and `happyprime/show-hide-section` blocks to API v3.
+* Add a deprecation routine to transform 2.0.x block markup into the new format.
+* Replace `@wordpress/scripts` with slimmer build configuration.
+* Bump minimum WordPress version to 6.4; confirm compatibility with 6.7.
+
 ### 2.0.3
 
 * Fix an issue where the front-end script was enqueued twice.

webpack.config.js

@@ -1,6 +1,7 @@
 const path = require('path');
 const DependencyExtractionWebpackPlugin = require('@wordpress/dependency-extraction-webpack-plugin');
 const CopyPlugin = require('copy-webpack-plugin');
+const TerserPlugin = require('terser-webpack-plugin');
 
 module.exports = {
 	entry: {
@@ -36,6 +37,11 @@ module.exports = {
 	},
 	optimization: {
 		minimize: true,
+		minimizer: [
+			new TerserPlugin({
+				extractComments: false,
+			}),
+		],
 	},
 	module: {
 		rules: [