Introduce support for custom gutter controls (godaddy-wordpress#1619)

* Add animation transition between gallery collage items * [wip] Add Settings icon to gutter * [tiny] Add vertical-align on option-selector-group * WIP implement gutter custom control on collage block * [tiny] update snapshop * [WIP] Add filter to add support for gutters in block declaration * 🐛 fix missing classname on save * ✨ cleaning up scss related to gutters and running style lint * 🎉 Added support for features * [skip-ci] ✨ Added support for gallery-offset * [skip-ci] ✨ Added support for post block * ✨ Add custom gutter for rows, services and refactor save for posts * [fix] Php Unit test * Fix failing e2e tests * 🧹 Remove yarn start:dev * 🐛 Make sure we save a string and not a number * Remove invalid isLarge prop from Button * Update style.scss * Minor tweaks Co-authored-by: Jason Lemay <[email protected]> Co-authored-by: Jonathan Bardo <[email protected]> Co-authored-by: JR Tashjian <[email protected]> Co-authored-by: Rich Tabor <[email protected]>
WunderBart · Aug 24, 2020 · e688df8 · e688df8
1 parent 76987f8
commit e688df8
Show file tree

Hide file tree

Showing 82 changed files with 2,524 additions and 1,210 deletions.
diff --git a/.babelrc b/.babelrc
@@ -0,0 +1,8 @@
+{
+  "presets": [
+	"@wordpress/babel-preset-default"
+  ],
+  "plugins": [
+	"@babel/plugin-proposal-class-properties"
+  ]
+}
diff --git a/.dev/config/webpack.config.js b/.dev/config/webpack.config.js
@@ -4,7 +4,7 @@ const postcssConfig = require( './postcss.config' );
 
 const MiniCssExtractPlugin = require( 'mini-css-extract-plugin' );
 const RtlCssPlugin = require( 'rtlcss-webpack-plugin' );
-const FixStyleOnlyEntriesPlugin = require( "webpack-fix-style-only-entries" );
+const FixStyleOnlyEntriesPlugin = require( 'webpack-fix-style-only-entries' );
 const nodeSassGlobImporter = require( 'node-sass-glob-importer' );
 
 const isProduction = process.env.NODE_ENV === 'production';
@@ -67,9 +67,9 @@ module.exports = {
 							sourceMap: ! isProduction,
 							sassOptions: {
 								importer: nodeSassGlobImporter(),
-							}
-						}
-					}
+							},
+						},
+					},
 				],
 			},
 		],
