Merge pull request #9 from philbuchanan/#8

#8 Added ability to convert blocks to accordion items and back

accordion-blocks.php

@@ -3,7 +3,7 @@
 /**
  * Plugin Name: Accordion Blocks
  * Description: Gutenberg blocks for creating responsive accordion drop-downs.
- * Version: 1.0.2
+ * Version: 1.0.3
  * Author: Phil Buchanan
  * Author URI: https://philbuchanan.com
  */

build/index.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array('wp-element', 'wp-polyfill'), 'version' => 'bd05025e0e1f34135f9be3977153795f');
+<?php return array('dependencies' => array('wp-element', 'wp-polyfill'), 'version' => '41047dc9b2c0316e883f62232711ebaa');

package.json

@@ -1,6 +1,6 @@
 {
   "name": "accordion-blocks",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "Gutenberg blocks for creating responsive accordion drop-downs.",
   "main": "src/index.js",
   "scripts": {

readme.txt

@@ -5,7 +5,7 @@ Donate Link: https://philbuchanan.com/
 Tags: accordion, accordions, gutenberg, blocks, responsive accordions, accordions plugin, jquery accordions, accordions plugin wordpress, accordions plugin jquery
 Requires at least: 5.0
 Tested up to: 5.3
-Stable tag: 1.0.2
+Stable tag: 1.0.3
 License: GPLv2 or later
 License URI: http://www.gnu.org/licenses/gpl-2.0.html
 
@@ -75,6 +75,9 @@ This is most likely caused by a poorly coded theme. This plugin makes use of the
 For bug reports or feature requests or if you'd like to contribute to the plugin you can check everything out on [Github](https://github.com/philbuchanan/Accordion-Blocks/).
 
 == Changelog ==
+= 1.0.3 =
+* Added the ability to convert a paragraph or heading into an accordion.
+
 = 1.0.2 =
 * Added the ability for the block in the editor to accept custom css classes (allows for custom registration of Block Styles)
 * Accessibility fix: Removed aria-hidden=false from closed accordions.
@@ -86,6 +89,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.0.3 =
+Added the ability to convert a paragraph or heading into an accordion.
+
 = 1.0.2 =
 Added the ability for the block in the editor to accept custom css classes (allows for custom registration of Block Styles).
 

src/edit.js

@@ -43,7 +43,6 @@ const AccordionItemEdit = ({
 }) => {
 	const {
 		title,
-		content,
 		initiallyOpen,
 		clickToClose,
 		autoClose,

src/index.js

@@ -17,20 +17,23 @@ const {
  */
 import settings from './settings';
 
+import transforms from './transforms';
+
 import edit from './edit';
 
 
 
 registerBlockType('pb/accordion-item', {
 	...settings,
 
+	transforms,
+
 	edit,
 
 	save: ({ attributes }) => {
 		const {
 			className,
 			title,
-			content,
 			initiallyOpen,
 			clickToClose,
 			autoClose,

src/settings.js

@@ -31,11 +31,6 @@ export default {
 			source: 'children',
 			selector: '.c-accordion__title',
 		},
-		content: {
-			type: 'array',
-			source: 'children',
-			selector: '.c-accordion__content',
-		},
 		initiallyOpen: {
 			type: 'boolean',
 			default: false,

src/transforms.js

@@ -0,0 +1,63 @@
+/**
+ * WordPress dependencies
+ */
+const {
+	createBlock,
+} = wp.blocks;
+
+const {
+	create,
+	join,
+	split,
+	toHTMLString,
+} = wp.richText;
+
+
+
+export default {
+	from: [
+		{
+			type: 'block',
+			blocks: ['core/heading'],
+			transform: (attributes) => {
+				return createBlock('pb/accordion-item', {
+					title: attributes.content,
+					titleTag: 'h' + (attributes.level <= 4 ? attributes.level : 2),
+				});
+			},
+		},
+		{
+			type: 'block',
+			isMultiBlock: true,
+			blocks: ['core/paragraph'],
+			transform: (attributes) => {
+				return createBlock('pb/accordion-item', {}, attributes.map(
+					item => createBlock('core/paragraph', {
+						content: item.content
+					})
+				));
+			},
+		},
+	],
+	to: [
+		{
+			type: 'block',
+			blocks: ['core/paragraph'],
+			transform: (attributes, innerBlocks) => {
+				var newBlocks = innerBlocks.map(block => createBlock(block.name, block.attributes));
+
+				const level = attributes.titleTag !== 'button' ?
+					parseInt(attributes.titleTag.replace('h', '')) : 2;
+
+				newBlocks.splice(0, 0, createBlock('core/heading', {
+					content:   attributes.title,
+					anchor:    attributes.anchor,
+					className: attributes.className,
+					level:     level,
+				}));
+
+				return newBlocks;
+			},
+		},
+	],
+};