refactor: See Issues #15 #11

Fixes #15 Fixes #11

blocks/src/details-wrapper/block.json

@@ -7,6 +7,12 @@
 	"category": "text",
 	"icon": "button",
 	"description": "Wrapper for the details block",
+	"attributes": {
+		"wrapperButton": {
+			"type": "string",
+			"default": "Expand All"
+		}
+	},
 	"supports": {
 		"align": [ "wide", "full" ],
 		"color": {

blocks/src/details-wrapper/edit.js

@@ -1,18 +1,27 @@
 import { __ } from '@wordpress/i18n';
 
-import { useBlockProps, InnerBlocks } from '@wordpress/block-editor';
+import { useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor';
 
 import './editor.scss';
 export default function Edit() {
 	const blockProps = useBlockProps( {
 		className: 'details-wrapper',
 	} );
-	const ALLOWED_BLOCKS = [ 'ucsc/details' ];
+	const ALLOWED_BLOCKS = ['ucsc/details'];
+	const { children, ...innerBlocksProps } = useInnerBlocksProps(blockProps, {ALLOWED_BLOCKS});
+
 	return (
 		<>
 			<div { ...blockProps }>
 				<p class="wrapper-heading">Details wrapper</p>
-				<InnerBlocks allowedBlocks={ ALLOWED_BLOCKS } />
+
+				<div {...innerBlocksProps}>
+					<div class="expand-wrap"><a class="expand-collapse" id="expand" href="#/">
+						{__('Expand All', 'details-wrapper')}
+					</a></div>
+					{ children }
+				</div>
+
 			</div>
 		</>
 	);

blocks/src/details-wrapper/editor.scss

@@ -8,8 +8,6 @@
 	border: 1px solid #aaa;
 	border: 1px solid var(--wp--preset--color--light-gray);
 	border-radius: 4px;
-	margin: 0.5em 0.5em 0;
-	padding: 0.5em 0.5em 0;
 
 	.wrapper-heading {
 		color: #aaa;

blocks/src/details-wrapper/save.js

@@ -6,9 +6,9 @@ export default function save() {
 	const innerBlocksProps = useInnerBlocksProps.save();
 	return (
 		<div { ...blockProps }>
-			<a class="expand-collapse" id="expand" href="#/">
-				Expand All
-			</a>
+			<div class="expand-wrap"><a class="expand-collapse" id="expand" href="#/">
+				{__('Expand All', 'details-wrapper')}
+			</a></div>
 			<div { ...innerBlocksProps } />
 		</div>
 	);

blocks/src/details-wrapper/style.scss

@@ -18,13 +18,23 @@
 		background-color: var(--wp--preset--color--light-gray);
 	}
 
-	.expand-collapse {
-		color: #32373c;
-		background-color: var(--wp--preset--color--lightest-gray);
-		padding: 0.5rem 0.5rem 0.5rem 0;
-		margin-bottom: 1rem;
-		text-decoration: none;
-		border-radius: 5px;
+	&.has-background {
+		.expand-wrap {
+			padding:0.5rem;
+		}
+	}
+
+	.expand-wrap {
+		display:flex;
+		align-items:center;
+		justify-items:left;
+		padding:0.5rem 0;
+		.expand-collapse {
+			color: #32373c;
+			background-color: var(--wp--preset--color--lightest-gray);
+			padding: 0.5rem 0.5rem 0.5rem 0;
+			text-decoration: none;
+			border-radius: 5px;
 
 		&::before {
 			font-family: dashicons, sans-serif;
@@ -44,6 +54,7 @@
 			content: "\f347";
 		}
 	}
+	}
 
 	.details-block {
 		margin-top: 1rem;

blocks/src/example-static/block.json

@@ -0,0 +1,17 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 3,
+	"name": "create-block/example-static",
+	"version": "0.1.0",
+	"title": "Example Static",
+	"category": "widgets",
+	"icon": "smiley",
+	"description": "Example block scaffolded with Create Block tool.",
+	"supports": {
+		"html": false
+	},
+	"textdomain": "example-static",
+	"editorScript": "file:./index.js",
+	"editorStyle": "file:./index.css",
+	"style": "file:./style-index.css"
+}

blocks/src/example-static/edit.js

@@ -0,0 +1,38 @@
+/**
+ * Retrieves the translation of text.
+ *
+ * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-i18n/
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * React hook that is used to mark the block wrapper element.
+ * It provides all the necessary props like the class name.
+ *
+ * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-block-editor/#useblockprops
+ */
+import { useBlockProps } from '@wordpress/block-editor';
+
+/**
+ * Lets webpack process CSS, SASS or SCSS files referenced in JavaScript files.
+ * Those files can contain any CSS code that gets applied to the editor.
+ *
+ * @see https://www.npmjs.com/package/@wordpress/scripts#using-css
+ */
+import './editor.scss';
+
+/**
+ * The edit function describes the structure of your block in the context of the
+ * editor. This represents what the editor will render when the block is used.
+ *
+ * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-edit-save/#edit
+ *
+ * @return {WPElement} Element to render.
+ */
+export default function Edit() {
+	return (
+		<p { ...useBlockProps() }>
+			{ __( 'Example Static – hello from the editor!', 'example-static' ) }
+		</p>
+	);
+}

blocks/src/example-static/editor.scss

@@ -0,0 +1,9 @@
+/**
+ * The following styles get applied inside the editor only.
+ *
+ * Replace them with your own styles or remove the file completely.
+ */
+
+.wp-block-create-block-example-static {
+	border: 1px dotted #f00;
+}

blocks/src/example-static/index.js

@@ -0,0 +1,39 @@
+/**
+ * Registers a new block provided a unique name and an object defining its behavior.
+ *
+ * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-registration/
+ */
+import { registerBlockType } from '@wordpress/blocks';
+
+/**
+ * Lets webpack process CSS, SASS or SCSS files referenced in JavaScript files.
+ * All files containing `style` keyword are bundled together. The code used
+ * gets applied both to the front of your site and to the editor.
+ *
+ * @see https://www.npmjs.com/package/@wordpress/scripts#using-css
+ */
+import './style.scss';
+
+/**
+ * Internal dependencies
+ */
+import Edit from './edit';
+import save from './save';
+import metadata from './block.json';
+
+/**
+ * Every block starts by registering a new block type definition.
+ *
+ * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-registration/
+ */
+registerBlockType( metadata.name, {
+	/**
+	 * @see ./edit.js
+	 */
+	edit: Edit,
+
+	/**
+	 * @see ./save.js
+	 */
+	save,
+} );

blocks/src/example-static/save.js

@@ -0,0 +1,24 @@
+/**
+ * React hook that is used to mark the block wrapper element.
+ * It provides all the necessary props like the class name.
+ *
+ * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-block-editor/#useblockprops
+ */
+import { useBlockProps } from '@wordpress/block-editor';
+
+/**
+ * The save function defines the way in which the different attributes should
+ * be combined into the final markup, which is then serialized by the block
+ * editor into `post_content`.
+ *
+ * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-edit-save/#save
+ *
+ * @return {WPElement} Element to render.
+ */
+export default function save() {
+	return (
+		<p { ...useBlockProps.save() }>
+			{ 'Example Static – hello from the saved content!' }
+		</p>
+	);
+}

blocks/src/example-static/style.scss

@@ -0,0 +1,12 @@
+/**
+ * The following styles get applied both on the front of your site
+ * and in the editor.
+ *
+ * Replace them with your own styles or remove the file completely.
+ */
+
+.wp-block-create-block-example-static {
+	background-color: #21759b;
+	color: #fff;
+	padding: 2px;
+}

js/detailswrapper.js

@@ -1,63 +1,24 @@
-const expandCollapses = document.querySelectorAll( '.expand-collapse' );
-if ( expandCollapses )
-	expandCollapses.forEach( ( expandCollapse ) => {
-		expandCollapse.addEventListener( 'click', () => {
-			const currentAction = expandCollapse.getAttribute( 'id' );
-			if ( currentAction === 'expand' ) {
-				expandCollapse.setAttribute( 'id', 'collapse' );
+const expandCollapses = document.querySelectorAll('.expand-collapse');
+if (expandCollapses)
+	expandCollapses.forEach((expandCollapse) => {
+		expandCollapse.addEventListener('click', () => {
+			const currentAction = expandCollapse.getAttribute('id');
+			if (currentAction === 'expand') {
+				expandCollapse.setAttribute('id', 'collapse');
 				expandCollapse.innerHTML = 'Collapse All';
 			} else {
-				expandCollapse.setAttribute( 'id', 'expand' );
+				expandCollapse.setAttribute('id', 'expand');
 				expandCollapse.innerHTML = 'Expand All';
 			}
 
-			expandCollapse.parentElement
-				.querySelectorAll( 'details' )
-				.forEach( ( accItem, i ) => {
-					if ( currentAction === 'expand' ) {
-						accItem.setAttribute( 'open', true );
+			expandCollapse.parentElement.parentElement
+				.querySelectorAll('details')
+				.forEach((accItem, i) => {
+					if (currentAction === 'expand') {
+						accItem.setAttribute('open', true);
 					} else {
-						accItem.removeAttribute( 'open' );
+						accItem.removeAttribute('open');
 					}
-				} );
-		} );
-	} );
-
-const details = document.querySelectorAll( '.accordion-wrapper details' );
-if ( details )
-	details.forEach( ( detail ) => {
-		detail.addEventListener( 'toggle', ( e ) => {
-			const currentAccWrapper = e.target.parentElement.parentElement;
-			const expandCollapse =
-				currentAccWrapper.querySelector( '.expand-collapse' );
-			const currentAction = expandCollapse.getAttribute( 'id' );
-
-			if ( currentAction === 'expand' ) {
-				if ( allOpen( currentAccWrapper ) ) {
-					expandCollapse.setAttribute( 'id', 'collapse' );
-					expandCollapse.innerHTML = 'Collapse All';
-				}
-			} else {
-				if ( allClosed( currentAccWrapper ) ) {
-					expandCollapse.setAttribute( 'id', 'expand' );
-					expandCollapse.innerHTML = 'Expand All';
-				}
-			}
-		} );
-	} );
-
-function allOpen( currentAccWrapper ) {
-	let allOpenRet = true;
-	currentAccWrapper.querySelectorAll( 'details' ).forEach( ( detail ) => {
-		if ( ! detail.open ) allOpenRet = false;
-	} );
-	return allOpenRet;
-}
-
-function allClosed( currentAccWrapper ) {
-	let allClosedRet = true;
-	currentAccWrapper.querySelectorAll( 'details' ).forEach( ( detail ) => {
-		if ( detail.open ) allClosedRet = false;
-	} );
-	return allClosedRet;
-}
+				});
+		});
+	});