Merge pull request #157 from philbuchanan/#156

Use useInnerBlocksProps for inner blocks handling (#156)

accordion-blocks.php

@@ -4,9 +4,9 @@
  * Plugin Name: Accordion Blocks
  * Plugin URI: https://github.com/philbuchanan/Accordion-Blocks
  * Description: Gutenberg blocks for creating responsive accordion drop-downs.
- * Version: 1.4.1
- * Requires at least: 5.8
- * Tested up to: 5.8
+ * Version: 1.5.0
+ * Requires at least: 5.9
+ * Tested up to: 5.9
  * Requires PHP: 7.3
  * Author: Phil Buchanan
  * Author URI: https://philbuchanan.com

build/index.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array('wp-api-fetch', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-compose', 'wp-core-data', 'wp-data', 'wp-element', 'wp-i18n', 'wp-keycodes'), 'version' => 'efde7cf566bf861557c8c994b86559d2');
+<?php return array('dependencies' => array('wp-api-fetch', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-compose', 'wp-core-data', 'wp-data', 'wp-element', 'wp-i18n'), 'version' => '348416c729ba3f21f077b8a632fd9ba7');

readme.txt

@@ -3,9 +3,9 @@ Contributors: philbuchanan
 Author URI: https://philbuchanan.com/
 Donate Link: https://philbuchanan.com/donate/
 Tags: accordion, accordions, gutenberg, block, responsive
-Requires at least: 5.8
-Tested up to: 5.8
-Stable tag: 1.4.1
+Requires at least: 5.9
+Tested up to: 5.9
+Stable tag: 1.5.0
 Requires PHP: 7.3
 License: GPLv2 or later
 License URI: http://www.gnu.org/licenses/gpl-2.0.html
@@ -90,6 +90,10 @@ For bug reports or feature requests or if you'd like to contribute to the plugin
 2. Accordion block in the editor
 
 == Changelog ==
+= 1.5.0 =
+* Plugin now requires WordPress 5.9.
+* Use `useInnerBlocksProps` and `useInnerBlocksProps.save()` for inner blocks handling.
+
 = 1.4.1 =
 * Fixed: Fixed UUID not generating properly in widget editor.
 
@@ -186,6 +190,9 @@ For bug reports or feature requests or if you'd like to contribute to the plugin
 * All new plugin to support the new WordPress Gutenberg editor.
 
 == Upgrade Notice ==
+= 1.5.0 =
+Fixed compatibility issues with WordPress 5.9. Plugin now requires WordPress 5.9 (the changes are fundamentally incompatible with previous versions of WordPress).
+
 = 1.4.1 =
 Fixed accordions not generating UUIDs in the widgets editor, therefore breaking when returning to the widgets editor.
 

src/block/deprecated.js

@@ -57,18 +57,18 @@ const deprecated = [
 				uuid,
 			} = attributes;
 
-			var itemClasses = [
+			let itemClasses = [
 				'c-accordion__item',
 				'js-accordion-item',
 				'no-js',
 			];
 
-			var titleClasses = [
+			let titleClasses = [
 				'c-accordion__title',
 				'js-accordion-controller',
 			];
 
-			var contentStyles = {};
+			let contentStyles = {};
 
 			if (titleTag === 'button') {
 				titleClasses.push('c-accordion__title--button');

src/block/edit.js

@@ -9,8 +9,8 @@ import {
 	BlockControls,
 	InspectorControls,
 	RichText,
-	InnerBlocks,
 	useBlockProps,
+	useInnerBlocksProps,
 } from '@wordpress/block-editor';
 import {
 	PanelBody,
@@ -23,7 +23,6 @@ import {
 	Button,
 } from '@wordpress/components';
 import { useEntityProp } from '@wordpress/core-data';
-import { DOWN } from '@wordpress/keycodes';
 
 /**
  * Internal dependencies
@@ -143,6 +142,10 @@ const AccordionItemEdit = ({
 		)
 	});
 
+	const innerBlocksProps = useInnerBlocksProps({
+		className: 'c-accordion__content',
+	});
+
 	return (
 		<Fragment>
 			<BlockControls group="block">
@@ -314,9 +317,7 @@ const AccordionItemEdit = ({
 					value={ title }
 					onChange={ value => setAttributes({title: value}) }
 				/>
-				<div className="c-accordion__content">
-					<InnerBlocks />
-				</div>
+				<div { ...innerBlocksProps } />
 			</div>
 		</Fragment>
 	);

src/block/index.js

@@ -3,9 +3,9 @@
  */
 import { registerBlockType } from '@wordpress/blocks';
 import {
-	InnerBlocks,
 	RichText,
 	useBlockProps,
+	useInnerBlocksProps,
 } from '@wordpress/block-editor';
 
 /**
@@ -38,18 +38,18 @@ registerBlockType('pb/accordion-item', {
 			uuid,
 		} = attributes;
 
-		var itemClasses = [
+		let itemClasses = [
 			'c-accordion__item',
 			'js-accordion-item',
 			'no-js',
 		];
 
-		var titleClasses = [
+		let titleClasses = [
 			'c-accordion__title',
 			'js-accordion-controller',
 		];
 
-		var contentStyles = {};
+		let contentStyles = {};
 
 		if (titleTag === 'button') {
 			titleClasses.push('c-accordion__title--button');
@@ -71,6 +71,11 @@ registerBlockType('pb/accordion-item', {
 			'data-scroll-offset': scrollOffset,
 		});
 
+		const innerBlocksProps = useInnerBlocksProps.save({
+			id: 'ac-' + uuid,
+			className: 'c-accordion__content',
+		});
+
 		return (
 			<div { ...blockProps }>
 				<RichText.Content
@@ -80,12 +85,7 @@ registerBlockType('pb/accordion-item', {
 					role="button"
 					value={ title }
 				/>
-				<div
-					id={ 'ac-' + uuid }
-					className="c-accordion__content"
-				>
-					<InnerBlocks.Content />
-				</div>
+				<div { ...innerBlocksProps } />
 			</div>
 		);
 	},

src/block/transforms.js

@@ -33,7 +33,7 @@ export default {
 			type: 'block',
 			blocks: ['core/paragraph'],
 			transform: (attributes, innerBlocks) => {
-				var newBlocks = innerBlocks.map(block => createBlock(block.name, block.attributes));
+				let newBlocks = innerBlocks.map(block => createBlock(block.name, block.attributes));
 
 				const level = attributes.titleTag !== 'button' ?
 					parseInt(attributes.titleTag.replace('h', '')) : 2;