Merge branch 'develop' into m3/gutebnerg-typography

plugin/assets/src/block-editor/blocks/buttons/edit.js

@@ -31,9 +31,7 @@ const ALLOWED_BLOCKS = [ name ];
 const BUTTONS_TEMPLATE = [ [ name ] ];
 
 const Edit = () => {
-	const blockProps = useBlockProps( {
-		className: 'wp-block-material-buttons',
-	} );
+	const blockProps = useBlockProps();
 	return (
 		<div { ...blockProps }>
 			<InnerBlocks

plugin/assets/src/block-editor/blocks/buttons/save.js

@@ -17,11 +17,11 @@
 /**
  * WordPress dependencies
  */
-import { InnerBlocks } from '@wordpress/block-editor';
+import { InnerBlocks, useBlockProps } from '@wordpress/block-editor';
 
 const Save = () => {
 	return (
-		<div>
+		<div { ...useBlockProps.save() }>
 			<InnerBlocks.Content />
 		</div>
 	);

plugin/assets/src/block-editor/blocks/image-list/edit.js

@@ -233,8 +233,6 @@ const ImageListEdit = ( {
 		noticeOperations.createErrorNotice( message );
 	};
 
-	const classNames = useBlockProps()?.className;
-
 	const galleryProps = {
 		images: images.map( image => {
 			image.caption = getCaption( image.id ) || image.caption;
@@ -252,19 +250,17 @@ const ImageListEdit = ( {
 		onMove: moveImage,
 		onSelect: setSelectedImage,
 		onLinkChange: updateImageLink,
-		className: classNames,
 	};
 
 	return (
-		<>
+		<div { ...useBlockProps() }>
 			{ 'function' === typeof noticeUI ? noticeUI() : noticeUI }
 
 			{ hasImages && <Gallery { ...galleryProps } /> }
 
 			<MediaPlaceholder
 				addToGallery={ hasImagesWithId }
 				isAppender={ hasImages }
-				className={ classNames }
 				disableMediaButtons={ hasImages && ! isSelected }
 				icon={
 					! hasImages && (
@@ -400,7 +396,7 @@ const ImageListEdit = ( {
 					/>
 				</PanelBody>
 			</InspectorControls>
-		</>
+		</div>
 	);
 };
 

plugin/assets/src/customizer/components/google-fonts-control/item.js

@@ -59,28 +59,27 @@ const Item = props => {
 					<div className="components-base-control__field">
 						<label
 							className="components-base-control__label"
-							htmlFor={ `inspector-line-height-control-${ id }` }
-							id={ `inspector-line-height-label-${ id }` }
+							htmlFor={ `inspector-size-control-${ id }` }
+							id={ `inspector-size-label-${ id }` }
 						>
-							{ lineHeight.label }
+							{ size.label }
 						</label>
 						<input
-							id={ `inspector-line-height-control-${ id }` }
+							id={ `inspector-size-control-${ id }` }
 							className="components-google-fonts-control__number"
 							type="number"
-							value={ lineHeight.value || lineHeight.default }
-							min={ lineHeight.min }
-							max={ lineHeight.max }
-							step="0.01"
+							value={ size.value || size.default }
+							min={ size.min }
+							max={ size.max }
 							onChange={ event => {
-								const lineHeightValue = event.target.value;
+								const sizeValue = event.target.value;
 
 								onChange( {
 									id,
-									lineHeightValue,
+									sizeValue,
 									trackingValue: tracking.value,
-									sizeValue: size.value,
 									weightValue: weight.value,
+									lineHeightValue: lineHeight.value,
 								} );
 							} }
 						/>
@@ -90,27 +89,28 @@ const Item = props => {
 					<div className="components-base-control__field">
 						<label
 							className="components-base-control__label"
-							htmlFor={ `inspector-size-control-${ id }` }
-							id={ `inspector-size-label-${ id }` }
+							htmlFor={ `inspector-line-height-control-${ id }` }
+							id={ `inspector-line-height-label-${ id }` }
 						>
-							{ size.label }
+							{ lineHeight.label }
 						</label>
 						<input
-							id={ `inspector-size-control-${ id }` }
+							id={ `inspector-line-height-control-${ id }` }
 							className="components-google-fonts-control__number"
 							type="number"
-							value={ size.value || size.default }
-							min={ size.min }
-							max={ size.max }
+							value={ lineHeight.value || lineHeight.default }
+							min={ lineHeight.min }
+							max={ lineHeight.max }
+							step="0.01"
 							onChange={ event => {
-								const sizeValue = event.target.value;
+								const lineHeightValue = event.target.value;
 
 								onChange( {
 									id,
-									sizeValue,
+									lineHeightValue,
 									trackingValue: tracking.value,
+									sizeValue: size.value,
 									weightValue: weight.value,
-									lineHeightValue: lineHeight.value,
 								} );
 							} }
 						/>

plugin/assets/src/customizer/components/google-fonts-control/style.css

@@ -59,6 +59,10 @@
 		padding: 8px 0 8px 8px;
 	}
 
+	.google-fonts-control-child + .google-fonts-control-child {
+		margin-top: 20px;
+	}
+
 	.components-google-fonts-control__select {
 		flex-direction: row;
 		align-items: center;

plugin/material-design.php

@@ -3,7 +3,7 @@
  * Plugin Name: Material Design
  * Plugin URI: https://github.com/material-components/material-design-for-wordpress
  * Description: The official Material Design plugin for WordPress. Customize your site’s navigation, colors, typography, and shapes, use Material Components, and choose from over 1,000 Google Fonts and Material Design icons. From the team behind Google’s open-source design system.
- * Version: 0.5.1
+ * Version: 0.6.0
  * Requires at least: 5.6
  * Requires PHP:      5.6.20+
  * Author:  Material Design

plugin/readme.md

@@ -8,7 +8,7 @@ The official Material Design plugin for WordPress. Customize your site’s navig
 **Contributors:** [google](https://profiles.wordpress.org/google), [materialdesign](https://profiles.wordpress.org/materialdesign), [xwp](https://profiles.wordpress.org/xwp)
 **Requires at least:** 5.6
 **Tested up to:** 5.8.2
-**Stable tag:** 0.5.1
+**Stable tag:** 0.6.0
 **License:** [Apache License, Version 2.0](https://www.apache.org/licenses/LICENSE-2.0)
 
 ## Description ##

plugin/readme.txt

@@ -2,7 +2,7 @@
 Contributors: google, materialdesign, xwp
 Requires at least: 5.6
 Tested up to: 5.8.2
-Stable tag: 0.5.1
+Stable tag: 0.6.0
 License: Apache License, Version 2.0
 License URI: https://www.apache.org/licenses/LICENSE-2.0
 Tags: material-design, material-theming, google, blocks, gutenberg, theme-builder, accessibility, dark-mode

plugin/tests/js/block-editor/blocks/buttons/__snapshots__/edit.test.js.snap

@@ -5,9 +5,7 @@ Object {
   "asFragment": [Function],
   "baseElement": <body>
     <div>
-      <div
-        class="wp-block-material-buttons"
-      >
+      <div>
         <div>
            
           {"id":"button-1","name":"material/button"}
@@ -17,9 +15,7 @@ Object {
     </div>
   </body>,
   "container": <div>
-    <div
-      class="wp-block-material-buttons"
-    >
+    <div>
       <div>
          
         {"id":"button-1","name":"material/button"}