Feature/#64 gutenberg 3.9.0 fixes

.gitignore

@@ -1,2 +1,3 @@
 node_modules
-.DS_Store
+.DS_Store
+/.vscode/launch.json

README.md

@@ -1,4 +1,4 @@
-# WDS Blocks v1.0.6
+# WDS Blocks v1.0.7
 
 WebDevStudios library of Gutenberg blocks.
 
@@ -17,8 +17,8 @@ WebDevStudios library of Gutenberg blocks.
 WDS Blocks also come with a robust set of options: background image, video, and color support. Plus, text color, custom CSS classes, and [Animate.css](https://daneden.github.io/animate.css/) support. These blocks have been tested with our starter theme, [wd_s](https://github.com/WebDevStudios/wd_s).
 
 ## Tested Up To
-- [WordPress](https://wordpress.org/) v4.9.7
-- [Gutenberg](https://wordpress.org/plugins/gutenberg/) v3.4.0
+- [WordPress](https://wordpress.org/) v4.9.8
+- [Gutenberg](https://wordpress.org/plugins/gutenberg/) v3.9.0
 
 ## Usage
 

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "wds-blocks-cgb-guten-block",
-	"version": "1.0.6",
+	"version": "1.0.7",
 	"private": true,
 	"scripts": {
 		"start": "cgb-scripts start",

src/blocks/call-to-action/index.js

@@ -62,7 +62,7 @@ export default registerBlockType(
 		// Description: Write a quick description.
 		description: __( 'A block to display a call to action area which will encourage a user to take action.' ),
 		// Category options: common, formatting, layout, widgets, embed.
-		category: 'common',
+		category: 'wds-blocks',
 		// Can use a Dashicon (see https://developer.wordpress.org/resource/dashicons/) or an imported SVG.
 		icon: 'admin-comments',
 		// Limit to 3 keywords/phrases. Users will see your block when they search using these keywords.

src/blocks/default/index.js

@@ -51,7 +51,7 @@ export default registerBlockType( 'wds/default', { // Namespaced with 'wds/', lo
 	// Description: Write a quick description.
 	description: __( 'Optional description.' ),
 	// Category options: common, formatting, layout, widgets, embed.
-	category: 'common',
+	category: 'wds-blocks',
 	// Can use a Dashicon (see https://developer.wordpress.org/resource/dashicons/) or an imported SVG.
 	icon: 'sos',
 	// Limit to 3 keywords/phrases. Users will see your block when they search using these keywords.

src/blocks/github-gist/index.js

@@ -33,7 +33,7 @@ registerBlockType( 'wds/gihub-gist', {
 	title: __( 'GitHub Gist Block (WDS)' ),
 	description: __( 'A block to embed a Gist via URL.' ),
 	icon,
-	category: 'embed',
+	category: 'wds-blocks',
 	supportHTML: false,
 	attributes: {
 		url: {
@@ -53,7 +53,7 @@ registerBlockType( 'wds/gihub-gist', {
 			};
 		}
 
-		componentWillMount() {
+		componentDidMount() {
 			if ( this.props.attributes.url ) {
 				this.fetchGistAndSetState();
 			}

src/blocks/hero/index.js

@@ -59,7 +59,7 @@ export default registerBlockType(
 		// Description: Write a quick description.
 		description: __( 'A block to display a full-width hero with a video, image, or color background.' ),
 		// Category options: common, formatting, layout, widgets, embed.
-		category: 'common',
+		category: 'wds-blocks',
 		// Can use a Dashicon (see https://developer.wordpress.org/resource/dashicons/) or an imported SVG.
 		icon: 'format-image',
 		// Limit to 3 keywords/phrases. Users will see your block when they search using these keywords.

src/blocks/recent-posts/index.js

@@ -32,7 +32,7 @@ export default registerBlockType( 'wds/recent-posts', { // Namespaced with 'wds/
 	description: __( 'A block to display your site\'s most recent posts.' ),
 
 	// Category options: common, formatting, layout, widgets, embed.
-	category: 'widgets',
+	category: 'wds-blocks',
 
 	// Can use a Dashicon (see https://developer.wordpress.org/resource/dashicons/) or an imported SVG.
 	icon: 'clock',

src/blocks/recent-posts/recent-posts.js

@@ -304,4 +304,4 @@ export default withSelect( ( select, props ) => {
 	return {
 		latestPosts: getEntityRecords( 'postType', 'post', latestPostsQuery ),
 	};
-} )( RecentPostsBlock );
+} )( RecentPostsBlock );

src/blocks/related-posts/index.js

@@ -51,7 +51,7 @@ export default registerBlockType( 'wds/related-posts', { // Namespaced with 'wds
 	// Description: Write a quick description.
 	description: __( 'A block to display manually selected related posts.' ),
 	// Category options: common, formatting, layout, widgets, embed.
-	category: 'widgets',
+	category: 'wds-blocks',
 	// Can use a Dashicon (see https://developer.wordpress.org/resource/dashicons/) or an imported SVG.
 	icon: 'admin-post',
 	// Limit to 3 keywords/phrases. Users will see your block when they search using these keywords.

src/blocks/two-column-block/index.js

@@ -67,7 +67,7 @@ export default registerBlockType( 'wds/two-column', { // Namespaced with 'wds/',
 	// Description: Write a quick description.
 	description: __( 'A block to display two equal-width columns containing a combination of text and/or an image.' ),
 	// Category options: common, formatting, layout, widgets, embed.
-	category: 'layout',
+	category: 'wds-blocks',
 	// Can use a Dashicon (see https://developer.wordpress.org/resource/dashicons/) or an imported SVG.
 	icon: 'grid-view',
 	// Limit to 3 keywords/phrases. Users will see your block when they search using these keywords.

src/blocks/users-grid/index.js

@@ -51,7 +51,7 @@ export default registerBlockType( 'wds/users-grid', { // Namespaced with 'wds/',
 	// Description: Write a quick description.
 	description: __( 'A block to display users in a grid. Note: Only users with published posts will be displayed.' ),
 	// Category options: common, formatting, layout, widgets, embed.
-	category: 'common',
+	category: 'wds-blocks',
 	// Can use a Dashicon (see https://developer.wordpress.org/resource/dashicons/) or an imported SVG.
 	icon: 'admin-users',
 	// Limit to 3 keywords/phrases. Users will see your block when they search using these keywords.

src/components/multiselect/dropdown.js

@@ -12,10 +12,15 @@ class DropDown extends Component {
 		};
 	}
 
-	componentWillReceiveProps( nextProps ) {
+	static getDerivedStateFromProps( nextProps, prevState ) {
+
 		if ( nextProps.selectedItems !== undefined ) {
-			this.setState( { selectedItems: nextProps.selectedItems } );
+			return {
+				selectedItems: nextProps.selectedItems
+			};
 		}
+
+		return null;
 	}
 
 	render() {

src/components/other-options/index.js

@@ -33,7 +33,7 @@ function OtherOptions( props ) {
 		>
 			<PanelRow>
 				<div className="wds-animation-type">
-					<p>
+					<div>
 						<SelectControl
 							key="animation-type"
 							label={ __( 'Animation Type' ) }
@@ -351,10 +351,10 @@ function OtherOptions( props ) {
 							] }
 							onChange={ setAnimationType }
 						/>
-					</p>
-					<p>
+					</div>
+					<div>
 						{ __( 'Select the animation for this block. Animations can only be applied to the entire block, not to individual elements.' ) }
-					</p>
+					</div>
 				</div>
 			</PanelRow>
 

src/components/text-options/index.js

@@ -35,7 +35,7 @@ function TextOptions( props ) {
 		>
 			<PanelRow>
 				<div className="wds-text-option">
-					<p>
+					<div>
 						<PanelColor
 							title={ __( 'Text Color' ) }
 							colorValue={ props.attributes.textColor }
@@ -45,10 +45,10 @@ function TextOptions( props ) {
 								onChange={ setTextColor }
 							/>
 						</PanelColor>
-					</p>
-					<p>
+					</div>
+					<div>
 						{ __( 'Change the text color of this block.' ) }
-					</p>
+					</div>
 				</div>
 			</PanelRow>
 		</PanelBody>

src/init.php

@@ -58,3 +58,28 @@ function enqueue_block_editor_assets() {
 // Recursively load all PHP files within the /src/ directory.
 require_once plugin_dir_path( __DIR__ ) . 'vendor/autoload/autoload.php';
 \AaronHolbrook\Autoload\autoload( plugin_dir_path( __DIR__ ) . 'src' );
+
+/**
+ * Adds custom category for use in block
+ *
+ * @url https://wordpress.org/gutenberg/handbook/extensibility/extending-blocks/#managing-block-categories
+ *
+ * @param [array]  $categories block categories.
+ * @param [string] $post post type.
+ * @return void updated array of $categories.
+ */
+function add_block_categories( $categories, $post ) {
+
+	// Otherwise update list of categories.
+	return array_merge(
+		$categories,
+		array(
+			array(
+				'slug'  => 'wds-blocks',
+				'title' => __( 'WDS Blocks', 'wds-blocks' ),
+			),
+		)
+	);
+}
+add_filter( 'block_categories', __NAMESPACE__ . '\\add_block_categories', 10, 2 );
+

src/sass/_global-blocks.scss

@@ -26,7 +26,12 @@
 		top: 50%;
 		transform: translate(-50%, -50%);
 		width: 100%;
-		z-index: -1;
+		z-index: 1;
+
+		~ * {
+			position: relative;
+			z-index: 2;
+		}
 	} // .video-container
 } // .has-video-background
 

wds-blocks.php

@@ -5,7 +5,7 @@
  * Description: WebDevStudios library of Gutenberg blocks.
  * Author:      WebDevStudios
  * Author URI:  https://webdevstudios.com/
- * Version:     1.0.6
+ * Version:     1.0.7
  * License:     GPL3+
  * License URI: http://www.gnu.org/licenses/gpl-3.0.html
  */