Turn accordion into an attribute

WordPress · Sep 30, 2021 · 6622a13 · 6622a13
1 parent 31d4d99
commit 6622a13
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 15 deletions.
diff --git a/packages/block-library/src/navigation/block.json b/packages/block-library/src/navigation/block.json
@@ -36,6 +36,10 @@
 			"type": "boolean",
 			"default": true
 		},
+		"expandEffect":{
+			"type": "string",
+			"default": "dropdown"
+		},
 		"openSubmenusOnClick":{
 			"type": "boolean",
 			"default": false
@@ -91,14 +95,6 @@
 			"__experimentalTextDecoration": true
 		}
 	},
-	"styles": [
-		{
-		  "name": "dropdown",
-		  "label": "Dropdown",
-		  "isDefault": true
-		},
-		{ "name": "accordion", "label": "Accordion" }
-	],
 	"viewScript": "file:./view.min.js",
 	"editorStyle": "wp-block-navigation-editor",
 	"style": "wp-block-navigation"

diff --git a/packages/block-library/src/navigation/edit.js b/packages/block-library/src/navigation/edit.js
@@ -26,7 +26,12 @@ import {
 	getColorClassName,
 } from '@wordpress/block-editor';
 import { useDispatch, withSelect, withDispatch } from '@wordpress/data';
-import { PanelBody, ToggleControl, ToolbarGroup } from '@wordpress/components';
+import {
+	PanelBody,
+	ToggleControl,
+	SelectControl,
+	ToolbarGroup,
+} from '@wordpress/components';
 import { compose } from '@wordpress/compose';
 import { __ } from '@wordpress/i18n';
 
@@ -125,6 +130,9 @@ function Navigation( {
 		className: classnames( className, {
 			[ `items-justified-${ attributes.itemsJustification }` ]: attributes.itemsJustification,
 			'is-vertical': attributes.orientation === 'vertical',
+			'is-accordion':
+				attributes.orientation === 'vertical' &&
+				attributes.expandEffect === 'accordion',
 			'is-responsive': attributes.isResponsive,
 			'has-text-color': !! textColor.color || !! textColor?.class,
 			[ getColorClassName(
@@ -289,6 +297,25 @@ function Navigation( {
 								label={ __( 'Show submenu indicator icons' ) }
 							/>
 						) }
+						{ attributes.orientation === 'vertical' && (
+							<SelectControl
+								label={ __( 'Expand submenus as' ) }
+								value={ attributes.expandEffect }
+								options={ [
+									{
+										value: 'dropdown',
+										label: __( 'Dropdown' ),
+									},
+									{
+										value: 'accordion',
+										label: __( 'Accordion' ),
+									},
+								] }
+								onChange={ ( expandEffect ) => {
+									setAttributes( { expandEffect } );
+								} }
+							/>
+						) }
 					</PanelBody>
 				) }
 				{ hasColorSettings && (

diff --git a/packages/block-library/src/navigation/editor.scss b/packages/block-library/src/navigation/editor.scss
@@ -497,8 +497,7 @@ body.editor-styles-wrapper
 }
 
 // Styles for dropdown style menu.
-.wp-block-navigation:where(.is-style-dropdown),
-.wp-block-navigation:where(:not(.is-style-dropdown):not(.is-style-accordion)) {
+.wp-block-navigation:where(:not(.is-accordion)) {
 	// Styles for submenu flyout.
 	.has-child {
 		&.is-selected,
@@ -522,7 +521,7 @@ body.editor-styles-wrapper
 }
 
 // Styles for accordion style menu.
-.wp-block-navigation.is-style-accordion {
+.wp-block-navigation.is-accordion {
 	padding: 0;
 
 	// Increase specificity.

diff --git a/packages/block-library/src/navigation/style.scss b/packages/block-library/src/navigation/style.scss
@@ -175,8 +175,7 @@
 }
 
 // Styles for dropdown style menu.
-.wp-block-navigation:where(.is-style-dropdown) .has-child,
-.wp-block-navigation:where(:not(.is-style-dropdown):not(.is-style-accordion)) .has-child {
+.wp-block-navigation:where(:not(.is-accordion)) .has-child {
 	:where(.wp-block-navigation__submenu-container) {
 		// Submenu indentation when there's no background.
 		left: -1em;
@@ -212,7 +211,7 @@
 
 // Styles for submenu accordion.
 // These are separated out with reduced specificity to allow better inheritance from Global Styles.
-.wp-block-navigation:where(.is-style-accordion) .has-child {
+.wp-block-navigation:where(.is-accordion) .has-child {
 	display: block;
 	margin: $grid-unit-10 0;