Fix disappearing buttons inside of Services blocks (#2613)

* remove display button toggle from services block

* update cypress test to reflect change

src/blocks/services/block.json

@@ -13,10 +13,6 @@
 		"headingLevel": {
 			"type": "integer",
 			"default": 3
-		},
-		"buttons": {
-			"type": "boolean",
-			"default": false
 		}
 	},
 	"title": "Services",

src/blocks/services/edit.js

@@ -66,13 +66,6 @@ const Edit = ( props ) => {
 		updateInnerAttributes( 'coblocks/service', { headingLevel } );
 	};
 
-	const toggleCtas = () => {
-		const buttons = ! attributes.buttons;
-		setAttributes( { buttons } );
-
-		updateInnerAttributes( 'coblocks/service', { showCta: buttons } );
-	};
-
 	const setColumns = ( value ) => {
 		setAttributes( { columns: parseInt( value ) } );
 	};
@@ -90,10 +83,9 @@ const Edit = ( props ) => {
 	/* istanbul ignore next */
 	useEffect( () => {
 		// Handle add and removal of service block when column is changed.
-		const { buttons, headingLevel, alignment } = props;
+		const { headingLevel, alignment } = props;
 
 		handlePlaceholderPlacement( 'coblocks/service', {
-			showCta: buttons,
 			headingLevel,
 			alignment,
 		} );
@@ -159,7 +151,6 @@ const Edit = ( props ) => {
 				setAttributes={ setAttributes }
 				activeStyle={ activeStyle }
 				layoutOptions={ layoutOptions }
-				onToggleCtas={ toggleCtas }
 				onUpdateStyle={ updateStyle }
 				onSetColumns={ setColumns }
 			/>

src/blocks/services/inspector.js

@@ -12,7 +12,7 @@ import GutterControl from '../../components/gutter-control/gutter-control';
  * WordPress dependencies.
  */
 import { __ } from '@wordpress/i18n';
-import { PanelBody, ToggleControl, RangeControl } from '@wordpress/components';
+import { PanelBody, RangeControl } from '@wordpress/components';
 import { InspectorControls } from '@wordpress/block-editor';
 import { ENTER, SPACE } from '@wordpress/keycodes';
 
@@ -22,7 +22,6 @@ const Inspector = ( props ) => {
 		setAttributes,
 		activeStyle,
 		layoutOptions,
-		onToggleCtas,
 		onUpdateStyle,
 	} = props;
 
@@ -71,17 +70,6 @@ const Inspector = ( props ) => {
 					onChange={ ( columns ) => setAttributes( { columns } ) }
 				/>
 				{ attributes.columns >= 2 && <GutterControl { ...props } /> }
-				<ToggleControl
-					label={ __( 'Display buttons', 'coblocks' ) }
-					className="components-toggle-control--services-action-button"
-					help={
-						attributes.buttons
-							? __( 'Showing the call to action buttons.', 'coblocks' )
-							: __( 'Toggle to show call to action buttons.', 'coblocks' )
-					}
-					checked={ attributes.buttons }
-					onChange={ onToggleCtas }
-				/>
 			</PanelBody>
 		</InspectorControls>
 	);

src/blocks/services/service/block.json

@@ -6,10 +6,6 @@
 			"type": "integer",
 			"default": 3
 		},
-		"showCta": {
-			"type": "boolean",
-			"default": false
-		},
 		"imageUrl": {
 			"type": "string",
 			"source": "attribute",

src/blocks/services/service/edit.js

@@ -14,7 +14,6 @@ import classnames from 'classnames';
  */
 import { __ } from '@wordpress/i18n';
 import { closeSmall } from '@wordpress/icons';
-import { createBlock } from '@wordpress/blocks';
 import { isBlobURL } from '@wordpress/blob';
 import { useEffect } from '@wordpress/element';
 import {
@@ -58,7 +57,7 @@ const Edit = ( props ) => {
 		return isSelected || rootClientId === selectedRootClientId;
 	} );
 
-	const { updateBlockAttributes, insertBlock, removeBlocks } = useDispatch( 'core/block-editor' );
+	const { updateBlockAttributes } = useDispatch( 'core/block-editor' );
 
 	const updateInnerAttributes = ( blockName, newAttributes ) => {
 		innerItems.forEach( ( item ) => {
@@ -71,30 +70,6 @@ const Edit = ( props ) => {
 		} );
 	};
 
-	const manageInnerBlock = ( blockName, blockAttributes, show = true ) => {
-		const migrateButton = innerItems.filter( ( item ) => item.name === 'core/button' );
-
-		// Migrate core/button to core/buttons block
-		if ( !! migrateButton.length ) {
-			removeBlocks( migrateButton.map( ( item ) => item.clientId ),	false );
-			const newBlock = createBlock( blockName, blockAttributes, migrateButton );
-			insertBlock( newBlock, innerItems.length, clientId, false );
-			return;
-		}
-
-		const targetBlock = innerItems.filter( ( item ) => item.name === blockName );
-
-		if ( ! targetBlock.length && show ) {
-			const newButton = createBlock( 'core/button', {} );
-			const newBlock = createBlock( blockName, blockAttributes, [ newButton ] );
-			insertBlock( newBlock, innerItems.length, clientId, false );
-		}
-
-		if ( targetBlock.length && ! show ) {
-			removeBlocks( targetBlock.map( ( item ) => item.clientId ),	false );
-		}
-	};
-
 	/* istanbul ignore next */
 	useEffect( () => {
 		updateInnerAttributes( 'core/heading', { level: attributes.headingLevel } );
@@ -105,15 +80,6 @@ const Edit = ( props ) => {
 		updateInnerAttributes( 'core/buttons', { contentJustification: attributes.alignment } );
 	}, [ attributes.alignment ] );
 
-	/* istanbul ignore next */
-	useEffect( () => {
-		manageInnerBlock( 'core/buttons', { contentJustification: attributes.alignment }, attributes.showCta );
-	}, [ attributes.showCta ] );
-
-	const toggleCta = () => {
-		setAttributes( { showCta: ! showCta } );
-	};
-
 	const replaceImage = ( file ) => {
 		setAttributes( { imageAlt: file.alt, imageId: file.id, imageUrl: file.url } );
 	};
@@ -197,7 +163,6 @@ const Edit = ( props ) => {
 		linkDestination,
 		linkTarget,
 		rel,
-		showCta,
 		alignment,
 	} = attributes;
 
@@ -255,7 +220,6 @@ const Edit = ( props ) => {
 			</BlockControls>
 			<InspectorControls
 				attributes={ attributes }
-				onToggleCta={ toggleCta }
 				setAttributes={ setAttributes }
 			/>
 			<div className={ className }>

src/blocks/services/service/inspector.js

@@ -2,30 +2,17 @@
  * WordPress dependencies.
  */
 import { __ } from '@wordpress/i18n';
-import { PanelBody, ToggleControl, TextareaControl, ExternalLink, FocalPointPicker } from '@wordpress/components';
+import { PanelBody, TextareaControl, ExternalLink, FocalPointPicker } from '@wordpress/components';
 import { InspectorControls } from '@wordpress/block-editor';
 
 const Inspector = ( props ) => {
 	const {
 		attributes,
 		setAttributes,
-		onToggleCta,
 	} = props;
 
 	return (
 		<InspectorControls>
-			<PanelBody title={ __( 'Service settings', 'coblocks' ) }>
-				<ToggleControl
-					label={ __( 'Display button', 'coblocks' ) }
-					help={
-						attributes.showCta
-							? __( 'Showing the call to action button.', 'coblocks' )
-							: __( 'Toggle to show a call to action button.', 'coblocks' )
-					}
-					checked={ attributes.showCta }
-					onChange={ onToggleCta }
-				/>
-			</PanelBody>
 			{ attributes.imageUrl &&
 				<PanelBody title={ __( 'Image settings', 'coblocks' ) } initialOpen={ false }>
 					<TextareaControl

src/blocks/services/service/test/__snapshots__/save.spec.js.snap

@@ -1,13 +1,13 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`coblocks/service should render 1`] = `
-"<!-- wp:coblocks/service {"showCta":1,"focalPoint":{"x":100,"y":0}} -->
+"<!-- wp:coblocks/service {"focalPoint":{"x":100,"y":0}} -->
 <div class="wp-block-coblocks-service"><figure class="wp-block-coblocks-service__figure"><img src="https://website.com/wp-content/uploads/1234/56/image.jpg" alt="alt text" style="object-position:10000% 0%"/></figure><div class="wp-block-coblocks-service__content"></div></div>
 <!-- /wp:coblocks/service -->"
 `;
 
 exports[`coblocks/service should render with href 1`] = `
-"<!-- wp:coblocks/service {"showCta":1} -->
+"<!-- wp:coblocks/service -->
 <div class="wp-block-coblocks-service"><figure class="wp-block-coblocks-service__figure"><a href="https://www.godaddy.com" target="_blank"><img src="https://website.com/wp-content/uploads/1234/56/image.jpg" alt="alt text"/></a></figure><div class="wp-block-coblocks-service__content"></div></div>
 <!-- /wp:coblocks/service -->"
 `;

src/blocks/services/service/test/save.spec.js

@@ -27,14 +27,12 @@ describe( 'coblocks/service', () => {
 		block.attributes.imageUrl = 'https://website.com/wp-content/uploads/1234/56/image.jpg';
 		block.attributes.imageAlt = 'alt text';
 		block.attributes.focalPoint = { x: 100, y: 0 };
-		block.attributes.showCta = 1;
 		const serializedBlock = serialize( block );
 
 		expect( serializedBlock ).toBeDefined();
 		expect( serializedBlock ).toContain( `src="${ block.attributes.imageUrl }"` );
 		expect( serializedBlock ).toContain( `alt="${ block.attributes.imageAlt }"` );
 		expect( serializedBlock ).toContain( 'style="object-position:10000% 0%"' );
-		expect( serializedBlock ).toContain( '"showCta":1' );
 		expect( serializedBlock ).toMatchSnapshot();
 	} );
 

src/blocks/services/test/__snapshots__/save.spec.js.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`coblocks/services should render 1`] = `
-"<!-- wp:coblocks/services {"columns":3,"alignment":"center","headingLevel":2,"buttons":true} -->
+"<!-- wp:coblocks/services {"columns":3,"alignment":"center","headingLevel":2} -->
 <div class="wp-block-coblocks-services"><div class="has-columns has-3-columns has-responsive-columns has-huge-gutter"></div></div>
 <!-- /wp:coblocks/services -->"
 `;

src/blocks/services/test/save.spec.js

@@ -32,15 +32,13 @@ describe( 'coblocks/services', () => {
 		block.attributes.gutter = 'huge';
 		block.attributes.alignment = 'center';
 		block.attributes.headingLevel = 2;
-		block.attributes.buttons = true;
 		serializedBlock = serialize( block );
 
 		expect( serializedBlock ).toBeDefined();
 		expect( serializedBlock ).toContain( 'has-3-columns' );
 		expect( serializedBlock ).toContain( 'has-huge-gutter' );
 		expect( serializedBlock ).toContain( '"alignment":"center"' );
 		expect( serializedBlock ).toContain( '"headingLevel":2' );
-		expect( serializedBlock ).toContain( '"buttons":true' );
 		expect( serializedBlock ).toMatchSnapshot();
 	} );
 } );

src/blocks/services/test/services.cypress.js

@@ -89,21 +89,31 @@ describe( 'Test CoBlocks Services Block', function() {
 	} );
 
 	/**
-	 * 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 with a nested button block
+	 * and are able to successfully save the services and button blocks without errors.
 	 */
-	it( 'Test services block saves with action buttons enabled.', function() {
+	it( 'Test services block saves after adding button', function() {
 		helpers.addBlockToPost( 'coblocks/services', true );
 
 		cy.get( 'div.wp-block-button' ).should( 'not.exist' );
 
-		helpers.toggleSettingCheckbox( /display buttons/i );
+		const servicesBlock = cy.get( '[data-type="coblocks/services"]' );
 
-		cy.get( '.wp-block-buttons' ).should( 'have.length', 2 );
+		// Select the first child paragraph block of the parent services block
+		const servicesBlockParagraph = servicesBlock.find( '[data-type="core/paragraph"]' ).first();
 
+		// Insert a new buttons block into the services block
+		servicesBlockParagraph.click().type( '/buttons' ).type( '{enter}' );
+
+		cy.get( 'div.wp-block-button' ).should( 'exist' );
+
+		// Check ability to save page without errors
 		helpers.savePage();
 
 		helpers.checkForBlockErrors( 'coblocks/services' );
+
+		// Check button persists after saving
+		cy.get( 'div.wp-block-button' ).should( 'exist' );
 	} );
 
 	/**