Merge pull request #343 from material-components/api/useblockprops-re…

…based useBlock props; Add title in block.json
material-components · Apr 21, 2022 · c916264 · c916264
2 parents ddcfe5a + 735b062
commit c916264
Show file tree

Hide file tree

Showing 47 changed files with 5,041 additions and 4,952 deletions.
diff --git a/plugin/assets/src/block-editor/blocks/button/block.json b/plugin/assets/src/block-editor/blocks/button/block.json
@@ -1,5 +1,6 @@
 {
   "name": "material/button",
+  "title": "Button (Material)",
   "category": "material",
   "parent": [ "material/buttons" ],
   "attributes": {
@@ -76,5 +77,6 @@
       "type": "string",
       "default": "normal"
     }
-  }
+  },
+  "apiVersion": 2
 }
diff --git a/plugin/assets/src/block-editor/blocks/buttons/block.json b/plugin/assets/src/block-editor/blocks/buttons/block.json
@@ -1,5 +1,6 @@
 {
   "name": "material/buttons",
+  "title": "Buttons (Material)",
   "category": "material",
   "supports": {
     "anchor": true,

diff --git a/plugin/assets/src/block-editor/blocks/buttons/edit.js b/plugin/assets/src/block-editor/blocks/buttons/edit.js
@@ -17,7 +17,7 @@
 /**
  * WordPress dependencies
  */
-import { InnerBlocks } from '@wordpress/block-editor';
+import { InnerBlocks, useBlockProps } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
@@ -31,8 +31,11 @@ const ALLOWED_BLOCKS = [ name ];
 const BUTTONS_TEMPLATE = [ [ name ] ];
 
 const Edit = () => {
+	const blockProps = useBlockProps( {
+		className: 'wp-block-material-buttons',
+	} );
 	return (
-		<div className="wp-block-material-buttons">
+		<div { ...blockProps }>
 			<InnerBlocks
 				allowedBlocks={ ALLOWED_BLOCKS }
 				template={ BUTTONS_TEMPLATE }

diff --git a/plugin/assets/src/block-editor/blocks/card/block.json b/plugin/assets/src/block-editor/blocks/card/block.json
@@ -93,5 +93,6 @@
   },
   "supports": {
     "align": [ "left", "right" ]
-  }
+  },
+  "apiVersion": 2
 }
diff --git a/plugin/assets/src/block-editor/blocks/card/edit.js b/plugin/assets/src/block-editor/blocks/card/edit.js
@@ -17,7 +17,7 @@
 /**
  * WordPress dependencies
  */
-import { InspectorControls } from '@wordpress/block-editor';
+import { InspectorControls, useBlockProps } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
@@ -100,6 +100,10 @@ const Edit = ( {
 		} );
 	};
 