@@ -88,8 +88,8 @@ module.exports = {
 		new MiniCssExtractPlugin( {
 			filename: '[name].css',
 		} ),
-		new RtlCssPlugin( { 
-			filename: '[name]-rtl.css' 
+		new RtlCssPlugin( {
+			filename: '[name]-rtl.css',
 		} ),
 	],
 };
diff --git a/.dev/tests/jest/empty-class.js b/.dev/tests/jest/empty-class.js
@@ -0,0 +1 @@
+module.exports = {}
diff --git a/.dev/tests/jest/jest.config.js b/.dev/tests/jest/jest.config.js
@@ -7,4 +7,7 @@ module.exports = {
 	testMatch: [ '<rootDir>/src/**/test/*.spec.js' ],
 	setupFilesAfterEnv: [ '<rootDir>/.dev/tests/jest/setup-globals.js' ],
 	reporters: [ 'default' ],
+	moduleNameMapper: {
+		'@godaddy-wordpress/coblocks-icons': '<rootDir>/.dev/tests/jest/empty-class.js',
+	},
 };
diff --git a/.dev/tests/phpunit/src/blocks/posts/test-index.php b/.dev/tests/phpunit/src/blocks/posts/test-index.php
@@ -63,7 +63,7 @@ public function test_coblocks_render_posts_block() {
 		global $post;
 		$post = get_post( $post_id );
 
-		$this->assertEquals( '<div class="wp-block-coblocks-posts test-class-name"><div class="wp-block-coblocks-posts__inner"></div></div>', coblocks_render_posts_block( $attributes ) );
+		$this->assertEquals( '<div class="wp-block-coblocks-posts test-class-name"><div class="wp-block-coblocks-posts__inner" style=""></div></div>', coblocks_render_posts_block( $attributes ) );
 	}
 
 	/**

diff --git a/class-coblocks.php b/class-coblocks.php
@@ -122,6 +122,9 @@ private function includes() {
 			$gutenberg_plugin_file    = 'gutenberg/gutenberg.php';
 			$gutenberg_plugin_version = empty( $installed_plugins[ $gutenberg_plugin_file ] ) ? null : $installed_plugins[ $gutenberg_plugin_file ]['Version'];
 
+			// Require CoBlocks custom filters
+			require_once COBLOCKS_PLUGIN_DIR . 'src/components/gutter-control/gutter-wrapper.php';
+
 			if ( is_admin() && is_plugin_active( $gutenberg_plugin_file ) && version_compare( $gutenberg_plugin_version, '8.0.0', '>=' ) ) {
 				require_once COBLOCKS_PLUGIN_DIR . 'src/extensions/layout-selector/index.php';
 			}

diff --git a/package.json b/package.json
@@ -65,7 +65,11 @@
 		"zh_CN": "简体中文",
 		"zh_TW": "繁體中文"
 	},
+	"dependencies": {
+		"@godaddy-wordpress/coblocks-icons": "1.0.1"
+	},
 	"devDependencies": {
+		"@babel/plugin-proposal-class-properties": "7.10.4",
 		"@testing-library/jest-dom": "^4.2.4",
 		"@wordpress/block-editor": "3.1.0",
 		"@wordpress/block-library": "2.8.0",

diff --git a/src/blocks.js b/src/blocks.js
@@ -25,6 +25,9 @@ import './extensions/image-crop';
 import './extensions/coblocks-settings/';
 import './extensions/layout-selector';
 
+// Internal Extensions / Components
+import './components/gutter-control';
+
 // Formats
 import './formats';
 

diff --git a/src/blocks/accordion/styles/style.scss b/src/blocks/accordion/styles/style.scss
@@ -2,10 +2,13 @@
 	padding: 0 12px;
 }
 
-_:-ms-fullscreen, :root .wp-block-coblocks-accordion summary {
+_:-ms-fullscreen,
+ :root .wp-block-coblocks-accordion summary {
 	display: block;
 }
 
-_:-ms-lang(x), _:-webkit-full-screen, .wp-block-coblocks-accordion summary {
+_:-ms-lang(x),
+ _:-webkit-full-screen,
+ .wp-block-coblocks-accordion summary {
 	display: block;
 }
diff --git a/src/blocks/buttons/styles/style.scss b/src/blocks/buttons/styles/style.scss
@@ -27,6 +27,7 @@ $gutter: 1.35em;
 	}
 
 	.is-stacked-on-mobile {
+
 		@media (max-width: #{ ($break-small) }) {
 			display: block;
 

diff --git a/src/blocks/features/block.json b/src/blocks/features/block.json
@@ -6,10 +6,6 @@
 			"type": "integer",
 			"default": 4
 		},
-		"gutter": {
-			"type": "string",
-			"default": "medium"
-		},
 		"columns": {
 			"type": "number",
 			"default": 2

diff --git a/src/blocks/features/edit.js b/src/blocks/features/edit.js
@@ -12,6 +12,7 @@ import { BackgroundStyles, BackgroundClasses, BackgroundVideo, BackgroundDropZon
 import applyWithColors from './colors';
 import Inspector from './inspector';
 import Controls from './controls';
+import GutterWrapper from '../../components/gutter-control/gutter-wrapper';
 
 /**
  * WordPress dependencies
@@ -121,7 +122,6 @@ class Edit extends Component {
 				'has-columns': columns > 1,
 				[ `has-${ columns }-columns` ]: columns,
 				'has-responsive-columns': columns > 1,
-				[ `has-${ gutter }-gutter` ]: gutter,
 				'has-padding': paddingSize && paddingSize !== 'no',
 				[ `has-${ paddingSize }-padding` ]: paddingSize && ( paddingSize !== 'no' && paddingSize !== 'advanced' ),
 				'has-margin': marginSize && marginSize !== 'no',
@@ -159,16 +159,18 @@ class Edit extends Component {
 				<div
 					className={ classes }
 				>
-					<div className={ innerClasses } style={ innerStyles }>
-						{ isBlobURL( backgroundImg ) && <Spinner /> }
-						{ BackgroundVideo( attributes ) }
-						<InnerBlocks
-							template={ getCount( columns ) }
-							allowedBlocks={ ALLOWED_BLOCKS }
-							templateLock="all"
-							templateInsertUpdatesSelection={ false }
-							renderAppender={ () => ( null ) } />
-					</div>
+					<GutterWrapper { ...attributes }>
+						<div className={ innerClasses } style={ innerStyles }>
+							{ isBlobURL( backgroundImg ) && <Spinner /> }
+							{ BackgroundVideo( attributes ) }
+							<InnerBlocks
+								template={ getCount( columns ) }
+								allowedBlocks={ ALLOWED_BLOCKS }
+								templateLock="all"
+								templateInsertUpdatesSelection={ false }
+								renderAppender={ () => ( null ) } />
+						</div>
+					</GutterWrapper>
 				</div>
 			</Fragment>
 		);

diff --git a/src/blocks/features/index.js b/src/blocks/features/index.js
@@ -37,6 +37,9 @@ const settings = {
 	supports: {
 		align: [ 'wide', 'full' ],
 		coBlocksSpacing: true,
+		gutter: {
+			default: 'medium',
+		},
 	},
 	example: {
 		attributes: {

diff --git a/src/blocks/features/inspector.js b/src/blocks/features/inspector.js
@@ -4,8 +4,6 @@
 import applyWithColors from './colors';
 import { BackgroundPanel } from '../../components/background';
 import DimensionsControl from '../../components/dimensions-control/';
-import OptionSelectorControl from '../../components/option-selector-control';
-import gutterOptions from '../../utils/gutter-options';
 
 /**
  * WordPress dependencies
@@ -15,6 +13,7 @@ import { Component, Fragment } from '@wordpress/element';
 import { compose } from '@wordpress/compose';
 import { InspectorControls, PanelColorSettings } from '@wordpress/block-editor';
 import { PanelBody, RangeControl, withFallbackStyles } from '@wordpress/components';
+import GutterControl from '../../components/gutter-control/gutter-control';
 
 /**
  * Fallback styles
@@ -111,12 +110,7 @@ class Inspector extends Component {
 							min={ 1 }
 							max={ 4 }
 						/>
-						{ columns >= 2 && <OptionSelectorControl
-							label={ __( 'Gutter', 'coblocks' ) }
-							currentOption={ gutter }
-							options={ gutterOptions }
-							onChange={ ( newGutter ) => setAttributes( { gutter: newGutter } ) }
-						/> }
+						{ columns >= 2 && <GutterControl { ...this.props } /> }
 						<DimensionsControl { ...this.props }
 							type={ 'padding' }
 							label={ __( 'Padding', 'coblocks' ) }

diff --git a/src/blocks/features/save.js b/src/blocks/features/save.js
@@ -7,6 +7,7 @@ import classnames from 'classnames';
  * Internal dependencies
  */
 import { BackgroundStyles, BackgroundClasses, BackgroundVideo } from '../../components/background';
+import GutterWrapper from '../../components/gutter-control/gutter-wrapper';
 
 /**
  * WordPress dependencies
@@ -20,7 +21,6 @@ const save = ( { attributes, className } ) => {
 		contentAlign,
 		customTextColor,
 		textColor,
-		gutter,
 		marginSize,
 		paddingSize,
 	} = attributes;
@@ -40,7 +40,6 @@ const save = ( { attributes, className } ) => {
 			'has-columns': columns > 1,
 			[ `has-${ columns }-columns` ]: columns,
 			'has-responsive-columns': columns > 1,
-			[ `has-${ gutter }-gutter` ]: gutter,
 			'has-text-color': textColor || customTextColor,
 			[ textClass ]: textClass,
 			'has-padding': paddingSize && paddingSize !== 'no',
@@ -57,10 +56,12 @@ const save = ( { attributes, className } ) => {
 
 	return (
 		<div className={ classes }>
-			<div className={ innerClasses } style={ innerStyles }>
-				{ BackgroundVideo( attributes ) }
-				<InnerBlocks.Content />
-			</div>
+			<GutterWrapper { ...attributes }>
+				<div className={ innerClasses } style={ innerStyles }>
+					{ BackgroundVideo( attributes ) }
+					<InnerBlocks.Content />
+				</div>
+			</GutterWrapper>
 		</div>
 	);
 };
-Original file line number
+Diff line change
@@ Expand Up / @@ -27,6 +27,7 @@ $gutter: 1.35em; @@
     	}
     	.is-stacked-on-mobile {
     		@media (max-width: #{ ($break-small) }) {
     			display: block;
@@ Expand Down @@