Move Features/Services HeadingToolbar controls to block toolbar (#1352)

* Tweak HeadingToolbar for collapsed * Move HeadingToolbar for Services to the toolbar * Move HeadingToolbar for Features to the toolbar * update test and helper * fix features and services tests * Add missing label Co-authored-by: Anthony Ledesma <[email protected]>
godaddy-wordpress · Feb 19, 2020 · 7e18730 · 7e18730
1 parent f765185
commit 7e18730
Show file tree

Hide file tree

Showing 10 changed files with 104 additions and 59 deletions.
diff --git a/.dev/tests/cypress/helpers.js b/.dev/tests/cypress/helpers.js
@@ -275,6 +275,20 @@ export function openSettingsPanel( panelText ) {
 		} );
 }
 
+/**
+ * Open a block heading controls located in block toolbar
+ *
+ * @param number headingLevel The button that should be located and clicked
+ */
+export function openHeadingToolbarAndSelect( headingLevel ) {
+	cy.get( '.block-editor-block-toolbar' ).find('.block-editor-block-toolbar__slot').first().find('button').each( ( button, index ) => {
+		if( index === 1 ) { // represents the second position in the toolbar
+			cy.get(button).click( { force: true } );
+		}
+	} )
+	cy.get('.components-popover__content').find('div[role="menu"]').find('button').contains( headingLevel ).click();
+}
+
 /**
  * Toggle an checkbox in the settings panel of the block editor
  *

diff --git a/src/blocks/features/controls.js b/src/blocks/features/controls.js
@@ -2,6 +2,7 @@
  * Internal dependencies
  */
 import { BackgroundControls } from '../../components/background';
+import HeadingToolbar from '../../components/heading-toolbar';
 
 /**
  * WordPress dependencies
@@ -14,15 +15,23 @@ class Controls extends Component {
 		const {
 			attributes,
 			setAttributes,
+			onChangeHeadingLevel,
 		} = this.props;
 
 		const {
 			contentAlign,
+			headingLevel,
 		} = attributes;
 
 		return (
 			<Fragment>
 				<BlockControls>
+					<HeadingToolbar
+						minLevel={ 2 }
+						maxLevel={ 6 }
+						selectedLevel={ headingLevel }
+						onChange={ onChangeHeadingLevel }
+					/>
 					<AlignmentToolbar
 						value={ contentAlign }
 						onChange={ ( nextContentAlign ) => setAttributes( { contentAlign: nextContentAlign } ) }

diff --git a/src/blocks/features/edit.js b/src/blocks/features/edit.js
@@ -150,13 +150,11 @@ class Edit extends Component {
 				{ isSelected && (
 					<Controls
 						{ ...this.props }
+						onChangeHeadingLevel={ this.onChangeHeadingLevel }
 					/>
 				) }
 				{ isSelected && (
-					<Inspector
-						{ ...this.props }
-						onChangeHeadingLevel={ this.onChangeHeadingLevel }
-					/>
+					<Inspector { ...this.props } />
 				) }
 				<div
 					className={ classes }

diff --git a/src/blocks/features/inspector.js b/src/blocks/features/inspector.js
@@ -4,7 +4,6 @@
 import applyWithColors from './colors';
 import { BackgroundPanel } from '../../components/background';
 import DimensionsControl from '../../components/dimensions-control/';
-import HeadingToolbar from '../../components/heading-toolbar';
 import OptionSelectorControl from '../../components/option-selector-control';
 
 /**
@@ -14,7 +13,7 @@ import { __ } from '@wordpress/i18n';
 import { Component, Fragment } from '@wordpress/element';
 import { compose } from '@wordpress/compose';
 import { InspectorControls, PanelColorSettings } from '@wordpress/block-editor';
-import { PanelBody, RangeControl, SelectControl, withFallbackStyles } from '@wordpress/components';
+import { PanelBody, RangeControl, withFallbackStyles } from '@wordpress/components';
 
 /**
  * Fallback styles
@@ -39,7 +38,6 @@ class Inspector extends Component {
 			attributes,
 			backgroundColor,
 			clientId,
-			onChangeHeadingLevel,
 			setAttributes,
 			setBackgroundColor,
 			setTextColor,
@@ -49,7 +47,6 @@ class Inspector extends Component {
 		const {
 			columns,
 			gutter,
-			headingLevel,
 			marginBottom,
 			marginBottomMobile,
 			marginBottomTablet,
@@ -149,14 +146,8 @@ class Inspector extends Component {
 							label={ __( 'Gutter', 'coblocks' ) }
 							currentOption={ gutter }
 							options={ gutterOptions }
-							onChange={ ( gutter ) => setAttributes( { gutter } ) }
+							onChange={ ( newGutter ) => setAttributes( { gutter: newGutter } ) }
 						/> }
-						<HeadingToolbar
-							minLevel={ 1 }
-							maxLevel={ 7 }
-							selectedLevel={ headingLevel }
-							onChange={ onChangeHeadingLevel }
-						/>
 						<DimensionsControl { ...this.props }
 							type={ 'padding' }
 							label={ __( 'Padding', 'coblocks' ) }

diff --git a/src/blocks/features/test/features.cypress.js b/src/blocks/features/test/features.cypress.js
@@ -112,11 +112,23 @@ describe( 'Test CoBlocks Features Block', function() {
 
 	it( 'Updates the inner core/heading blocks when the "Heading Level" control is changed.', function() {
 		helpers.addCoBlocksBlockToPage( true, 'features' );
+		cy.get( 'div[data-type="core/heading"]' ).find( 'h4[aria-label="Add feature title…"]' );
 
-		helpers.openSettingsPanel( /features settings/i );
+		cy.get( '.wp-block-coblocks-features' ).click();
+		helpers.openHeadingToolbarAndSelect( 2 );
+		cy.get( 'div[data-type="core/heading"]' ).find( 'h2[aria-label="Add feature title…"]' );
 
-		cy.get( '.components-coblocks-heading-toolbar [aria-label="Heading 6"]' ).click( { force: true } );
-		cy.get( '[data-type="coblocks/feature"] [data-type="core/heading"] h6' ).should( 'have.length', 2 );
+		cy.get( '.wp-block-coblocks-features' ).click();
+		helpers.openHeadingToolbarAndSelect( 3 );
+		cy.get( 'div[data-type="core/heading"]' ).find( 'h3[aria-label="Add feature title…"]' );
+
+		cy.get( '.wp-block-coblocks-features' ).click();
+		helpers.openHeadingToolbarAndSelect( 4 );
+		cy.get( 'div[data-type="core/heading"]' ).find( 'h4[aria-label="Add feature title…"]' );
+
+		cy.get( '.wp-block-coblocks-features' ).click();
+		helpers.openHeadingToolbarAndSelect( 5 );
+		cy.get( 'div[data-type="core/heading"]' ).find( 'h5[aria-label="Add feature title…"]' );
 
 		helpers.savePage();
 		helpers.checkForBlockErrors( 'features' );

diff --git a/src/blocks/services/edit.js b/src/blocks/services/edit.js
@@ -9,6 +9,7 @@ import classnames from 'classnames';
  */
 import InspectorControls from './inspector';
 import icons from './icons';