+	const blockProps = useBlockProps( {
+		className,
+	} );
+
 	const cardProps = {
 		cardIndex,
 		contentLayout,
@@ -160,7 +164,7 @@ const Edit = ( {
 					{ ...inspectorControlsContentPanelProps }
 				/>
 			</InspectorControls>
-			<div className={ className }>
+			<div { ...blockProps }>
 				{ cardLayout === 'vertical' && (
 					<VerticalCardLayout { ...cardProps } />
 				) }

diff --git a/plugin/assets/src/block-editor/blocks/card/save.js b/plugin/assets/src/block-editor/blocks/card/save.js
@@ -20,6 +20,7 @@
 import './style.css';
 import VerticalCardLayout from './components/vertical-card-layout';
 import HorizontalCardLayout from './components/horizontal-card-layout';
+import { useBlockProps } from '@wordpress/block-editor';
 
 /**
  * Card Save component.
@@ -87,8 +88,12 @@ const Save = ( { attributes, className } ) => {
 		isEditMode: false,
 	};
 
+	const blockProps = useBlockProps.save( {
+		className,
+	} );
+
 	return (
-		<div className={ className }>
+		<div { ...blockProps }>
 			{ cardLayout === 'vertical' && (
 				<VerticalCardLayout { ...cardProps } />
 			) }

diff --git a/plugin/assets/src/block-editor/blocks/cards-collection/block.json b/plugin/assets/src/block-editor/blocks/cards-collection/block.json
@@ -1,5 +1,6 @@
 {
   "name": "material/cards-collection",
+  "title": "Cards Collection (Material)",
   "category": "material",
   "attributes": {
     "id": {
@@ -89,8 +90,8 @@
       "default": true
     }
   },
-
   "supports": {
     "align": [ "wide", "full" ]
-  }
+  },
+  "apiVersion": 2
 }
diff --git a/plugin/assets/src/block-editor/blocks/cards-collection/components/cards.js b/plugin/assets/src/block-editor/blocks/cards-collection/components/cards.js
@@ -22,12 +22,12 @@ import Masonry from 'react-masonry-css';
 /**
  * Cards component.
  *
- * @param {Object}  props             - Component props.
- * @param {string}  props.style       - Grid style.
- * @param {Object}  props.gutter      - Grid gutter.
- * @param {number}  props.columns     - Number of columns.
- * @param {Array}   props.cards       - Cards HTML markup.
- * @param {boolean} props.saveContext - Is the context `save` ?.
+ * @param {Object}  props                     - Component props.
+ * @param {string}  props.style               - Grid style.
+ * @param {Object}  props.gutter              - Grid gutter.
+ * @param {number}  props.columns             - Number of columns.
+ * @param {Array}   props.cards               - Cards HTML markup.
+ * @param {boolean} [props.saveContext=false] - Is the context `save` ?.
  *
  * @return {JSX.Element} Function returning the HTML markup for the component.
  */

diff --git a/plugin/assets/src/block-editor/blocks/cards-collection/edit.js b/plugin/assets/src/block-editor/blocks/cards-collection/edit.js
@@ -41,6 +41,7 @@ import getColumnSpan from './utils/get-column-span';
  * Internal dependencies
  */
 import { withId } from '../../components/with-id';
+import { useBlockProps } from '@wordpress/block-editor';
 
 /**
  * Card Collections Edit component.
@@ -50,7 +51,7 @@ import { withId } from '../../components/with-id';
  * @return {JSX.Element} Function returning the HTML markup for the component.
  */
 const Edit = props => {
-	const { attributes, setAttributes, className } = props;
+	const { attributes, setAttributes } = props;
 	const {
 		style,
 		columns,
@@ -355,10 +356,12 @@ const Edit = props => {
 		}
 	};
 
+	const blockProps = useBlockProps();
+
 	return (
 		<>
 			<CardsCollectionInspectorControls { ...inspectorControlsProps } />
-			<div className={ className }>
+			<div { ...blockProps }>
 				<Cards
 					style={ style }
 					gutter={ gutter }

diff --git a/plugin/assets/src/block-editor/blocks/cards-collection/save.js b/plugin/assets/src/block-editor/blocks/cards-collection/save.js
@@ -26,6 +26,7 @@ import VerticalCardLayout from '../card/components/vertical-card-layout';
 import HorizontalCardLayout from '../card/components/horizontal-card-layout';
 import getColumnSpan from './utils/get-column-span';
 import Cards from './components/cards';
+import { useBlockProps } from '@wordpress/block-editor';
 
 /**
  * Card Collections Save component.
@@ -79,13 +80,14 @@ const Save = ( { attributes, className } ) => {
 		);
 	}
 
+	const blockProps = useBlockProps.save( {
+		className: classnames( className, {
+			[ `align${ align }` ]: align,
+		} ),
+	} );
+
 	return (
-		<div
-			className={ classnames( className, {
-				[ `align${ align }` ]: align,
-			} ) }
-			id={ id }
-		>
+		<div { ...blockProps } id={ id }>
 			<Cards
 				style={ style }
 				gutter={ gutter }

diff --git a/plugin/assets/src/block-editor/blocks/common-posts-list/components/no-posts.js b/plugin/assets/src/block-editor/blocks/common-posts-list/components/no-posts.js
@@ -26,10 +26,11 @@ import { __ } from '@wordpress/i18n';
  * @param {Object} props                - Component props.
  * @param {string} props.name           - Component name.
  * @param {Array}  props.postsToDisplay - Posts.
+ * @param {string} [props.className=''] - Component class name.
  *
  * @return {JSX.Element} A functional component.
  */
-const NoPosts = ( { name, postsToDisplay } ) => {
+const NoPosts = ( { name, postsToDisplay, className = '' } ) => {
 	let placeholderLabel = __( 'Recent Posts', 'material-design' );
 
 	if ( name === 'material/hand-picked-posts' ) {
@@ -38,7 +39,11 @@ const NoPosts = ( { name, postsToDisplay } ) => {
 
 	return (
 		<>
-			<Placeholder icon={ 'sticky' } label={ placeholderLabel }>
+			<Placeholder
+				className={ className }
+				icon={ 'sticky' }
+				label={ placeholderLabel }
+			>
 				{ ! Array.isArray( postsToDisplay ) ? (
 					<Spinner />
 				) : (

diff --git a/plugin/assets/src/block-editor/blocks/common-posts-list/components/posts-list.js b/plugin/assets/src/block-editor/blocks/common-posts-list/components/posts-list.js
@@ -18,6 +18,7 @@
  * External dependencies
  */
 import Masonry from 'react-masonry-css';
+import classnames from 'classnames';
 
 /**
  * Internal dependencies
@@ -30,10 +31,11 @@ import SinglePost from './single-post';
  * @param {Object} props                - Component props.
  * @param {Object} props.attributes     - Block attributes.
  * @param {Array}  props.postsToDisplay - Posts.
+ * @param {string} [props.className=''] - Additional class name.
  *
  * @return {JSX.Element} A functional component.
  */
-const PostsList = ( { attributes, postsToDisplay } ) => {
+const PostsList = ( { attributes, postsToDisplay, className = '' } ) => {
 	const { style, columns } = attributes;
 
 	let columnSpan = 12;
@@ -50,7 +52,12 @@ const PostsList = ( { attributes, postsToDisplay } ) => {
 	return (
 		<>
 			{ ( style === 'grid' || style === 'list' ) && (
-				<div className={ `mdc-layout-grid layout-${ style }` }>
+				<div
+					className={ classnames(
+						className,
+						`mdc-layout-grid layout-${ style }`
+					) }
+				>
 					<div className="mdc-layout-grid__inner">
 						{ postsToDisplay.map( ( post, postIndex ) => {
 							const props = { post, style, attributes };
@@ -70,7 +77,10 @@ const PostsList = ( { attributes, postsToDisplay } ) => {
 			{ style === 'masonry' && (
 				<Masonry
 					breakpointCols={ columns }
-					className={ `masonry-grid layout-${ style }` }
+					className={ classnames(
+						className,
+						`masonry-grid layout-${ style }`
+					) }
 					columnClassName="masonry-grid_column"
 				>
 					{ postsToDisplay.map( ( post, postIndex ) => {

diff --git a/plugin/assets/src/block-editor/blocks/contact-form/block.json b/plugin/assets/src/block-editor/blocks/contact-form/block.json
@@ -1,5 +1,6 @@
 {
 	"name": "material/contact-form",
+  "title": "Contact Form (Material)",
 	"category": "material",
 	"attributes": {
 		"emailTo": {
@@ -26,5 +27,6 @@
 		   "type": "boolean",
 		   "default": false
 		}
-	}
-}
+	},
+  "apiVersion": 2
+}
diff --git a/plugin/assets/src/block-editor/blocks/contact-form/edit.js b/plugin/assets/src/block-editor/blocks/contact-form/edit.js
@@ -18,7 +18,7 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { InnerBlocks } from '@wordpress/block-editor';
+import { InnerBlocks, useBlockProps } from '@wordpress/block-editor';
 import { withSelect, withDispatch } from '@wordpress/data';
 import { compose } from '@wordpress/compose';
 
@@ -59,10 +59,18 @@ const TEMPLATES = [
 /**
  * Contact Form Edit component.
  *
- * @param {Object} props           - Component props.
- * @param {string} props.className - Component classes.
+ * @param {Object}   props                      - Component props.
+ * @param {string}   props.className            - Component classes.
+ * @param {Object}   props.attributes           - Attributes.
+ * @param {boolean}  props.attributes.outlined  - outlined.
+ * @param {boolean}  props.attributes.fullWidth - Full width.
+ * @param {boolean}  props.attributes.preview   - Preview.
+ * @param {Function} props.setAttributes        - Set attribute.
+ * @param {Function} props.createWarningNotice  - Create warning notice.
+ * @param {Function} props.formNotices          - Form notices.
+ * @param {number}   props.insertedForms        - Inserted forms.
  *
- * @return {Function} Function returning the HTML markup for the component.
+ * @return {JSX.Element} Function returning the HTML markup for the component.
  */
 const Edit = props => {
 	const {
@@ -74,6 +82,10 @@ const Edit = props => {
 		insertedForms,
 	} = props;
 
+	const blockProps = useBlockProps( {
+		className,
+	} );
+
 	if ( ! getConfig( 'allow_contact_form_block' ) ) {
 		return (
 			<div>
@@ -116,7 +128,7 @@ const Edit = props => {
 			} }
 		>
 			<FormInspectorControls setter={ setter } { ...props } />
-			<div className={ className }>
+			<div { ...blockProps }>
 				<InnerBlocks
 					template={ TEMPLATES }
 					allowedBlocks={ ALLOWED_BLOCKS }

diff --git a/plugin/assets/src/block-editor/blocks/contact-form/save.js b/plugin/assets/src/block-editor/blocks/contact-form/save.js
@@ -17,7 +17,7 @@
 /**
  * WordPress dependencies
  */
-import { InnerBlocks } from '@wordpress/block-editor';
+import { InnerBlocks, useBlockProps } from '@wordpress/block-editor';
 
 /**
  * Contact Form Save component.
@@ -29,9 +29,11 @@ import { InnerBlocks } from '@wordpress/block-editor';
  */
 const Save = props => {
 	const { className } = props;
-
+	const blockProps = useBlockProps.save( {
+		className,
+	} );
 	return (
-		<div className={ className }>
+		<div { ...blockProps }>
 			<InnerBlocks.Content />
 		</div>
 	);

diff --git a/plugin/assets/src/block-editor/blocks/data-table/block.json b/plugin/assets/src/block-editor/blocks/data-table/block.json
@@ -1,5 +1,6 @@
 {
 	"name": "material/data-table",
+  "title": "Data Table (Material)",
 	"category": "material",
 	"attributes": {
 	   "hasFixedLayout": {
@@ -121,4 +122,4 @@
 	"supports": {
 	   "align": true
 	}
- }
+ }