+import HeadingToolbar from '../../components/heading-toolbar';
 
 /**
  * WordPress dependencies
@@ -208,6 +209,12 @@ class Edit extends Component {
 		return (
 			<Fragment>
 				<BlockControls>
+					<HeadingToolbar
+						minLevel={ 2 }
+						maxLevel={ 6 }
+						selectedLevel={ attributes.headingLevel }
+						onChange={ this.onChangeHeadingLevel }
+					/>
 					<AlignmentToolbar
 						value={ alignment }
 						onChange={ this.onChangeAlignment }
@@ -218,7 +225,6 @@ class Edit extends Component {
 					setAttributes={ setAttributes }
 					activeStyle={ activeStyle }
 					layoutOptions={ layoutOptions }
-					onChangeHeadingLevel={ this.onChangeHeadingLevel }
 					onToggleCtas={ this.toggleCtas }
 					onUpdateStyle={ this.updateStyle }
 					onSetColumns={ this.setColumns }

diff --git a/src/blocks/services/inspector.js b/src/blocks/services/inspector.js
@@ -105,13 +105,6 @@ const Inspector = ( props ) => {
 					options={ gutterOptions }
 					onChange={ ( gutter ) => setAttributes( { gutter } ) }
 				/> }
-				<HeadingToolbar
-					minLevel={ 1 }
-					maxLevel={ 7 }
-					selectedLevel={ attributes.headingLevel }
-					onChange={ onChangeHeadingLevel }
-				/>
-
 				<ToggleControl
 					label={ __( 'Action Buttons', 'coblocks' ) }
 					className="components-toggle-control--services-action-button"

diff --git a/src/blocks/services/test/services.cypress.js b/src/blocks/services/test/services.cypress.js
@@ -5,9 +5,9 @@ import * as helpers from '../../../../.dev/tests/cypress/helpers';
 
 describe( 'Test CoBlocks Services Block', function() {
 	/**
-	* Test that we can add a services block to the content, not alter
-	* any settings, and are able to successfully save the block without errors.
-	*/
+	 * Test that we can add a services block to the content, not alter
+	 * any settings, and are able to successfully save the block without errors.
+	 */
 	it( 'Test services block saves with empty values.', function() {
 		helpers.addCoBlocksBlockToPage( true, 'services' );
 
@@ -23,9 +23,9 @@ describe( 'Test CoBlocks Services Block', function() {
 	} );
 
 	/**
-	* Test that we can add a services block to the content, change
-	* column count and  are able to successfully save the block without errors.
-	*/
+	 * Test that we can add a services block to the content, change
+	 * column count and  are able to successfully save the block without errors.
+	 */
 	it( 'Test services block saves with columns attribute.', function() {
 		helpers.addCoBlocksBlockToPage( true, 'services' );
 
@@ -61,28 +61,41 @@ describe( 'Test CoBlocks Services Block', function() {
 	} );
 
 	/**
-	* Test that we can add a services block to the content, change
-	* heading level and  are able to successfully save the block without errors.
-	*/
+	 * Test that we can add a services block to the content, change
+	 * heading level and  are able to successfully save the block without errors.
+	 */
 	it( 'Test services block saves with heading level set.', function() {
 		helpers.addCoBlocksBlockToPage( true, 'services' );
 
 		cy.get( '.wp-block-coblocks-services' ).click( { force: true } );
 
-		cy.get( '.edit-post-sidebar' ).find( 'button[aria-label="Heading 1"]' ).parent().parent().children().each( ( $hLevelToggle, $i ) => {
-			cy.get( $hLevelToggle ).click();
-			cy.get( '.wp-block-coblocks-service' ).first().find( `h${ $i + 1 }[aria-label="Write title…"]` ).should( 'exist' );
-		} );
+		helpers.addCoBlocksBlockToPage( true, 'services' );
+		cy.get( 'div[data-type="core/heading"]' ).find( 'h3[aria-label="Write title…"]' );
 
-		helpers.savePage();
+		cy.get( '.wp-block-coblocks-services' ).click();
+		helpers.openHeadingToolbarAndSelect( 2 );
+		cy.get( 'div[data-type="core/heading"]' ).find( 'h2[aria-label="Write title…"]' );
+
+		cy.get( '.wp-block-coblocks-services' ).click();
+		helpers.openHeadingToolbarAndSelect( 3 );
+		cy.get( 'div[data-type="core/heading"]' ).find( 'h3[aria-label="Write title…"]' );
 
+		cy.get( '.wp-block-coblocks-services' ).click();
+		helpers.openHeadingToolbarAndSelect( 4 );
+		cy.get( 'div[data-type="core/heading"]' ).find( 'h4[aria-label="Write title…"]' );
+
+		cy.get( '.wp-block-coblocks-services' ).click();
+		helpers.openHeadingToolbarAndSelect( 5 );
+		cy.get( 'div[data-type="core/heading"]' ).find( 'h5[aria-label="Write title…"]' );
+
+		helpers.savePage();
 		helpers.checkForBlockErrors( 'services' );
 	} );
 
 	/**
-	* Test that we can add a services block to the content, enable
-	* action buttons and  are able to successfully save the block without errors.
-	*/
+	 * Test that we can add a services block to the content, enable
+	 * action buttons and  are able to successfully save the block without errors.
+	 */
 	it( 'Test services block saves with action buttons enabled.', function() {
 		helpers.addCoBlocksBlockToPage( true, 'services' );
 
@@ -98,8 +111,8 @@ describe( 'Test CoBlocks Services Block', function() {
 	} );
 
 	/**
-    * Test the services block saves with custom classes
-    */
+	 * Test the services block saves with custom classes
+	 */
 	it( 'Test the services block custom classes.', function() {
 		helpers.addCoBlocksBlockToPage( true, 'services' );
 

diff --git a/src/components/heading-toolbar/icon.js b/src/components/heading-toolbar/icon.js
@@ -17,7 +17,13 @@ export default function HeadingLevelIcon( { level, isPressed = false } ) {
 	}
 
 	return (
-		<SVG width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" isPressed={ isPressed } >
+		<SVG
+			width="20"
+			height="20"
+			viewBox="0 0 20 20"
+			xmlns="http://www.w3.org/2000/svg"
+			isPressed={ isPressed }
+		>
 			<Path d={ levelToPath[ level ] } />
 		</SVG>
 	);

diff --git a/src/components/heading-toolbar/index.js b/src/components/heading-toolbar/index.js
@@ -29,20 +29,23 @@ class HeadingToolbar extends Component {
 	}
 
 	render() {
-		const { minLevel, maxLevel, selectedLevel, onChange } = this.props;
+		const {
+			isCollapsed = true,
+			minLevel,
+			maxLevel,
+			selectedLevel,
+			onChange,
+		} = this.props;
+
 		return (
-			<BaseControl
-				label={ __( 'Heading Level', 'coblocks' ) }
-				id="components-coblocks-heading-level"
-				className="components-coblocks-heading-toolbar"
-			>
-				<Toolbar
-					icon={ <HeadingLevelIcon level={ selectedLevel } /> }
-					controls={ range( minLevel, maxLevel ).map( ( index ) =>
-						this.createLevelControl( index, selectedLevel, onChange )
-					) }
-				/>
-			</BaseControl>
+			<Toolbar
+				isCollapsed={ isCollapsed }
+				icon={ <HeadingLevelIcon level={ selectedLevel } /> }
+				controls={ range( minLevel, maxLevel ).map( ( index ) =>
+					this.createLevelControl( index, selectedLevel, onChange )
+				) }
+				label={ __( 'Change heading level' ) }
+			/>
 		);
 	}
 }