diff --git a/plugin/assets/css/src/block-editor.css b/plugin/assets/css/src/block-editor.css
index 4f435c4a0..f0622a047 100644
--- a/plugin/assets/css/src/block-editor.css
+++ b/plugin/assets/css/src/block-editor.css
@@ -26,6 +26,7 @@
 @import "./material-components.css";
 @import "./tokens/index.css";
 @import "./components/datatable-editor.css";
+@import "./components/button.css";
 
 @media (min-width: 600px) {
 
diff --git a/plugin/assets/css/src/components/button.css b/plugin/assets/css/src/components/button.css
new file mode 100644
index 000000000..991e5d46f
--- /dev/null
+++ b/plugin/assets/css/src/components/button.css
@@ -0,0 +1,126 @@
+/*
+ *  Copyright 2022 Google LLC
+ *
+ *  Licensed under the Apache License, Version 2.0 (the "License");
+ *  you may not use this file except in compliance with the License.
+ *  You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *   Unless required by applicable law or agreed to in writing, software
+ *   distributed under the License is distributed on an "AS IS" BASIS,
+ *   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *  See the License for the specific language governing permissions and
+ *  limitations under the License.
+ */
+
+.mdc-button {
+	align-items: center;
+	border: 0;
+	display: flex;
+	justify-content: center;
+	letter-spacing: 0.1px;
+	padding: 10px 24px;
+
+	&:focus,
+	&:active {
+		outline: thin dotted;
+	}
+
+	& .mdc-button__icon ~ .mdc-button__label {
+		margin-left: 8px;
+	}
+
+	&.is-large {
+		height: 50px;
+		padding: 16px 32px;
+	}
+
+	&:disabled {
+		cursor: not-allowed;
+	}
+}
+
+.mdc-button--raised,
+.mdc-button--elevated {
+	background-color: var(--md-sys-color-surface-variant);
+	border: 0 !important; /* Use !important to override the default style of the button. */
+	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 3px 1px rgba(0, 0, 0, 0.15);
+	color: var(--md-sys-color-primary);
+
+	&:hover {
+		background-color: rgba(var(--md-sys-color-primary-rgb), 0.08);
+	}
+
+	&:focus,
+	&:active {
+		background-color: rgba(var(--md-sys-color-primary-rgb), 0.12);
+	}
+
+	&:disabled {
+		background-color: rgba(31, 31, 31, 0.12);
+		color: var(--md-sys-color-on-surface);
+	}
+}
+
+.mdc-button--outlined,
+.mdc-button--outlined:not(:disabled),
+.mdc-button--text,
+.mdc-button--text:not(:disabled) {
+	background: transparent;
+	border: 1px solid var(--md-sys-color-outline) !important; /* Use !important to override the default style of the button. */
+	color: var(--md-sys-color-primary);
+
+	&:hover {
+		background-color: rgba(var(--md-sys-color-primary-rgb), 0.08);
+	}
+
+	&:focus,
+	&:active {
+		background-color: rgba(var(--md-sys-color-primary-rgb), 0.12);
+	}
+
+	&:disabled {
+		border: 1px solid rgba(31, 31, 31, 0.12);
+		color: var(--md-sys-color-on-surface);
+	}
+}
+
+.mdc-button--text,
+.mdc-button--text:not(:disabled) {
+	border: 0 !important; /* Use !important to override the default style of the button. */
+}
+
+.mdc-button--text:disabled {
+	color: var(--md-sys-color-on-surface);
+}
+
+.mdc-button--filled,
+.mdc-button--unelevated {
+	background-color: var(--md-sys-color-primary);
+	color: var(--md-sys-color-on-primary);
+
+	&:hover {
+		box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 3px 1px rgba(0, 0, 0, 0.15);
+	}
+
+	&:disabled {
+		background-color: rgba(31, 31, 31, 0.12);
+		color: var(--md-sys-color-on-surface);
+	}
+}
+
+.mdc-button--tonal {
+	background-color: var(--md-sys-color-secondary-container);
+	color: var(--md-sys-color-on-secondary-container);
+
+	&:hover {
+		background-color: rgba(var(--md-sys-color-secondary-container-rgb), 0.8);
+		box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 3px 1px rgba(0, 0, 0, 0.15);
+	}
+
+	&:disabled {
+		background-color: rgba(31, 31, 31, 0.12);
+		color: var(--md-sys-color-on-surface);
+	}
+}
diff --git a/plugin/assets/css/src/components/card.css b/plugin/assets/css/src/components/card.css
index 5ceb478f7..069bd5b60 100644
--- a/plugin/assets/css/src/components/card.css
+++ b/plugin/assets/css/src/components/card.css
@@ -158,7 +158,7 @@
 .mdc-card__link,
 .single-post-card__title,
 .material-design-card__title {
-	color: var(--md-sys-color-on-surface, #000);
+
 	text-decoration: none;
 }
 
diff --git a/plugin/assets/css/src/material-components.css b/plugin/assets/css/src/material-components.css
index d787632d7..7259db755 100644
--- a/plugin/assets/css/src/material-components.css
+++ b/plugin/assets/css/src/material-components.css
@@ -33,3 +33,4 @@
 @import "./components/tab-indicator.css";
 @import "./components/list.css";
 @import "./components/tooltip.css";
+@import "./components/button.css";
diff --git a/plugin/assets/src/block-editor/blocks/button/block.json b/plugin/assets/src/block-editor/blocks/button/block.json
index a31451d63..c2afabd4e 100644
--- a/plugin/assets/src/block-editor/blocks/button/block.json
+++ b/plugin/assets/src/block-editor/blocks/button/block.json
@@ -15,8 +15,8 @@
       "default": "text"
     },
     "style": {
-      "type": "string",
-      "default": "raised"
+      "default": "raised",
+      "type": "string"
     },
     "iconPosition": {
       "type": "string",
@@ -76,6 +76,11 @@
     "size": {
       "type": "string",
       "default": "normal"
+    },
+    "elevationStyle": {
+      "default": "elevated",
+      "enum": [ "text", "outlined", "elevated", "filled", "tonal" ],
+      "type": "string"
     }
   }
 }
diff --git a/plugin/assets/src/block-editor/blocks/button/deprecated.js b/plugin/assets/src/block-editor/blocks/button/deprecated.js
new file mode 100644
index 000000000..bbaf3e4b0
--- /dev/null
+++ b/plugin/assets/src/block-editor/blocks/button/deprecated.js
@@ -0,0 +1,24 @@
+/**
+ * Copyright 2021 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * Internal dependencies
+ */
+import { SaveM2 } from './deprecated/m2/m2-version';
+
+const deprecated = [ SaveM2 ];
+
+export default deprecated;
diff --git a/plugin/assets/src/block-editor/blocks/button/deprecated/m2/m2-version.js b/plugin/assets/src/block-editor/blocks/button/deprecated/m2/m2-version.js
new file mode 100644
index 000000000..0d3ed2351
--- /dev/null
+++ b/plugin/assets/src/block-editor/blocks/button/deprecated/m2/m2-version.js
@@ -0,0 +1,284 @@
+/*
+ *  Copyright 2022 Google LLC
+ *
+ *  Licensed under the Apache License, Version 2.0 (the "License");
+ *  you may not use this file except in compliance with the License.
+ *  You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *   Unless required by applicable law or agreed to in writing, software
+ *   distributed under the License is distributed on an "AS IS" BASIS,
+ *   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *  See the License for the specific language governing permissions and
+ *  limitations under the License.
+ */
+
+/**
+ * External dependencies
+ */
+import classNames from 'classnames';
+
+/**
+ * Internal dependencies
+ */
+import hasBg from '../../utils/has-bg';
+
+/**
+ * Button Children component.
+ *
+ * @param {Object} props              - Component props.
+ * @param {string} props.icon         - Button icon name.
+ * @param {string} props.iconPosition - Button icon position.
+ * @param {string} props.label        - Button label.
+ *
+ * @return {JSX.Element} Function returning the HTML markup for the component.
+ */
+const ButtonChildren = ( { icon, iconPosition, label } ) => (
+	<>
+		{ icon && iconPosition === 'leading' && (
+			<i className="material-icons mdc-button__icon">{ icon }</i>
+		) }
+		<div className="mdc-button__ripple"></div>
+		<span className="mdc-button__label">{ label }</span>
+		{ icon && iconPosition === 'trailing' && (
+			<i className="material-icons mdc-button__icon">{ icon }</i>
+		) }
+	</>
+);
+
+const attributesM2 = {
+	label: {
+		type: 'string',
+		source: 'html',
+		selector: '.mdc-button__label',
+		default: '',
+	},
+	type: {
+		type: 'string',
+		default: 'text',
+	},
+	style: {
+		type: 'string',
+		default: 'raised',
+	},
+	iconPosition: {
+		type: 'string',
+		default: 'leading',
+	},
+	cornerRadius: {
+		type: 'number',
+	},
+	url: {
+		type: 'string',
+		source: 'attribute',
+		selector: 'a',
+		attribute: 'href',
+		default: '',
+	},
+	rel: {
+		type: 'string',
+		source: 'attribute',
+		selector: 'a',
+		attribute: 'rel',
+		default: '',
+	},
+	linkTarget: {
+		type: 'string',
+		source: 'attribute',
+		selector: 'a',
+		attribute: 'target',
+	},
+	icon: {
+		type: 'string',
+		default: '',
+		source: 'text',
+		selector: '.material-icons',
+	},
+	backgroundColor: {
+		type: 'string',
+	},
+	textColor: {
+		type: 'string',
+	},
+	tooltip: {
+		type: 'string',
+		default: '',
+		source: 'text',
+		selector: '.mdc-tooltip',
+	},
+	id: {
+		type: 'string',
+		source: 'attribute',
+		attribute: 'id',
+		selector: '*',
+	},
+	isSubmit: {
+		type: 'boolean',
+		default: false,
+	},
+	size: {
+		type: 'string',
+		default: 'normal',
+	},
+};
+
+const Save = ( {
+	attributes: {
+		rel,
+		url,
+		icon,
+		type,
+		label,
+		style,
+		textColor,
+		linkTarget,
+		cornerRadius,
+		iconPosition,
+		backgroundColor,
+		isSubmit,
+		tooltip,
+		id,
+		size,
+	},
+	className,
+} ) => {
+	if ( 'icon' === type ) {
+		const tooltipId = tooltip ? `${ id }-tooltip` : false;
+		const tooltipProps = tooltipId
+			? {
+					'aria-describedby': tooltipId,
+			  }
+			: {};
+
+		return (
+			<div className={ className } id={ id }>
+				{ url && ! isSubmit ? (
+					<a
+						href={ url }
+						rel={ rel && ! isSubmit ? rel : undefined }
+						target={
+							linkTarget && ! isSubmit ? linkTarget : undefined
+						}
+						className={ classNames(
+							'material-icons',
+							'mdc-icon-button'
+						) }
+						style={ {
+							...( textColor ? { color: textColor } : {} ),
+						} }
+						{ ...tooltipProps }
+					>
+						{ icon }
+					</a>
+				) : (
+					<button
+						className={ classNames(
+							'material-icons',
+							'mdc-icon-button'
+						) }
+						style={ {
+							...( textColor ? { color: textColor } : {} ),
+						} }
+						type={ isSubmit ? 'submit' : undefined }
+						{ ...tooltipProps }
+					>
+						<div className="mdc-button__ripple"></div>
+						{ icon }
+					</button>
+				) }
+
+				{ tooltipId && (
+					<div
+						id={ tooltipId }
+						className="mdc-tooltip"
+						role="tooltip"
+						aria-hidden="true"
+					>
+						<div className="mdc-tooltip__surface">{ tooltip }</div>
+					</div>
+				) }
+			</div>
+		);
+	}
+
+	return (
+		<div className={ className } id={ id }>
+			{ url && ! isSubmit ? (
+				<a
+					href={ url }
+					rel={ rel && ! isSubmit ? rel : undefined }
+					target={ linkTarget && ! isSubmit ? linkTarget : undefined }
+					style={ {
+						...( backgroundColor && hasBg( style )
+							? { backgroundColor }
+							: {} ),
+						...( textColor ? { color: textColor } : {} ),
+						...( cornerRadius !== undefined
+							? { borderRadius: `${ cornerRadius }px` }
+							: {} ),
+					} }
+					className={ classNames( 'mdc-button', {
+						[ `mdc-button--${ style }` ]: true,
+						[ `is-large` ]: size === 'large',
+					} ) }
+				>
+					<ButtonChildren
+						icon={ icon }
+						iconPosition={ iconPosition }
+						label={ label }
+					/>
+				</a>
+			) : (
+				<button
+					className={ classNames( 'mdc-button', {
+						[ `mdc-button--${ style }` ]: true,
+						[ `is-large` ]: size === 'large',
+					} ) }
+					style={ {
+						...( backgroundColor && hasBg( style )
+							? { backgroundColor }
+							: {} ),
+						...( textColor ? { color: textColor } : {} ),
+						...( cornerRadius !== undefined
+							? { borderRadius: `${ cornerRadius }px` }
+							: {} ),
+					} }
+					type={ isSubmit ? 'submit' : undefined }
+				>
+					<ButtonChildren
+						icon={ icon }
+						iconPosition={ iconPosition }
+						label={ label }
+					/>
+				</button>
+			) }
+		</div>
+	);
+};
+
+export const SaveM2 = {
+	attributes: attributesM2,
+	migrate( attributes ) {
+		const { style } = attributes;
+
+		let elevationStyle = style;
+
+		if ( 'raised' === style ) {
+			elevationStyle = 'elevated';
+		} else if ( 'unelevated' === style ) {
+			elevationStyle = 'filled';
+		}
+
+		return {
+			...attributes,
+			...{
+				elevationStyle,
+			},
+		};
+	},
+	isEligible( attr ) {
+		return 'undefined' === typeof attr.elevationStyle;
+	},
+	save: Save,
+};
diff --git a/plugin/assets/src/block-editor/blocks/button/edit.js b/plugin/assets/src/block-editor/blocks/button/edit.js
index 570cef86c..003af5187 100644
--- a/plugin/assets/src/block-editor/blocks/button/edit.js
+++ b/plugin/assets/src/block-editor/blocks/button/edit.js
@@ -59,7 +59,7 @@ import { name as ContactFormBlockName } from '../contact-form';
  *
  * @property {string}   type            - The type of button.
  * @property {string}   backgroundColor - The background color of the button.
- * @property {string}   style           - The style of the button.
+ * @property {string}   elevationStyle  - The style of the button.
  * @property {string}   textColor       - The text color of the button.
  * @property {string}   cornerRadius    - The corner radius of the button.
  * @property {string}   icon            - The icon of the button.
@@ -79,7 +79,7 @@ import { name as ContactFormBlockName } from '../contact-form';
 const MdcButton = ( {
 	type,
 	backgroundColor,
-	style,
+	elevationStyle,
 	textColor,
 	cornerRadius,
 	icon,
@@ -104,7 +104,7 @@ const MdcButton = ( {
 	return (
 		<div
 			style={ {
-				...( backgroundColor && hasBg( style )
+				...( backgroundColor && hasBg( elevationStyle )
 					? { backgroundColor }
 					: {} ),
 				...( textColor ? { color: textColor } : {} ),
@@ -112,8 +112,8 @@ const MdcButton = ( {
 					? { borderRadius: `${ cornerRadius }px` }
 					: {} ),
 			} }
-			className={ classNames( 'mdc-button', {
-				[ `mdc-button--${ style }` ]: true,
+			className={ classNames( 'mdc-button label-large', {
+				[ `mdc-button--${ elevationStyle }` ]: true,
 				[ `is-large` ]: size === 'large',
 			} ) }
 		>
@@ -144,7 +144,7 @@ const MdcButton = ( {
  * @property {string}  icon            - The icon of the button.
  * @property {string}  type            - Type of button.
  * @property {string}  label           - Label of button.
- * @property {string}  style           - Style of button.
+ * @property {string}  elevationStyle  - Style of button.
  * @property {string}  textColor       - Text color of button.
  * @property {string}  linkTarget      - Link target of button.
  * @property {string}  cornerRadius    - Corner radius of button.
@@ -173,7 +173,6 @@ const ButtonEdit = ( {
 		icon,
 		type,
 		label,
-		style,
 		textColor,
 		linkTarget,
 		cornerRadius,
@@ -182,6 +181,7 @@ const ButtonEdit = ( {
 		isSubmit,
 		tooltip,
 		size,
+		elevationStyle,
 	},
 	setAttributes,
 	isSelected,
@@ -243,7 +243,7 @@ const ButtonEdit = ( {
 					{ ...{
 						type,
 						backgroundColor,
-						style,
+						elevationStyle,
 						textColor,
 						cornerRadius,
 						icon,
@@ -294,7 +294,7 @@ const ButtonEdit = ( {
 							</span>
 							<ButtonGroup
 								buttons={ BUTTON_STYLES }
-								current={ style }
+								current={ elevationStyle }
 								onClick={ setter( 'style' ) }
 							/>
 						</>
@@ -354,13 +354,13 @@ const ButtonEdit = ( {
 						{ __( ' to update all buttons.', 'material-design' ) }
 					</div>
 
-					{ hasBg( style ) && type === 'text' && (
+					{ hasBg( elevationStyle ) && type === 'text' && (
 						<GlobalColor
 							label={ __( 'Container Color', 'material-design' ) }
 							value={ backgroundColor }
 							onChange={ setter( 'backgroundColor' ) }
 							globalPropName={
-								hasBg( style )
+								hasBg( elevationStyle )
 									? 'primary_color'
 									: 'on_primary_color'
 							}
@@ -374,13 +374,13 @@ const ButtonEdit = ( {
 						value={ textColor }
 						onChange={ setter( 'textColor' ) }
 						globalPropName={
-							hasBg( style )
+							hasBg( elevationStyle )
 								? 'on_primary_color'
 								: 'primary_color'
 						}
 					/>
 
-					{ hasBg( style ) && type === 'text' && (
+					{ hasBg( elevationStyle ) && type === 'text' && (
 						<GlobalColorContrastChecker
 							textColor={ textColor }
 							backgroundColor={ backgroundColor }
@@ -394,7 +394,7 @@ const ButtonEdit = ( {
 						title={ __( 'Corner Styles', 'material-design' ) }
 						initialOpen={ true }
 					>
-						{ style !== 'text' ? (
+						{ elevationStyle !== 'text' ? (
 							<>
 								<div className="components-base-control">
 									{ __(
diff --git a/plugin/assets/src/block-editor/blocks/button/index.js b/plugin/assets/src/block-editor/blocks/button/index.js
index b03f79efa..5405b8ad5 100644
--- a/plugin/assets/src/block-editor/blocks/button/index.js
+++ b/plugin/assets/src/block-editor/blocks/button/index.js
@@ -22,6 +22,7 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
+import deprecated from './deprecated';
 import icon from './components/block-icon';
 import edit from './edit';
 import save from './save';
@@ -44,4 +45,5 @@ export const settings = {
 	save,
 	example,
 	transforms,
+	deprecated,
 };
diff --git a/plugin/assets/src/block-editor/blocks/button/options.js b/plugin/assets/src/block-editor/blocks/button/options.js
index c2037f25f..2db01a27c 100644
--- a/plugin/assets/src/block-editor/blocks/button/options.js
+++ b/plugin/assets/src/block-editor/blocks/button/options.js
@@ -47,12 +47,16 @@ export const BUTTON_STYLES = [
 		value: 'outlined',
 	},
 	{
-		label: __( 'Raised', 'material-design' ),
-		value: 'raised',
+		label: __( 'Elevated', 'material-design' ),
+		value: 'elevated',
 	},
 	{
-		label: __( 'Unelevated', 'material-design' ),
-		value: 'unelevated',
+		label: __( 'Filled', 'material-design' ),
+		value: 'filled',
+	},
+	{
+		label: __( 'Tonal', 'material-design' ),
+		value: 'tonal',
 	},
 ];
 
diff --git a/plugin/assets/src/block-editor/blocks/button/save.js b/plugin/assets/src/block-editor/blocks/button/save.js
index 0dcd30867..313eead62 100644
--- a/plugin/assets/src/block-editor/blocks/button/save.js
+++ b/plugin/assets/src/block-editor/blocks/button/save.js
@@ -54,7 +54,6 @@ const ButtonSave = ( {
 		icon,
 		type,
 		label,
-		style,
 		textColor,
 		linkTarget,
 		cornerRadius,
@@ -64,6 +63,7 @@ const ButtonSave = ( {
 		tooltip,
 		id,
 		size,
+		elevationStyle,
 	},
 	className,
 } ) => {
@@ -134,7 +134,7 @@ const ButtonSave = ( {
 					rel={ rel && ! isSubmit ? rel : undefined }
 					target={ linkTarget && ! isSubmit ? linkTarget : undefined }
 					style={ {
-						...( backgroundColor && hasBg( style )
+						...( backgroundColor && hasBg( elevationStyle )
 							? { backgroundColor }
 							: {} ),
 						...( textColor ? { color: textColor } : {} ),
@@ -143,7 +143,7 @@ const ButtonSave = ( {
 							: {} ),
 					} }
 					className={ classNames( 'mdc-button', {
-						[ `mdc-button--${ style }` ]: true,
+						[ `mdc-button--${ elevationStyle }` ]: true,
 						[ `is-large` ]: size === 'large',
 					} ) }
 				>
@@ -155,12 +155,12 @@ const ButtonSave = ( {
 				</a>
 			) : (
 				<button
-					className={ classNames( 'mdc-button', {
-						[ `mdc-button--${ style }` ]: true,
+					className={ classNames( 'mdc-button label-large', {
+						[ `mdc-button--${ elevationStyle }` ]: true,
 						[ `is-large` ]: size === 'large',
 					} ) }
 					style={ {
-						...( backgroundColor && hasBg( style )
+						...( backgroundColor && hasBg( elevationStyle )
 							? { backgroundColor }
 							: {} ),
 						...( textColor ? { color: textColor } : {} ),
diff --git a/plugin/assets/src/block-editor/blocks/button/utils/has-bg.js b/plugin/assets/src/block-editor/blocks/button/utils/has-bg.js
index 915f866d3..b33cd8dbd 100644
--- a/plugin/assets/src/block-editor/blocks/button/utils/has-bg.js
+++ b/plugin/assets/src/block-editor/blocks/button/utils/has-bg.js
@@ -14,4 +14,9 @@
  * limitations under the License.
  */
 
-export default style => style === 'unelevated' || style === 'raised';
+/**
+ * @type {Array}
+ */
+const allowedStyles = [ 'filled', 'elevated', 'raised', 'unelevated' ];
+
+export default style => allowedStyles.includes( style );
diff --git a/plugin/php/block-patterns/call-to-action-benefits.php b/plugin/php/block-patterns/call-to-action-benefits.php
index 13ed9a87b..7f04a522d 100644
--- a/plugin/php/block-patterns/call-to-action-benefits.php
+++ b/plugin/php/block-patterns/call-to-action-benefits.php
@@ -25,7 +25,7 @@
 
 return [
 	'title'         => __( 'Call to action (CTA) + Benefits', 'material-design' ),
-	'content'       => "<!-- wp:group -->\n<div class=\"wp-block-group\"><!-- wp:heading {\"textAlign\":\"center\",\"align\":\"wide\"} -->\n<h2 class=\"alignwide has-text-align-center\">Call to action</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph {\"align\":\"center\"} -->\n<p class=\"has-text-align-center\">Perform this action in no time, satisfaction guaranteed.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:material/buttons {\"align\":\"center\"} -->\n<div class=\"wp-block-material-buttons aligncenter\"><!-- wp:material/button {\"iconPosition\":\"none\",\"size\":\"large\"} -->\n<div class=\"wp-block-material-button\" id=\"block-material-button-17\"><button class=\"mdc-button mdc-button--raised is-large\"><div class=\"mdc-button__ripple\"></div><span class=\"mdc-button__label\">Call to action</span></button></div>\n<!-- /wp:material/button --></div>\n<!-- /wp:material/buttons -->\n\n<!-- wp:spacer {\"height\":16} -->\n<div style=\"height:16px\" aria-hidden=\"true\" class=\"wp-block-spacer\"></div>\n<!-- /wp:spacer -->\n\n<!-- wp:columns -->\n<div class=\"wp-block-columns\"><!-- wp:column -->\n<div class=\"wp-block-column\"><!-- wp:material/list -->\n<div class=\"wp-block-material-list\"><ul class=\"mdc-list\"><li class=\"mdc-list-item\"><span class=\"mdc-list-item__graphic material-icons\">spa</span><span class=\"mdc-list-item__text\"><span class=\"mdc-list-item__primary-text\">Benefit 1</span></span></li></ul></div>\n<!-- /wp:material/list --></div>\n<!-- /wp:column -->\n\n<!-- wp:column -->\n<div class=\"wp-block-column\"><!-- wp:material/list -->\n<div class=\"wp-block-material-list\"><ul class=\"mdc-list\"><li class=\"mdc-list-item\"><span class=\"mdc-list-item__graphic material-icons\">favorite</span><span class=\"mdc-list-item__text\"><span class=\"mdc-list-item__primary-text\">Benefit 2</span></span></li></ul></div>\n<!-- /wp:material/list --></div>\n<!-- /wp:column -->\n\n<!-- wp:column -->\n<div class=\"wp-block-column\"><!-- wp:material/list -->\n<div class=\"wp-block-material-list\"><ul class=\"mdc-list\"><li class=\"mdc-list-item\"><span class=\"mdc-list-item__graphic material-icons\">check_circle</span><span class=\"mdc-list-item__text\"><span class=\"mdc-list-item__primary-text\">Benefit 3</span></span></li></ul></div>\n<!-- /wp:material/list --></div>\n<!-- /wp:column --></div>\n<!-- /wp:columns --></div>\n<!-- /wp:group -->",
+	'content'       => "<!-- wp:group -->\n<div class=\"wp-block-group\"><!-- wp:heading {\"textAlign\":\"center\",\"align\":\"wide\"} -->\n<h2 class=\"alignwide has-text-align-center\">Call to action</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph {\"align\":\"center\"} -->\n<p class=\"has-text-align-center\">Perform this action in no time, satisfaction guaranteed.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:material/buttons {\"align\":\"center\"} -->\n<div class=\"wp-block-material-buttons aligncenter\"><!-- wp:material/button {\"iconPosition\":\"none\",\"size\":\"large\",\"style\":\"elevated\"} -->\n<div class=\"wp-block-material-button\" id=\"block-material-button-17\"><button class=\"mdc-button label-large mdc-button--elevated is-large\"><div class=\"mdc-button__ripple\"></div><span class=\"mdc-button__label\">Call to action</span></button></div>\n<!-- /wp:material/button --></div>\n<!-- /wp:material/buttons -->\n\n<!-- wp:spacer {\"height\":16} -->\n<div style=\"height:16px\" aria-hidden=\"true\" class=\"wp-block-spacer\"></div>\n<!-- /wp:spacer -->\n\n<!-- wp:columns -->\n<div class=\"wp-block-columns\"><!-- wp:column -->\n<div class=\"wp-block-column\"><!-- wp:material/list -->\n<div class=\"wp-block-material-list\"><ul class=\"mdc-list\"><li class=\"mdc-list-item\"><span class=\"mdc-list-item__graphic material-icons\">spa</span><span class=\"mdc-list-item__text\"><span class=\"mdc-list-item__primary-text\">Benefit 1</span></span></li></ul></div>\n<!-- /wp:material/list --></div>\n<!-- /wp:column -->\n\n<!-- wp:column -->\n<div class=\"wp-block-column\"><!-- wp:material/list -->\n<div class=\"wp-block-material-list\"><ul class=\"mdc-list\"><li class=\"mdc-list-item\"><span class=\"mdc-list-item__graphic material-icons\">favorite</span><span class=\"mdc-list-item__text\"><span class=\"mdc-list-item__primary-text\">Benefit 2</span></span></li></ul></div>\n<!-- /wp:material/list --></div>\n<!-- /wp:column -->\n\n<!-- wp:column -->\n<div class=\"wp-block-column\"><!-- wp:material/list -->\n<div class=\"wp-block-material-list\"><ul class=\"mdc-list\"><li class=\"mdc-list-item\"><span class=\"mdc-list-item__graphic material-icons\">check_circle</span><span class=\"mdc-list-item__text\"><span class=\"mdc-list-item__primary-text\">Benefit 3</span></span></li></ul></div>\n<!-- /wp:material/list --></div>\n<!-- /wp:column --></div>\n<!-- /wp:columns --></div>\n<!-- /wp:group -->",
 	'viewportWidth' => 800,
 	'categories'    => [ 'material', 'buttons', 'header' ],
 	'description'   => __( 'Call to action + benefits pattern.', 'material-design' ),
diff --git a/plugin/php/block-patterns/call-to-action-features.php b/plugin/php/block-patterns/call-to-action-features.php
index 0b7808379..cdeca870b 100644
--- a/plugin/php/block-patterns/call-to-action-features.php
+++ b/plugin/php/block-patterns/call-to-action-features.php
@@ -25,7 +25,7 @@
 
 return [
 	'title'         => __( 'Features with icon + Call to action (CTA)', 'material-design' ),
-	'content'       => "<!-- wp:group {\"align\":\"wide\"} -->\n<div class=\"wp-block-group alignwide\"><div class=\"wp-block-group__inner-container\"><!-- wp:heading {\"textAlign\":\"center\"} -->\n<h2 class=\"has-text-align-center\">Features</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph {\"align\":\"center\",\"fontSize\":\"medium\"} -->\n<p class=\"has-text-align-center has-medium-font-size\">Lorem ipsum dolor sit amet consectetur adipiscing</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:columns -->\n<div class=\"wp-block-columns\"><!-- wp:column -->\n<div class=\"wp-block-column\"><!-- wp:material/icon {\"iconSize\":\"48\",\"align\":\"center\"} -->\n<div class=\"wp-block-material-icon has-text-align-center\"><i class=\"material-icons md-48\">security</i></div>\n<!-- /wp:material/icon -->\n\n<!-- wp:heading {\"textAlign\":\"center\",\"level\":5} -->\n<h5 class=\"has-text-align-center\">Feature 1</h5>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph {\"align\":\"center\"} -->\n<p class=\"has-text-align-center\">Arcu fusce convallis quam pharetra suspendisse porta auctor, fames quis sollicitudin torquent tempus ullamcor.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:material/buttons {\"align\":\"center\"} -->\n<div class=\"wp-block-material-buttons aligncenter\"><!-- wp:material/button {\"iconPosition\":\"none\"} -->\n<div class=\"wp-block-material-button\" id=\"block-material-button-0\"><button class=\"mdc-button mdc-button--raised\"><div class=\"mdc-button__ripple\"></div><span class=\"mdc-button__label\">Call to action</span></button></div>\n<!-- /wp:material/button --></div>\n<!-- /wp:material/buttons -->\n\n<!-- wp:spacer {\"height\":30} -->\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"></div>\n<!-- /wp:spacer --></div>\n<!-- /wp:column -->\n\n<!-- wp:column -->\n<div class=\"wp-block-column\"><!-- wp:material/icon {\"iconSize\":\"48\",\"align\":\"center\"} -->\n<div class=\"wp-block-material-icon has-text-align-center\"><i class=\"material-icons md-48\">web</i></div>\n<!-- /wp:material/icon -->\n\n<!-- wp:heading {\"textAlign\":\"center\",\"level\":5} -->\n<h5 class=\"has-text-align-center\">Feature 2</h5>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph {\"align\":\"center\"} -->\n<p class=\"has-text-align-center\">Quis eros molestie libero porttitor convallis, integer sed ullamcorper nunc pharetra cras vitae nisl inceptos.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:material/buttons {\"align\":\"center\"} -->\n<div class=\"wp-block-material-buttons aligncenter\"><!-- wp:material/button {\"iconPosition\":\"none\"} -->\n<div class=\"wp-block-material-button\" id=\"block-material-button-1\"><button class=\"mdc-button mdc-button--raised\"><div class=\"mdc-button__ripple\"></div><span class=\"mdc-button__label\">Call to action</span></button></div>\n<!-- /wp:material/button --></div>\n<!-- /wp:material/buttons -->\n\n<!-- wp:spacer {\"height\":30} -->\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"></div>\n<!-- /wp:spacer --></div>\n<!-- /wp:column -->\n\n<!-- wp:column -->\n<div class=\"wp-block-column\"><!-- wp:material/icon {\"iconSize\":\"48\",\"align\":\"center\"} -->\n<div class=\"wp-block-material-icon has-text-align-center\"><i class=\"material-icons md-48\">offline_bolt</i></div>\n<!-- /wp:material/icon -->\n\n<!-- wp:heading {\"textAlign\":\"center\",\"level\":5} -->\n<h5 class=\"has-text-align-center\">Feature 3</h5>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph {\"align\":\"center\"} -->\n<p class=\"has-text-align-center\">Placerat aptent ullamcorper vestibulum netus magnis eros id mauris, curae rutrum inceptos eleifend.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:material/buttons {\"align\":\"center\"} -->\n<div class=\"wp-block-material-buttons aligncenter\"><!-- wp:material/button {\"iconPosition\":\"none\"} -->\n<div class=\"wp-block-material-button\" id=\"block-material-button-2\"><button class=\"mdc-button mdc-button--raised\"><div class=\"mdc-button__ripple\"></div><span class=\"mdc-button__label\">Call to Action</span></button></div>\n<!-- /wp:material/button --></div>\n<!-- /wp:material/buttons -->\n\n<!-- wp:spacer {\"height\":30} -->\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"></div>\n<!-- /wp:spacer --></div>\n<!-- /wp:column --></div>\n<!-- /wp:columns --></div></div>\n<!-- /wp:group -->",
+	'content'       => "<!-- wp:group {\"align\":\"wide\"} -->\n<div class=\"wp-block-group alignwide\"><div class=\"wp-block-group__inner-container\"><!-- wp:heading {\"textAlign\":\"center\"} -->\n<h2 class=\"has-text-align-center\">Features</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph {\"align\":\"center\",\"fontSize\":\"medium\"} -->\n<p class=\"has-text-align-center has-medium-font-size\">Lorem ipsum dolor sit amet consectetur adipiscing</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:columns -->\n<div class=\"wp-block-columns\"><!-- wp:column -->\n<div class=\"wp-block-column\"><!-- wp:material/icon {\"iconSize\":\"48\",\"align\":\"center\"} -->\n<div class=\"wp-block-material-icon has-text-align-center\"><i class=\"material-icons md-48\">security</i></div>\n<!-- /wp:material/icon -->\n\n<!-- wp:heading {\"textAlign\":\"center\",\"level\":5} -->\n<h5 class=\"has-text-align-center\">Feature 1</h5>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph {\"align\":\"center\"} -->\n<p class=\"has-text-align-center\">Arcu fusce convallis quam pharetra suspendisse porta auctor, fames quis sollicitudin torquent tempus ullamcor.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:material/buttons {\"align\":\"center\"} -->\n<div class=\"wp-block-material-buttons aligncenter\"><!-- wp:material/button {\"iconPosition\":\"none\", \"style\":\"elevated\"} -->\n<div class=\"wp-block-material-button\" id=\"block-material-button-0\"><button class=\"mdc-button label-large mdc-button--elevated\"><div class=\"mdc-button__ripple\"></div><span class=\"mdc-button__label\">Call to action</span></button></div>\n<!-- /wp:material/button --></div>\n<!-- /wp:material/buttons -->\n\n<!-- wp:spacer {\"height\":30} -->\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"></div>\n<!-- /wp:spacer --></div>\n<!-- /wp:column -->\n\n<!-- wp:column -->\n<div class=\"wp-block-column\"><!-- wp:material/icon {\"iconSize\":\"48\",\"align\":\"center\"} -->\n<div class=\"wp-block-material-icon has-text-align-center\"><i class=\"material-icons md-48\">web</i></div>\n<!-- /wp:material/icon -->\n\n<!-- wp:heading {\"textAlign\":\"center\",\"level\":5} -->\n<h5 class=\"has-text-align-center\">Feature 2</h5>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph {\"align\":\"center\"} -->\n<p class=\"has-text-align-center\">Quis eros molestie libero porttitor convallis, integer sed ullamcorper nunc pharetra cras vitae nisl inceptos.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:material/buttons {\"align\":\"center\"} -->\n<div class=\"wp-block-material-buttons aligncenter\"><!-- wp:material/button {\"iconPosition\":\"none\",\"style\":\"elevated\"} -->\n<div class=\"wp-block-material-button\" id=\"block-material-button-1\"><button class=\"mdc-button label-large mdc-button--elevated\"><div class=\"mdc-button__ripple\"></div><span class=\"mdc-button__label\">Call to action</span></button></div>\n<!-- /wp:material/button --></div>\n<!-- /wp:material/buttons -->\n\n<!-- wp:spacer {\"height\":30} -->\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"></div>\n<!-- /wp:spacer --></div>\n<!-- /wp:column -->\n\n<!-- wp:column -->\n<div class=\"wp-block-column\"><!-- wp:material/icon {\"iconSize\":\"48\",\"align\":\"center\"} -->\n<div class=\"wp-block-material-icon has-text-align-center\"><i class=\"material-icons md-48\">offline_bolt</i></div>\n<!-- /wp:material/icon -->\n\n<!-- wp:heading {\"textAlign\":\"center\",\"level\":5} -->\n<h5 class=\"has-text-align-center\">Feature 3</h5>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph {\"align\":\"center\"} -->\n<p class=\"has-text-align-center\">Placerat aptent ullamcorper vestibulum netus magnis eros id mauris, curae rutrum inceptos eleifend.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:material/buttons {\"align\":\"center\"} -->\n<div class=\"wp-block-material-buttons aligncenter\"><!-- wp:material/button {\"iconPosition\":\"none\",\"style\":\"elevated\"} -->\n<div class=\"wp-block-material-button\" id=\"block-material-button-2\"><button class=\"mdc-button label-large mdc-button--elevated\"><div class=\"mdc-button__ripple\"></div><span class=\"mdc-button__label\">Call to Action</span></button></div>\n<!-- /wp:material/button --></div>\n<!-- /wp:material/buttons -->\n\n<!-- wp:spacer {\"height\":30} -->\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"></div>\n<!-- /wp:spacer --></div>\n<!-- /wp:column --></div>\n<!-- /wp:columns --></div></div>\n<!-- /wp:group -->",
 	'viewportWidth' => 800,
 	'categories'    => [ 'material', 'buttons', 'header' ],
 	'description'   => __( '3 features with icon + call to action', 'material-design' ),
diff --git a/plugin/php/block-patterns/call-to-action.php b/plugin/php/block-patterns/call-to-action.php
index 08b2e5eb6..a7a87b2f9 100644
--- a/plugin/php/block-patterns/call-to-action.php
+++ b/plugin/php/block-patterns/call-to-action.php
@@ -25,7 +25,7 @@
 
 return [
 	'title'         => __( 'Call to action(CTA)', 'material-design' ),
-	'content'       => "<!-- wp:group {\"align\":\"full\"} -->\n<div class=\"wp-block-group alignfull\"><!-- wp:heading {\"textAlign\":\"center\",\"align\":\"wide\"} -->\n<h2 class=\"alignwide has-text-align-center\">Call to action</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph {\"align\":\"center\"} -->\n<p class=\"has-text-align-center\">Perform this action in no time, satisfaction guaranteed.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:material/buttons {\"align\":\"center\"} -->\n<div class=\"wp-block-material-buttons aligncenter\"><!-- wp:material/button {\"iconPosition\":\"none\",\"size\":\"large\"} -->\n<div class=\"wp-block-material-button\" id=\"block-material-button-17\"><button class=\"mdc-button mdc-button--raised is-large\"><div class=\"mdc-button__ripple\"></div><span class=\"mdc-button__label\">Call to action</span></button></div>\n<!-- /wp:material/button --></div>\n<!-- /wp:material/buttons -->\n\n<!-- wp:spacer {\"height\":50} -->\n<div style=\"height:50px\" aria-hidden=\"true\" class=\"wp-block-spacer\"></div>\n<!-- /wp:spacer --></div>\n<!-- /wp:group -->",
+	'content'       => "<!-- wp:group {\"align\":\"full\"} -->\n<div class=\"wp-block-group alignfull\"><!-- wp:heading {\"textAlign\":\"center\",\"align\":\"wide\"} -->\n<h2 class=\"alignwide has-text-align-center\">Call to action</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph {\"align\":\"center\"} -->\n<p class=\"has-text-align-center\">Perform this action in no time, satisfaction guaranteed.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:material/buttons {\"align\":\"center\"} -->\n<div class=\"wp-block-material-buttons aligncenter\"><!-- wp:material/button {\"iconPosition\":\"none\",\"size\":\"large\",\"style\":\"elevated\"} -->\n<div class=\"wp-block-material-button\" id=\"block-material-button-17\"><button class=\"mdc-button label-large mdc-button--elevated is-large\"><div class=\"mdc-button__ripple\"></div><span class=\"mdc-button__label\">Call to action</span></button></div>\n<!-- /wp:material/button --></div>\n<!-- /wp:material/buttons -->\n\n<!-- wp:spacer {\"height\":50} -->\n<div style=\"height:50px\" aria-hidden=\"true\" class=\"wp-block-spacer\"></div>\n<!-- /wp:spacer --></div>\n<!-- /wp:group -->",
 	'viewportWidth' => 800,
 	'categories'    => [ 'material', 'buttons', 'header' ],
 	'description'   => __( 'Call to action pattern.', 'material-design' ),
diff --git a/plugin/php/block-patterns/contact-form.php b/plugin/php/block-patterns/contact-form.php
index 10d4bcd19..3c81bbb83 100644
--- a/plugin/php/block-patterns/contact-form.php
+++ b/plugin/php/block-patterns/contact-form.php
@@ -25,7 +25,7 @@
 
 return [
 	'title'         => __( 'Contact Form', 'material-design' ),
-	'content'       => "<!-- wp:heading {\"textAlign\":\"center\",\"level\":3} -->\n<h3 class=\"has-text-align-center\">Contact us</h3>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph {\"align\":\"center\"} -->\n<p class=\"has-text-align-center\">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:spacer {\"height\":8} -->\n<div style=\"height:8px\" aria-hidden=\"true\" class=\"wp-block-spacer\"></div>\n<!-- /wp:spacer -->\n\n<!-- wp:material/contact-form {\"emailTo\":\"test@example.com\"} -->\n<div class=\"wp-block-material-contact-form\"><!-- wp:material/name-input-field {\"id\":\"material-design-name-1\"} -->\n<div class=\"mdc-text-field-container\"><div class=\"mdc-text-field mdc-text-field--custom-full\"><span class=\"mdc-text-field__ripple\"></span><input id=\"material-design-name-1\" name=\"material-design-name-1\" type=\"text\" required class=\"mdc-text-field__input\" aria-labelledby=\"label-material-design-name-1\" data-form=\"contact\" data-meta=\"name\" data-label=\"Name\"/><div class=\"mdc-line-ripple\"></div><label for=\"material-design-name-1\" class=\"mdc-floating-label\" id=\"label-material-design-name-1\">Name</label></div></div>\n<!-- /wp:material/name-input-field -->\n\n<!-- wp:material/email-input-field {\"id\":\"material-design-email-3\"} -->\n<div class=\"mdc-text-field-container\"><div class=\"mdc-text-field mdc-text-field--custom-full\"><span class=\"mdc-text-field__ripple\"></span><input id=\"material-design-email-3\" name=\"material-design-email-3\" type=\"email\" required class=\"mdc-text-field__input\" aria-labelledby=\"label-material-design-email-3\" data-form=\"contact\" data-meta=\"email\" data-label=\"Email\"/><div class=\"mdc-line-ripple\"></div><label for=\"material-design-email-3\" class=\"mdc-floating-label\" id=\"label-material-design-email-3\">Email</label></div></div>\n<!-- /wp:material/email-input-field -->\n\n<!-- wp:material/message-input-field {\"id\":\"material-design-message-1\",\"outlined\":false} -->\n<div class=\"mdc-text-field-container\"><div class=\"mdc-text-field mdc-text-field--textarea mdc-text-field--custom-full\"><span class=\"mdc-text-field__ripple\"></span><textarea id=\"material-design-message-1\" name=\"material-design-message-1\" class=\"mdc-text-field__input\" rows=\"8\" aria-labelledby=\"label-material-design-message-1\" data-form=\"contact\" data-meta=\"message\" data-label=\"Message\" required></textarea><div class=\"mdc-line-ripple\"></div><label for=\"material-design-message-1\" class=\"mdc-floating-label\" id=\"label-material-design-message-1\">Message</label></div></div>\n<!-- /wp:material/message-input-field -->\n\n<!-- wp:material/button {\"style\":\"unelevated\",\"iconPosition\":\"none\",\"isSubmit\":true,\"size\":\"large\"} -->\n<div class=\"wp-block-material-button\" id=\"block-material-button-15\"><button class=\"mdc-button mdc-button--unelevated is-large\" type=\"submit\"><div class=\"mdc-button__ripple\"></div><span class=\"mdc-button__label\">Send Message</span></button></div>\n<!-- /wp:material/button --></div>\n<!-- /wp:material/contact-form -->",
+	'content'       => "<!-- wp:heading {\"textAlign\":\"center\",\"level\":3} -->\n<h3 class=\"has-text-align-center\">Contact us</h3>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph {\"align\":\"center\"} -->\n<p class=\"has-text-align-center\">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:spacer {\"height\":8} -->\n<div style=\"height:8px\" aria-hidden=\"true\" class=\"wp-block-spacer\"></div>\n<!-- /wp:spacer -->\n\n<!-- wp:material/contact-form {\"emailTo\":\"test@example.com\"} -->\n<div class=\"wp-block-material-contact-form\"><!-- wp:material/name-input-field {\"id\":\"material-design-name-1\"} -->\n<div class=\"mdc-text-field-container\"><div class=\"mdc-text-field mdc-text-field--custom-full\"><span class=\"mdc-text-field__ripple\"></span><input id=\"material-design-name-1\" name=\"material-design-name-1\" type=\"text\" required class=\"mdc-text-field__input\" aria-labelledby=\"label-material-design-name-1\" data-form=\"contact\" data-meta=\"name\" data-label=\"Name\"/><div class=\"mdc-line-ripple\"></div><label for=\"material-design-name-1\" class=\"mdc-floating-label\" id=\"label-material-design-name-1\">Name</label></div></div>\n<!-- /wp:material/name-input-field -->\n\n<!-- wp:material/email-input-field {\"id\":\"material-design-email-3\"} -->\n<div class=\"mdc-text-field-container\"><div class=\"mdc-text-field mdc-text-field--custom-full\"><span class=\"mdc-text-field__ripple\"></span><input id=\"material-design-email-3\" name=\"material-design-email-3\" type=\"email\" required class=\"mdc-text-field__input\" aria-labelledby=\"label-material-design-email-3\" data-form=\"contact\" data-meta=\"email\" data-label=\"Email\"/><div class=\"mdc-line-ripple\"></div><label for=\"material-design-email-3\" class=\"mdc-floating-label\" id=\"label-material-design-email-3\">Email</label></div></div>\n<!-- /wp:material/email-input-field -->\n\n<!-- wp:material/message-input-field {\"id\":\"material-design-message-1\",\"outlined\":false} -->\n<div class=\"mdc-text-field-container\"><div class=\"mdc-text-field mdc-text-field--textarea mdc-text-field--custom-full\"><span class=\"mdc-text-field__ripple\"></span><textarea id=\"material-design-message-1\" name=\"material-design-message-1\" class=\"mdc-text-field__input\" rows=\"8\" aria-labelledby=\"label-material-design-message-1\" data-form=\"contact\" data-meta=\"message\" data-label=\"Message\" required></textarea><div class=\"mdc-line-ripple\"></div><label for=\"material-design-message-1\" class=\"mdc-floating-label\" id=\"label-material-design-message-1\">Message</label></div></div>\n<!-- /wp:material/message-input-field -->\n\n<!-- wp:material/button {\"elevationStyle\":\"filled\",\"iconPosition\":\"none\",\"isSubmit\":true,\"size\":\"large\"} -->\n<div class=\"wp-block-material-button\" id=\"block-material-button-15\"><button class=\"mdc-button label-large mdc-button--filled is-large\" type=\"submit\"><div class=\"mdc-button__ripple\"></div><span class=\"mdc-button__label\">Send Message</span></button></div>\n<!-- /wp:material/button --></div>\n<!-- /wp:material/contact-form -->",
 	'viewportWidth' => 800,
 	'categories'    => [ 'material', 'buttons', 'header' ],
 	'description'   => __( 'Contact Form pattern.', 'material-design' ),
diff --git a/plugin/php/block-patterns/hero-section-image.php b/plugin/php/block-patterns/hero-section-image.php
index 2c5a2ddac..8ff95e045 100644
--- a/plugin/php/block-patterns/hero-section-image.php
+++ b/plugin/php/block-patterns/hero-section-image.php
@@ -29,7 +29,7 @@
 
 return [
 	'title'         => __( 'Hero section + Image', 'material-design' ),
-	'content'       => "<!-- wp:group {\"align\":\"wide\"} --><div class=\"wp-block-group alignwide\"><div class=\"wp-block-group__inner-container\"><!-- wp:columns {\"verticalAlignment\":\"center\",\"align\":\"wide\"} --><div class=\"wp-block-columns alignwide are-vertically-aligned-center\"><!-- wp:column {\"verticalAlignment\":\"center\"} --><div class=\"wp-block-column is-vertically-aligned-center\"><!-- wp:heading --><h2>Landing Page Hero Section</h2><!-- /wp:heading --><!-- wp:paragraph --><p>Imperdiet taciti nostra pulvinar bibendum congue varius sapien, diam curae pellentesque quam auctor praesent nullam convallis, tincidunt urna suscipit litora netus dictum.</p><!-- /wp:paragraph --><!-- wp:material/buttons --><div class=\"wp-block-material-buttons\"><!-- wp:material/button {\"iconPosition\":\"none\"} --><div class=\"wp-block-material-button\" id=\"block-material-button-51\"><button class=\"mdc-button mdc-button--raised\"><div class=\"mdc-button__ripple\"></div><span class=\"mdc-button__label\">Get Started</span></button></div><!-- /wp:material/button --></div><!-- /wp:material/buttons --></div><!-- /wp:column --><!-- wp:column {\"verticalAlignment\":\"center\"} --><div class=\"wp-block-column is-vertically-aligned-center\"><!-- wp:image {\"align\":\"full\",\"id\":127,\"sizeSlug\":\"medium\",\"linkDestination\":\"none\"} --><figure class=\"wp-block-image alignfull size-medium\"><img src=\"$image\" alt=\"\" class=\"wp-image-127\"/></figure><!-- /wp:image --></div><!-- /wp:column --></div><!-- /wp:columns --></div></div><!-- /wp:group -->",
+	'content'       => "<!-- wp:group {\"align\":\"wide\"} --><div class=\"wp-block-group alignwide\"><div class=\"wp-block-group__inner-container\"><!-- wp:columns {\"verticalAlignment\":\"center\",\"align\":\"wide\"} --><div class=\"wp-block-columns alignwide are-vertically-aligned-center\"><!-- wp:column {\"verticalAlignment\":\"center\"} --><div class=\"wp-block-column is-vertically-aligned-center\"><!-- wp:heading --><h2>Landing Page Hero Section</h2><!-- /wp:heading --><!-- wp:paragraph --><p>Imperdiet taciti nostra pulvinar bibendum congue varius sapien, diam curae pellentesque quam auctor praesent nullam convallis, tincidunt urna suscipit litora netus dictum.</p><!-- /wp:paragraph --><!-- wp:material/buttons --><div class=\"wp-block-material-buttons\"><!-- wp:material/button {\"iconPosition\":\"none\", \"style\":\"elevated\"} --><div class=\"wp-block-material-button\" id=\"block-material-button-51\"><button class=\"mdc-button label-large mdc-button--elevated\"><div class=\"mdc-button__ripple\"></div><span class=\"mdc-button__label\">Get Started</span></button></div><!-- /wp:material/button --></div><!-- /wp:material/buttons --></div><!-- /wp:column --><!-- wp:column {\"verticalAlignment\":\"center\"} --><div class=\"wp-block-column is-vertically-aligned-center\"><!-- wp:image {\"align\":\"full\",\"id\":127,\"sizeSlug\":\"medium\",\"linkDestination\":\"none\"} --><figure class=\"wp-block-image alignfull size-medium\"><img src=\"$image\" alt=\"\" class=\"wp-image-127\"/></figure><!-- /wp:image --></div><!-- /wp:column --></div><!-- /wp:columns --></div></div><!-- /wp:group -->",
 	'viewportWidth' => 800,
 	'categories'    => [ 'material', 'buttons', 'header', 'image' ],
 	'description'   => __( 'Hero section with image', 'material-design' ),
diff --git a/plugin/php/block-patterns/hero-section.php b/plugin/php/block-patterns/hero-section.php
index 5844e2a01..9de36b2c7 100644
--- a/plugin/php/block-patterns/hero-section.php
+++ b/plugin/php/block-patterns/hero-section.php
@@ -25,7 +25,7 @@
 
 return [
 	'title'         => __( 'Hero section', 'material-design' ),
-	'content'       => "<!-- wp:group {\"align\":\"wide\"} -->\n<div class=\"wp-block-group alignwide\"><div class=\"wp-block-group__inner-container\"><!-- wp:heading {\"textAlign\":\"center\",\"level\":1} -->\n<h1 class=\"has-text-align-center\">Enormous Heading</h1>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph {\"align\":\"center\",\"fontSize\":\"medium\"} -->\n<p class=\"has-text-align-center has-medium-font-size\">Consectetur adipiscing elit, egestas volutpat fames imperdiet natoque tempor, turpis convallis lectus nascetur primis eget. Lorem ipsum dolor sit amet consectetur adipiscing elit suspendisse purus praesent.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:material/buttons {\"align\":\"center\"} -->\n<div class=\"wp-block-material-buttons aligncenter\"><!-- wp:material/button {\"iconPosition\":\"none\",\"size\":\"large\"} -->\n<div class=\"wp-block-material-button\" id=\"block-material-button-20\"><button class=\"mdc-button mdc-button--raised is-large\"><div class=\"mdc-button__ripple\"></div><span class=\"mdc-button__label\">Call to action</span></button></div>\n<!-- /wp:material/button --></div>\n<!-- /wp:material/buttons --></div></div>\n<!-- /wp:group -->",
+	'content'       => "<!-- wp:group {\"align\":\"wide\"} -->\n<div class=\"wp-block-group alignwide\"><div class=\"wp-block-group__inner-container\"><!-- wp:heading {\"textAlign\":\"center\",\"level\":1} -->\n<h1 class=\"has-text-align-center\">Enormous Heading</h1>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph {\"align\":\"center\",\"fontSize\":\"medium\"} -->\n<p class=\"has-text-align-center has-medium-font-size\">Consectetur adipiscing elit, egestas volutpat fames imperdiet natoque tempor, turpis convallis lectus nascetur primis eget. Lorem ipsum dolor sit amet consectetur adipiscing elit suspendisse purus praesent.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:material/buttons {\"align\":\"center\"} -->\n<div class=\"wp-block-material-buttons aligncenter\"><!-- wp:material/button {\"iconPosition\":\"none\",\"size\":\"large\",\"style\":\"elevated\"} -->\n<div class=\"wp-block-material-button\" id=\"block-material-button-20\"><button class=\"mdc-button label-large mdc-button--elevated is-large\"><div class=\"mdc-button__ripple\"></div><span class=\"mdc-button__label\">Call to action</span></button></div>\n<!-- /wp:material/button --></div>\n<!-- /wp:material/buttons --></div></div>\n<!-- /wp:group -->",
 	'viewportWidth' => 800,
 	'categories'    => [ 'material', 'buttons', 'header' ],
 	'description'   => __( 'Hero section', 'material-design' ),
diff --git a/plugin/php/block-patterns/highlights.php b/plugin/php/block-patterns/highlights.php
index 2a9e9b71b..a60850a77 100644
--- a/plugin/php/block-patterns/highlights.php
+++ b/plugin/php/block-patterns/highlights.php
@@ -25,7 +25,7 @@
 
 return [
 	'title'         => __( 'Highlights', 'material-design' ),
-	'content'       => "<!-- wp:columns {\"align\":\"wide\"} -->\n<div class=\"wp-block-columns alignwide\"><!-- wp:column {\"verticalAlignment\":\"top\",\"width\":\"30%\"} -->\n<div class=\"wp-block-column is-vertically-aligned-top\" style=\"flex-basis:30%\"><!-- wp:heading {\"level\":3} -->\n<h3>Highlights</h3>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Amet consectetur adipiscing elit fermentum, quis bibendum pretium sociis eros per habitasse, tempus conubia commodo enim urna malesuada placerat.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:material/buttons -->\n<div class=\"wp-block-material-buttons\"><!-- wp:material/button {\"iconPosition\":\"none\",\"size\":\"large\"} -->\n<div class=\"wp-block-material-button\" id=\"block-material-button-0\"><button class=\"mdc-button mdc-button--raised is-large\"><div class=\"mdc-button__ripple\"></div><span class=\"mdc-button__label\">Get started</span></button></div>\n<!-- /wp:material/button --></div>\n<!-- /wp:material/buttons -->\n\n<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph --></div>\n<!-- /wp:column -->\n\n<!-- wp:column {\"width\":\"5%\"} -->\n<div class=\"wp-block-column\" style=\"flex-basis:5%\"></div>\n<!-- /wp:column -->\n\n<!-- wp:column -->\n<div class=\"wp-block-column\"><!-- wp:columns -->\n<div class=\"wp-block-columns\"><!-- wp:column -->\n<div class=\"wp-block-column\"><!-- wp:spacer {\"height\":40} -->\n<div style=\"height:40px\" aria-hidden=\"true\" class=\"wp-block-spacer\"></div>\n<!-- /wp:spacer -->\n\n<!-- wp:material/icon {\"iconSize\":\"48\"} -->\n<div class=\"wp-block-material-icon\"><i class=\"material-icons md-48\">lightbulb_outline</i></div>\n<!-- /wp:material/icon -->\n\n<!-- wp:heading {\"level\":5} -->\n<h5>List item</h5>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Dolor sit amet consectetur adipiscing elit ullamcorper, dictumst ultrices rutrum malesuada turpis pretium rhoncus vitae tempor.</p>\n<!-- /wp:paragraph --></div>\n<!-- /wp:column -->\n\n<!-- wp:column -->\n<div class=\"wp-block-column\"><!-- wp:spacer {\"height\":40} -->\n<div style=\"height:40px\" aria-hidden=\"true\" class=\"wp-block-spacer\"></div>\n<!-- /wp:spacer -->\n\n<!-- wp:material/icon {\"iconSize\":\"48\"} -->\n<div class=\"wp-block-material-icon\"><i class=\"material-icons md-48\">lightbulb_outline</i></div>\n<!-- /wp:material/icon -->\n\n<!-- wp:heading {\"level\":5} -->\n<h5>List item</h5>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Dolor sit amet consectetur adipiscing elit ullamcorper, dictumst ultrices rutrum malesuada turpis pretium rhoncus vitae tempor.</p>\n<!-- /wp:paragraph --></div>\n<!-- /wp:column --></div>\n<!-- /wp:columns -->\n\n<!-- wp:columns -->\n<div class=\"wp-block-columns\"><!-- wp:column -->\n<div class=\"wp-block-column\"><!-- wp:spacer {\"height\":40} -->\n<div style=\"height:40px\" aria-hidden=\"true\" class=\"wp-block-spacer\"></div>\n<!-- /wp:spacer -->\n\n<!-- wp:material/icon {\"iconSize\":\"48\"} -->\n<div class=\"wp-block-material-icon\"><i class=\"material-icons md-48\">spa</i></div>\n<!-- /wp:material/icon -->\n\n<!-- wp:heading {\"level\":5} -->\n<h5>List item</h5>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Dolor sit amet consectetur adipiscing elit ullamcorper, dictumst ultrices rutrum malesuada turpis pretium rhoncus vitae tempor.</p>\n<!-- /wp:paragraph --></div>\n<!-- /wp:column -->\n\n<!-- wp:column -->\n<div class=\"wp-block-column\"><!-- wp:spacer {\"height\":40} -->\n<div style=\"height:40px\" aria-hidden=\"true\" class=\"wp-block-spacer\"></div>\n<!-- /wp:spacer -->\n\n<!-- wp:material/icon {\"iconSize\":\"48\"} -->\n<div class=\"wp-block-material-icon\"><i class=\"material-icons md-48\">spa</i></div>\n<!-- /wp:material/icon -->\n\n<!-- wp:heading {\"level\":5} -->\n<h5>List item</h5>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Dolor sit amet consectetur adipiscing elit ullamcorper, dictumst ultrices rutrum malesuada turpis pretium rhoncus vitae tempor.</p>\n<!-- /wp:paragraph --></div>\n<!-- /wp:column --></div>\n<!-- /wp:columns --></div>\n<!-- /wp:column --></div>\n<!-- /wp:columns -->",
+	'content'       => "<!-- wp:columns {\"align\":\"wide\"} -->\n<div class=\"wp-block-columns alignwide\"><!-- wp:column {\"verticalAlignment\":\"top\",\"width\":\"30%\"} -->\n<div class=\"wp-block-column is-vertically-aligned-top\" style=\"flex-basis:30%\"><!-- wp:heading {\"level\":3} -->\n<h3>Highlights</h3>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Amet consectetur adipiscing elit fermentum, quis bibendum pretium sociis eros per habitasse, tempus conubia commodo enim urna malesuada placerat.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:material/buttons -->\n<div class=\"wp-block-material-buttons\"><!-- wp:material/button {\"iconPosition\":\"none\",\"size\":\"large\", \"style\":\"elevated\"} -->\n<div class=\"wp-block-material-button\" id=\"block-material-button-0\"><button class=\"mdc-button label-large mdc-button--elevated is-large\"><div class=\"mdc-button__ripple\"></div><span class=\"mdc-button__label\">Get started</span></button></div>\n<!-- /wp:material/button --></div>\n<!-- /wp:material/buttons -->\n\n<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph --></div>\n<!-- /wp:column -->\n\n<!-- wp:column {\"width\":\"5%\"} -->\n<div class=\"wp-block-column\" style=\"flex-basis:5%\"></div>\n<!-- /wp:column -->\n\n<!-- wp:column -->\n<div class=\"wp-block-column\"><!-- wp:columns -->\n<div class=\"wp-block-columns\"><!-- wp:column -->\n<div class=\"wp-block-column\"><!-- wp:spacer {\"height\":40} -->\n<div style=\"height:40px\" aria-hidden=\"true\" class=\"wp-block-spacer\"></div>\n<!-- /wp:spacer -->\n\n<!-- wp:material/icon {\"iconSize\":\"48\"} -->\n<div class=\"wp-block-material-icon\"><i class=\"material-icons md-48\">lightbulb_outline</i></div>\n<!-- /wp:material/icon -->\n\n<!-- wp:heading {\"level\":5} -->\n<h5>List item</h5>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Dolor sit amet consectetur adipiscing elit ullamcorper, dictumst ultrices rutrum malesuada turpis pretium rhoncus vitae tempor.</p>\n<!-- /wp:paragraph --></div>\n<!-- /wp:column -->\n\n<!-- wp:column -->\n<div class=\"wp-block-column\"><!-- wp:spacer {\"height\":40} -->\n<div style=\"height:40px\" aria-hidden=\"true\" class=\"wp-block-spacer\"></div>\n<!-- /wp:spacer -->\n\n<!-- wp:material/icon {\"iconSize\":\"48\"} -->\n<div class=\"wp-block-material-icon\"><i class=\"material-icons md-48\">lightbulb_outline</i></div>\n<!-- /wp:material/icon -->\n\n<!-- wp:heading {\"level\":5} -->\n<h5>List item</h5>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Dolor sit amet consectetur adipiscing elit ullamcorper, dictumst ultrices rutrum malesuada turpis pretium rhoncus vitae tempor.</p>\n<!-- /wp:paragraph --></div>\n<!-- /wp:column --></div>\n<!-- /wp:columns -->\n\n<!-- wp:columns -->\n<div class=\"wp-block-columns\"><!-- wp:column -->\n<div class=\"wp-block-column\"><!-- wp:spacer {\"height\":40} -->\n<div style=\"height:40px\" aria-hidden=\"true\" class=\"wp-block-spacer\"></div>\n<!-- /wp:spacer -->\n\n<!-- wp:material/icon {\"iconSize\":\"48\"} -->\n<div class=\"wp-block-material-icon\"><i class=\"material-icons md-48\">spa</i></div>\n<!-- /wp:material/icon -->\n\n<!-- wp:heading {\"level\":5} -->\n<h5>List item</h5>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Dolor sit amet consectetur adipiscing elit ullamcorper, dictumst ultrices rutrum malesuada turpis pretium rhoncus vitae tempor.</p>\n<!-- /wp:paragraph --></div>\n<!-- /wp:column -->\n\n<!-- wp:column -->\n<div class=\"wp-block-column\"><!-- wp:spacer {\"height\":40} -->\n<div style=\"height:40px\" aria-hidden=\"true\" class=\"wp-block-spacer\"></div>\n<!-- /wp:spacer -->\n\n<!-- wp:material/icon {\"iconSize\":\"48\"} -->\n<div class=\"wp-block-material-icon\"><i class=\"material-icons md-48\">spa</i></div>\n<!-- /wp:material/icon -->\n\n<!-- wp:heading {\"level\":5} -->\n<h5>List item</h5>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Dolor sit amet consectetur adipiscing elit ullamcorper, dictumst ultrices rutrum malesuada turpis pretium rhoncus vitae tempor.</p>\n<!-- /wp:paragraph --></div>\n<!-- /wp:column --></div>\n<!-- /wp:columns --></div>\n<!-- /wp:column --></div>\n<!-- /wp:columns -->",
 	'viewportWidth' => 800,
 	'categories'    => [ 'material', 'header' ],
 	'description'   => __( 'Highlights with list items with icons.', 'material-design' ),
diff --git a/plugin/php/block-patterns/latest-posts.php b/plugin/php/block-patterns/latest-posts.php
index e4c529c3f..7f04a9175 100644
--- a/plugin/php/block-patterns/latest-posts.php
+++ b/plugin/php/block-patterns/latest-posts.php
@@ -25,7 +25,7 @@
 
 return [
 	'title'         => __( 'Latest Posts', 'material-design' ),
-	'content'       => '<!-- wp:columns {"verticalAlignment":"center","align":"wide"} --><div class="wp-block-columns alignwide are-vertically-aligned-center"><!-- wp:column {"verticalAlignment":"center","width":"66.66%"} --><div class="wp-block-column is-vertically-aligned-center" style="flex-basis:66.66%"><!-- wp:heading {"level":4} --><h4>Latest Posts</h4><!-- /wp:heading --><!-- wp:paragraph --><p>Perform this action in no time. Satisfaction guaranteed</p><!-- /wp:paragraph --></div><!-- /wp:column --><!-- wp:column {"verticalAlignment":"center","width":"33.33%"} --><div class="wp-block-column is-vertically-aligned-center" style="flex-basis:33.33%"><!-- wp:material/buttons {"align":"right"} --><div class="wp-block-material-buttons alignright"><!-- wp:material/button {"iconPosition":"none","size":"large"} --><div class="wp-block-material-button" id="block-material-button-59"><button class="mdc-button mdc-button--raised is-large"><div class="mdc-button__ripple"></div><span class="mdc-button__label">Get Started</span></button></div><!-- /wp:material/button --></div><!-- /wp:material/buttons --></div><!-- /wp:column --></div><!-- /wp:columns --><!-- wp:material/recent-posts {"contentLayout":"text-under-media","postsToShow":3,"displayCommentsCount":false} /-->',
+	'content'       => '<!-- wp:columns {"verticalAlignment":"center","align":"wide"} --><div class="wp-block-columns alignwide are-vertically-aligned-center"><!-- wp:column {"verticalAlignment":"center","width":"66.66%"} --><div class="wp-block-column is-vertically-aligned-center" style="flex-basis:66.66%"><!-- wp:heading {"level":4} --><h4>Latest Posts</h4><!-- /wp:heading --><!-- wp:paragraph --><p>Perform this action in no time. Satisfaction guaranteed</p><!-- /wp:paragraph --></div><!-- /wp:column --><!-- wp:column {"verticalAlignment":"center","width":"33.33%"} --><div class="wp-block-column is-vertically-aligned-center" style="flex-basis:33.33%"><!-- wp:material/buttons {"align":"right"} --><div class="wp-block-material-buttons alignright"><!-- wp:material/button {"iconPosition":"none","size":"large","style":"elevated"} --><div class="wp-block-material-button" id="block-material-button-59"><button class="mdc-button label-large mdc-button--elevated is-large"><div class="mdc-button__ripple"></div><span class="mdc-button__label">Get Started</span></button></div><!-- /wp:material/button --></div><!-- /wp:material/buttons --></div><!-- /wp:column --></div><!-- /wp:columns --><!-- wp:material/recent-posts {"contentLayout":"text-under-media","postsToShow":3,"displayCommentsCount":false} /-->',
 	'viewportWidth' => 800,
 	'categories'    => [ 'material', 'buttons', 'header', 'text', 'columns' ],
 	'description'   => __( 'Call to action pattern.', 'material-design' ),
diff --git a/plugin/php/block-patterns/media-grid.php b/plugin/php/block-patterns/media-grid.php
index 89ebb0aaf..b05d2da21 100644
--- a/plugin/php/block-patterns/media-grid.php
+++ b/plugin/php/block-patterns/media-grid.php
@@ -29,7 +29,7 @@
 
 return [
 	'title'         => __( 'Media Grid', 'material-design' ),
-	'content'       => "<!-- wp:columns {\"align\":\"wide\"} -->\n<div class=\"wp-block-columns alignwide\"><!-- wp:column -->\n<div class=\"wp-block-column\"><!-- wp:image {\"className\":\"size-large\"} -->\n<figure class=\"wp-block-image size-large\"><img src=\"$image\" alt=\"\"/></figure>\n<!-- /wp:image --></div>\n<!-- /wp:column -->\n<!-- wp:column -->\n<div class=\"wp-block-column\"><!-- wp:heading {\"level\":3} -->\n<h3>Headline</h3>\n<!-- /wp:heading -->\n<!-- wp:paragraph -->\n<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec sapien nunc. Curabitur vestibulum leo vel neque consequat, a dictum nibh lacinia. Suspendisse sit amet enim velit. Suspendisse semper leo nibh, in venenatis orci blandit sagittis. </p>\n<!-- /wp:paragraph -->\n<!-- wp:material/buttons -->\n<div class=\"wp-block-material-buttons\"><!-- wp:material/button -->\n<div class=\"wp-block-material-button\" id=\"block-material-button-7\"><button class=\"mdc-button mdc-button--raised\"><i class=\"material-icons mdc-button__icon\">spa</i><div class=\"mdc-button__ripple\"></div><span class=\"mdc-button__label\">Call to action</span></button></div>\n<!-- /wp:material/button --></div>\n<!-- /wp:material/buttons --></div>\n<!-- /wp:column --></div>\n<!-- /wp:columns -->\n<!-- wp:columns {\"align\":\"wide\"} -->\n<div class=\"wp-block-columns alignwide\"><!-- wp:column -->\n<div class=\"wp-block-column\"><!-- wp:heading {\"level\":3} -->\n<h3>Headline</h3>\n<!-- /wp:heading -->\n<!-- wp:paragraph -->\n<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec sapien nunc. Curabitur vestibulum leo vel neque consequat, a dictum nibh lacinia. Suspendisse sit amet enim velit. Suspendisse semper leo nibh, in venenatis orci blandit sagittis. </p>\n<!-- /wp:paragraph -->\n<!-- wp:material/buttons -->\n<div class=\"wp-block-material-buttons\"><!-- wp:material/button -->\n<div class=\"wp-block-material-button\" id=\"block-material-button-7\"><button class=\"mdc-button mdc-button--raised\"><i class=\"material-icons mdc-button__icon\">spa</i><div class=\"mdc-button__ripple\"></div><span class=\"mdc-button__label\">Call to action</span></button></div>\n<!-- /wp:material/button --></div>\n<!-- /wp:material/buttons --></div>\n<!-- /wp:column -->\n<!-- wp:column -->\n<div class=\"wp-block-column\"><!-- wp:image {\"className\":\"size-large\"} -->\n<figure class=\"wp-block-image size-large\"><img src=\"$image\" alt=\"\"/></figure>\n<!-- /wp:image --></div>\n<!-- /wp:column --></div>\n<!-- /wp:columns -->",
+	'content'       => "<!-- wp:columns {\"align\":\"wide\"} -->\n<div class=\"wp-block-columns alignwide\"><!-- wp:column -->\n<div class=\"wp-block-column\"><!-- wp:image {\"className\":\"size-large\"} -->\n<figure class=\"wp-block-image size-large\"><img src=\"$image\" alt=\"\"/></figure>\n<!-- /wp:image --></div>\n<!-- /wp:column -->\n<!-- wp:column -->\n<div class=\"wp-block-column\"><!-- wp:heading {\"level\":3} -->\n<h3>Headline</h3>\n<!-- /wp:heading -->\n<!-- wp:paragraph -->\n<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec sapien nunc. Curabitur vestibulum leo vel neque consequat, a dictum nibh lacinia. Suspendisse sit amet enim velit. Suspendisse semper leo nibh, in venenatis orci blandit sagittis. </p>\n<!-- /wp:paragraph -->\n<!-- wp:material/buttons -->\n<div class=\"wp-block-material-buttons\"><!-- wp:material/button {\"style\":\"elevated\"} -->\n<div class=\"wp-block-material-button\" id=\"block-material-button-7\"><button class=\"mdc-button label-large mdc-button--elevated\"><i class=\"material-icons mdc-button__icon\">spa</i><div class=\"mdc-button__ripple\"></div><span class=\"mdc-button__label\">Call to action</span></button></div>\n<!-- /wp:material/button --></div>\n<!-- /wp:material/buttons --></div>\n<!-- /wp:column --></div>\n<!-- /wp:columns -->\n<!-- wp:columns {\"align\":\"wide\"} -->\n<div class=\"wp-block-columns alignwide\"><!-- wp:column -->\n<div class=\"wp-block-column\"><!-- wp:heading {\"level\":3} -->\n<h3>Headline</h3>\n<!-- /wp:heading -->\n<!-- wp:paragraph -->\n<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec sapien nunc. Curabitur vestibulum leo vel neque consequat, a dictum nibh lacinia. Suspendisse sit amet enim velit. Suspendisse semper leo nibh, in venenatis orci blandit sagittis. </p>\n<!-- /wp:paragraph -->\n<!-- wp:material/buttons -->\n<div class=\"wp-block-material-buttons\"><!-- wp:material/button {\"style\":\"elevated\"} -->\n<div class=\"wp-block-material-button\" id=\"block-material-button-7\"><button class=\"mdc-button label-large mdc-button--elevated\"><i class=\"material-icons mdc-button__icon\">spa</i><div class=\"mdc-button__ripple\"></div><span class=\"mdc-button__label\">Call to action</span></button></div>\n<!-- /wp:material/button --></div>\n<!-- /wp:material/buttons --></div>\n<!-- /wp:column -->\n<!-- wp:column -->\n<div class=\"wp-block-column\"><!-- wp:image {\"className\":\"size-large\"} -->\n<figure class=\"wp-block-image size-large\"><img src=\"$image\" alt=\"\"/></figure>\n<!-- /wp:image --></div>\n<!-- /wp:column --></div>\n<!-- /wp:columns -->",
 	'viewportWidth' => 800,
 	'categories'    => [ 'material' ],
 	'description'   => __( 'Media grid pattern.', 'material-design' ),
diff --git a/plugin/php/block-patterns/numbers.php b/plugin/php/block-patterns/numbers.php
index bb1ebaf66..ed3c755cd 100644
--- a/plugin/php/block-patterns/numbers.php
+++ b/plugin/php/block-patterns/numbers.php
@@ -25,7 +25,7 @@
 
 return [
 	'title'         => __( 'Numbers', 'material-design' ),
-	'content'       => "<!-- wp:group {\"align\":\"wide\"} -->\n<div class=\"wp-block-group alignwide\"><div class=\"wp-block-group__inner-container\"><!-- wp:heading {\"textAlign\":\"center\"} -->\n<h2 class=\"has-text-align-center\">Numbers</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph {\"align\":\"center\",\"style\":{\"typography\":{\"fontSize\":24}}} -->\n<p class=\"has-text-align-center\" style=\"font-size:24px\">Some count that matters</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:columns -->\n<div class=\"wp-block-columns\"><!-- wp:column {\"verticalAlignment\":\"center\"} -->\n<div class=\"wp-block-column is-vertically-aligned-center\"><!-- wp:material/icon {\"iconSize\":\"36\",\"align\":\"center\"} -->\n<div class=\"wp-block-material-icon has-text-align-center\"><i class=\"material-icons md-36\">thumb_up_off_alt</i></div>\n<!-- /wp:material/icon -->\n\n<!-- wp:heading {\"textAlign\":\"center\",\"level\":3} -->\n<h3 class=\"has-text-align-center\">10k+</h3>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph {\"align\":\"center\"} -->\n<p class=\"has-text-align-center\">Sit amet consectetur adipiscing elit dui, diam nam facilisis</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:spacer {\"height\":30} -->\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"></div>\n<!-- /wp:spacer --></div>\n<!-- /wp:column -->\n\n<!-- wp:column {\"verticalAlignment\":\"center\"} -->\n<div class=\"wp-block-column is-vertically-aligned-center\"><!-- wp:material/icon {\"iconSize\":\"36\",\"align\":\"center\"} -->\n<div class=\"wp-block-material-icon has-text-align-center\"><i class=\"material-icons md-36\">monetization_on</i></div>\n<!-- /wp:material/icon -->\n\n<!-- wp:heading {\"textAlign\":\"center\",\"level\":3} -->\n<h3 class=\"has-text-align-center\">200%</h3>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph {\"align\":\"center\"} -->\n<p class=\"has-text-align-center\">Sit amet consectetur adipiscing elit dui, diam nam facilisis</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:spacer {\"height\":30} -->\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"></div>\n<!-- /wp:spacer --></div>\n<!-- /wp:column -->\n\n<!-- wp:column {\"verticalAlignment\":\"center\"} -->\n<div class=\"wp-block-column is-vertically-aligned-center\"><!-- wp:material/icon {\"iconSize\":\"36\",\"align\":\"center\"} -->\n<div class=\"wp-block-material-icon has-text-align-center\"><i class=\"material-icons md-36\">file_download</i></div>\n<!-- /wp:material/icon -->\n\n<!-- wp:heading {\"textAlign\":\"center\",\"level\":3} -->\n<h3 class=\"has-text-align-center\">2.5M</h3>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph {\"align\":\"center\"} -->\n<p class=\"has-text-align-center\">Sit amet consectetur adipiscing elit dui, diam nam facilisis</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:spacer {\"height\":30} -->\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"></div>\n<!-- /wp:spacer --></div>\n<!-- /wp:column --></div>\n<!-- /wp:columns -->\n\n<!-- wp:material/buttons {\"align\":\"center\"} -->\n<div class=\"wp-block-material-buttons aligncenter\"><!-- wp:material/button {\"iconPosition\":\"none\",\"size\":\"large\"} -->\n<div class=\"wp-block-material-button\" id=\"block-material-button-2\"><button class=\"mdc-button mdc-button--raised is-large\"><div class=\"mdc-button__ripple\"></div><span class=\"mdc-button__label\">GET STARTED</span></button></div>\n<!-- /wp:material/button --></div>\n<!-- /wp:material/buttons --></div></div>\n<!-- /wp:group -->", // phpcs:ignore WordPressVIPMinimum.Security.Mustache.OutputNotation
+	'content'       => "<!-- wp:group {\"align\":\"wide\"} -->\n<div class=\"wp-block-group alignwide\"><div class=\"wp-block-group__inner-container\"><!-- wp:heading {\"textAlign\":\"center\"} -->\n<h2 class=\"has-text-align-center\">Numbers</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph {\"align\":\"center\",\"style\":{\"typography\":{\"fontSize\":24}}} -->\n<p class=\"has-text-align-center\" style=\"font-size:24px\">Some count that matters</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:columns -->\n<div class=\"wp-block-columns\"><!-- wp:column {\"verticalAlignment\":\"center\"} -->\n<div class=\"wp-block-column is-vertically-aligned-center\"><!-- wp:material/icon {\"iconSize\":\"36\",\"align\":\"center\"} -->\n<div class=\"wp-block-material-icon has-text-align-center\"><i class=\"material-icons md-36\">thumb_up_off_alt</i></div>\n<!-- /wp:material/icon -->\n\n<!-- wp:heading {\"textAlign\":\"center\",\"level\":3} -->\n<h3 class=\"has-text-align-center\">10k+</h3>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph {\"align\":\"center\"} -->\n<p class=\"has-text-align-center\">Sit amet consectetur adipiscing elit dui, diam nam facilisis</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:spacer {\"height\":30} -->\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"></div>\n<!-- /wp:spacer --></div>\n<!-- /wp:column -->\n\n<!-- wp:column {\"verticalAlignment\":\"center\"} -->\n<div class=\"wp-block-column is-vertically-aligned-center\"><!-- wp:material/icon {\"iconSize\":\"36\",\"align\":\"center\"} -->\n<div class=\"wp-block-material-icon has-text-align-center\"><i class=\"material-icons md-36\">monetization_on</i></div>\n<!-- /wp:material/icon -->\n\n<!-- wp:heading {\"textAlign\":\"center\",\"level\":3} -->\n<h3 class=\"has-text-align-center\">200%</h3>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph {\"align\":\"center\"} -->\n<p class=\"has-text-align-center\">Sit amet consectetur adipiscing elit dui, diam nam facilisis</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:spacer {\"height\":30} -->\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"></div>\n<!-- /wp:spacer --></div>\n<!-- /wp:column -->\n\n<!-- wp:column {\"verticalAlignment\":\"center\"} -->\n<div class=\"wp-block-column is-vertically-aligned-center\"><!-- wp:material/icon {\"iconSize\":\"36\",\"align\":\"center\"} -->\n<div class=\"wp-block-material-icon has-text-align-center\"><i class=\"material-icons md-36\">file_download</i></div>\n<!-- /wp:material/icon -->\n\n<!-- wp:heading {\"textAlign\":\"center\",\"level\":3} -->\n<h3 class=\"has-text-align-center\">2.5M</h3>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph {\"align\":\"center\"} -->\n<p class=\"has-text-align-center\">Sit amet consectetur adipiscing elit dui, diam nam facilisis</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:spacer {\"height\":30} -->\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"></div>\n<!-- /wp:spacer --></div>\n<!-- /wp:column --></div>\n<!-- /wp:columns -->\n\n<!-- wp:material/buttons {\"align\":\"center\"} -->\n<div class=\"wp-block-material-buttons aligncenter\"><!-- wp:material/button {\"iconPosition\":\"none\",\"size\":\"large\",\"style\":\"elevated\"} -->\n<div class=\"wp-block-material-button\" id=\"block-material-button-2\"><button class=\"mdc-button label-large mdc-button--elevated is-large\"><div class=\"mdc-button__ripple\"></div><span class=\"mdc-button__label\">GET STARTED</span></button></div>\n<!-- /wp:material/button --></div>\n<!-- /wp:material/buttons --></div></div>\n<!-- /wp:group -->", // phpcs:ignore WordPressVIPMinimum.Security.Mustache.OutputNotation
 	'viewportWidth' => 800,
 	'categories'    => [ 'material', 'buttons', 'header' ],
 	'description'   => __( 'Numbers with icons for statistic', 'material-design' ),
diff --git a/plugin/php/block-patterns/pricing.php b/plugin/php/block-patterns/pricing.php
index 1618bf544..d5e4bdd83 100644
--- a/plugin/php/block-patterns/pricing.php
+++ b/plugin/php/block-patterns/pricing.php
@@ -25,7 +25,7 @@
 
 return [
 	'title'         => __( 'Pricing', 'material-design' ),
-	'content'       => "<!-- wp:group -->\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container\"><!-- wp:heading {\"textAlign\":\"center\",\"level\":4} -->\n<h4 class=\"has-text-align-center\">Pricing</h4>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph {\"align\":\"center\"} -->\n<p class=\"has-text-align-center\">Perform this action in no time, Satisfaction guaranteed.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:columns -->\n<div class=\"wp-block-columns\"><!-- wp:column {\"width\":\"\"} -->\n<div class=\"wp-block-column\"><!-- wp:heading {\"textAlign\":\"center\",\"level\":5} -->\n<h5 class=\"has-text-align-center\">Price title</h5>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph {\"align\":\"center\"} -->\n<p class=\"has-text-align-center\">Price Subtitle Description.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph {\"align\":\"center\",\"style\":{\"color\":{\"background\":\"#f0f0f0\"},\"typography\":{\"fontSize\":26}}} -->\n<p class=\"has-text-align-center has-background\" style=\"background-color:#f0f0f0;font-size:26px\">$ 9.99 / mo</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph {\"align\":\"center\"} -->\n<p class=\"has-text-align-center\">First feature included<br>Second feature included<br>Third feature included<br>Fourth feature included<br>Fifth feature included</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:material/buttons {\"align\":\"center\"} -->\n<div class=\"wp-block-material-buttons aligncenter\"><!-- wp:material/button {\"iconPosition\":\"none\"} -->\n<div class=\"wp-block-material-button\" id=\"block-material-button-0\"><button class=\"mdc-button mdc-button--raised\"><div class=\"mdc-button__ripple\"></div><span class=\"mdc-button__label\">Buy now</span></button></div>\n<!-- /wp:material/button --></div>\n<!-- /wp:material/buttons --></div>\n<!-- /wp:column -->\n\n<!-- wp:column -->\n<div class=\"wp-block-column\"><!-- wp:heading {\"textAlign\":\"center\",\"level\":5} -->\n<h5 class=\"has-text-align-center\">Price title</h5>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph {\"align\":\"center\"} -->\n<p class=\"has-text-align-center\">Price Subtitle Description.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph {\"align\":\"center\",\"style\":{\"typography\":{\"fontSize\":26},\"color\":{\"background\":\"#f0f0f0\"}}} -->\n<p class=\"has-text-align-center has-background\" style=\"background-color:#f0f0f0;font-size:26px\">$ 9.99 / mo</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph {\"align\":\"center\"} -->\n<p class=\"has-text-align-center\">First feature included<br>Second feature included<br>Third feature included<br>Fourth feature included<br>Fifth feature included</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:material/buttons {\"align\":\"center\"} -->\n<div class=\"wp-block-material-buttons aligncenter\"><!-- wp:material/button {\"iconPosition\":\"none\"} -->\n<div class=\"wp-block-material-button\" id=\"block-material-button-0\"><button class=\"mdc-button mdc-button--raised\"><div class=\"mdc-button__ripple\"></div><span class=\"mdc-button__label\">Buy now</span></button></div>\n<!-- /wp:material/button --></div>\n<!-- /wp:material/buttons --></div>\n<!-- /wp:column --></div>\n<!-- /wp:columns --></div></div>\n<!-- /wp:group -->", // phpcs:ignore WordPressVIPMinimum.Security.Mustache.OutputNotation
+	'content'       => "<!-- wp:group -->\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container\"><!-- wp:heading {\"textAlign\":\"center\",\"level\":4} -->\n<h4 class=\"has-text-align-center\">Pricing</h4>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph {\"align\":\"center\"} -->\n<p class=\"has-text-align-center\">Perform this action in no time, Satisfaction guaranteed.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:columns -->\n<div class=\"wp-block-columns\"><!-- wp:column {\"width\":\"\"} -->\n<div class=\"wp-block-column\"><!-- wp:heading {\"textAlign\":\"center\",\"level\":5} -->\n<h5 class=\"has-text-align-center\">Price title</h5>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph {\"align\":\"center\"} -->\n<p class=\"has-text-align-center\">Price Subtitle Description.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph {\"align\":\"center\",\"style\":{\"color\":{\"background\":\"#f0f0f0\"},\"typography\":{\"fontSize\":26}}} -->\n<p class=\"has-text-align-center has-background\" style=\"background-color:#f0f0f0;font-size:26px\">$ 9.99 / mo</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph {\"align\":\"center\"} -->\n<p class=\"has-text-align-center\">First feature included<br>Second feature included<br>Third feature included<br>Fourth feature included<br>Fifth feature included</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:material/buttons {\"align\":\"center\"} -->\n<div class=\"wp-block-material-buttons aligncenter\"><!-- wp:material/button {\"iconPosition\":\"none\", \"style\":\"elevated\"} -->\n<div class=\"wp-block-material-button\" id=\"block-material-button-0\"><button class=\"mdc-button label-large mdc-button--elevated\"><div class=\"mdc-button__ripple\"></div><span class=\"mdc-button__label\">Buy now</span></button></div>\n<!-- /wp:material/button --></div>\n<!-- /wp:material/buttons --></div>\n<!-- /wp:column -->\n\n<!-- wp:column -->\n<div class=\"wp-block-column\"><!-- wp:heading {\"textAlign\":\"center\",\"level\":5} -->\n<h5 class=\"has-text-align-center\">Price title</h5>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph {\"align\":\"center\"} -->\n<p class=\"has-text-align-center\">Price Subtitle Description.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph {\"align\":\"center\",\"style\":{\"typography\":{\"fontSize\":26},\"color\":{\"background\":\"#f0f0f0\"}}} -->\n<p class=\"has-text-align-center has-background\" style=\"background-color:#f0f0f0;font-size:26px\">$ 9.99 / mo</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:paragraph {\"align\":\"center\"} -->\n<p class=\"has-text-align-center\">First feature included<br>Second feature included<br>Third feature included<br>Fourth feature included<br>Fifth feature included</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:material/buttons {\"align\":\"center\"} -->\n<div class=\"wp-block-material-buttons aligncenter\"><!-- wp:material/button {\"iconPosition\":\"none\", \"style\":\"elevated\"} -->\n<div class=\"wp-block-material-button\" id=\"block-material-button-0\"><button class=\"mdc-button label-large mdc-button--elevated\"><div class=\"mdc-button__ripple\"></div><span class=\"mdc-button__label\">Buy now</span></button></div>\n<!-- /wp:material/button --></div>\n<!-- /wp:material/buttons --></div>\n<!-- /wp:column --></div>\n<!-- /wp:columns --></div></div>\n<!-- /wp:group -->", // phpcs:ignore WordPressVIPMinimum.Security.Mustache.OutputNotation
 	'viewportWidth' => 800,
 	'categories'    => [ 'material' ],
 	'description'   => __( 'Pricing pattern with 2 product description.', 'material-design' ),
diff --git a/plugin/php/block-patterns/single-feature-extended.php b/plugin/php/block-patterns/single-feature-extended.php
index 39934f071..c40ea3740 100644
--- a/plugin/php/block-patterns/single-feature-extended.php
+++ b/plugin/php/block-patterns/single-feature-extended.php
@@ -29,7 +29,7 @@
 
 return [
 	'title'         => __( 'Single Feature Extended', 'material-design' ),
-	'content'       => "<!-- wp:columns {\"align\":\"wide\"} -->\n<div class=\"wp-block-columns alignwide\"><!-- wp:column -->\n<div class=\"wp-block-column\"><!-- wp:material/image-list {\"ids\":[],\"style\":\"grid\",\"columns\":{\"desktop\":2,\"tablet\":3,\"mobile\":1}} -->\n<div class=\"wp-block-material-image-list\" id=\"block-material-image-list-1\"><ul class=\"mdc-image-list mdc-image-list--with-text-protection\"><li class=\"mdc-image-list__item\"><a class=\"mdc-image-list__item-wrap\" href=\"$image\"><div class=\"mdc-image-list__image-aspect-container\"><img class=\"mdc-image-list__image\" alt=\"\" src=\"$image\" data-link=\"$image\"/></div></a></li><li class=\"mdc-image-list__item\"><a class=\"mdc-image-list__item-wrap\" href=\"$image\"><div class=\"mdc-image-list__image-aspect-container\"><img class=\"mdc-image-list__image\" alt=\"\" src=\"$image\" data-link=\"$image\"/></div></a></li><li class=\"mdc-image-list__item\"><a class=\"mdc-image-list__item-wrap\" href=\"$image\"><div class=\"mdc-image-list__image-aspect-container\"><img class=\"mdc-image-list__image\" alt=\"\" src=\"$image\" data-link=\"$image\"/></div></a></li><li class=\"mdc-image-list__item\"><a class=\"mdc-image-list__item-wrap\" href=\"$image\"><div class=\"mdc-image-list__image-aspect-container\"><img class=\"mdc-image-list__image\" alt=\"\" src=\"$image\" data-link=\"$image\"/></div></a></li></ul></div>\n<!-- /wp:material/image-list --></div>\n<!-- /wp:column -->\n<!-- wp:column -->\n<div class=\"wp-block-column\"><!-- wp:heading {\"level\":3} -->\n<h3>Headline</h3>\n<!-- /wp:heading -->\n<!-- wp:paragraph -->\n<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec sapien nunc. Curabitur vestibulum leo vel neque consequat, a dictum nibh lacinia. Suspendisse sit amet enim velit. Suspendisse semper leo nibh, in venenatis orci blandit sagittis. </p>\n<!-- /wp:paragraph -->\n<!-- wp:material/list {\"style\":\"two-line\"} -->\n<div class=\"wp-block-material-list\"><ul class=\"mdc-list mdc-list--two-line\"><li class=\"mdc-list-item\"><span class=\"mdc-list-item__graphic material-icons\">spa</span><span class=\"mdc-list-item__text\"><span class=\"mdc-list-item__primary-text\">Headline</span><span class=\"mdc-list-item__secondary-text\">One line description</span></span></li><li class=\"mdc-list-item\"><span class=\"mdc-list-item__graphic material-icons\">spa</span><span class=\"mdc-list-item__text\"><span class=\"mdc-list-item__primary-text\">Headline</span><span class=\"mdc-list-item__secondary-text\">One line description</span></span></li><li class=\"mdc-list-item\"><span class=\"mdc-list-item__graphic material-icons\">spa</span><span class=\"mdc-list-item__text\"><span class=\"mdc-list-item__primary-text\">Headline</span><span class=\"mdc-list-item__secondary-text\">One line description</span></span></li></ul></div>\n<!-- /wp:material/list -->\n<!-- wp:spacer {\"height\":24} -->\n<div style=\"height:24px\" aria-hidden=\"true\" class=\"wp-block-spacer\"></div>\n<!-- /wp:spacer -->\n<!-- wp:material/buttons -->\n<div class=\"wp-block-material-buttons\"><!-- wp:material/button -->\n<div class=\"wp-block-material-button\" id=\"block-material-button-7\"><button class=\"mdc-button mdc-button--raised\"><i class=\"material-icons mdc-button__icon\">spa</i><div class=\"mdc-button__ripple\"></div><span class=\"mdc-button__label\">Call to action</span></button></div>\n<!-- /wp:material/button --></div>\n<!-- /wp:material/buttons --></div>\n<!-- /wp:column --></div>\n<!-- /wp:columns -->",
+	'content'       => "<!-- wp:columns {\"align\":\"wide\"} -->\n<div class=\"wp-block-columns alignwide\"><!-- wp:column -->\n<div class=\"wp-block-column\"><!-- wp:material/image-list {\"ids\":[],\"style\":\"grid\",\"columns\":{\"desktop\":2,\"tablet\":3,\"mobile\":1}} -->\n<div class=\"wp-block-material-image-list\" id=\"block-material-image-list-1\"><ul class=\"mdc-image-list mdc-image-list--with-text-protection\"><li class=\"mdc-image-list__item\"><a class=\"mdc-image-list__item-wrap\" href=\"$image\"><div class=\"mdc-image-list__image-aspect-container\"><img class=\"mdc-image-list__image\" alt=\"\" src=\"$image\" data-link=\"$image\"/></div></a></li><li class=\"mdc-image-list__item\"><a class=\"mdc-image-list__item-wrap\" href=\"$image\"><div class=\"mdc-image-list__image-aspect-container\"><img class=\"mdc-image-list__image\" alt=\"\" src=\"$image\" data-link=\"$image\"/></div></a></li><li class=\"mdc-image-list__item\"><a class=\"mdc-image-list__item-wrap\" href=\"$image\"><div class=\"mdc-image-list__image-aspect-container\"><img class=\"mdc-image-list__image\" alt=\"\" src=\"$image\" data-link=\"$image\"/></div></a></li><li class=\"mdc-image-list__item\"><a class=\"mdc-image-list__item-wrap\" href=\"$image\"><div class=\"mdc-image-list__image-aspect-container\"><img class=\"mdc-image-list__image\" alt=\"\" src=\"$image\" data-link=\"$image\"/></div></a></li></ul></div>\n<!-- /wp:material/image-list --></div>\n<!-- /wp:column -->\n<!-- wp:column -->\n<div class=\"wp-block-column\"><!-- wp:heading {\"level\":3} -->\n<h3>Headline</h3>\n<!-- /wp:heading -->\n<!-- wp:paragraph -->\n<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec sapien nunc. Curabitur vestibulum leo vel neque consequat, a dictum nibh lacinia. Suspendisse sit amet enim velit. Suspendisse semper leo nibh, in venenatis orci blandit sagittis. </p>\n<!-- /wp:paragraph -->\n<!-- wp:material/list {\"style\":\"two-line\"} -->\n<div class=\"wp-block-material-list\"><ul class=\"mdc-list mdc-list--two-line\"><li class=\"mdc-list-item\"><span class=\"mdc-list-item__graphic material-icons\">spa</span><span class=\"mdc-list-item__text\"><span class=\"mdc-list-item__primary-text\">Headline</span><span class=\"mdc-list-item__secondary-text\">One line description</span></span></li><li class=\"mdc-list-item\"><span class=\"mdc-list-item__graphic material-icons\">spa</span><span class=\"mdc-list-item__text\"><span class=\"mdc-list-item__primary-text\">Headline</span><span class=\"mdc-list-item__secondary-text\">One line description</span></span></li><li class=\"mdc-list-item\"><span class=\"mdc-list-item__graphic material-icons\">spa</span><span class=\"mdc-list-item__text\"><span class=\"mdc-list-item__primary-text\">Headline</span><span class=\"mdc-list-item__secondary-text\">One line description</span></span></li></ul></div>\n<!-- /wp:material/list -->\n<!-- wp:spacer {\"height\":24} -->\n<div style=\"height:24px\" aria-hidden=\"true\" class=\"wp-block-spacer\"></div>\n<!-- /wp:spacer -->\n<!-- wp:material/buttons -->\n<div class=\"wp-block-material-buttons\"><!-- wp:material/button {\"style\":\"elevated\"} -->\n<div class=\"wp-block-material-button\" id=\"block-material-button-7\"><button class=\"mdc-button label-large mdc-button--elevated\"><i class=\"material-icons mdc-button__icon\">spa</i><div class=\"mdc-button__ripple\"></div><span class=\"mdc-button__label\">Call to action</span></button></div>\n<!-- /wp:material/button --></div>\n<!-- /wp:material/buttons --></div>\n<!-- /wp:column --></div>\n<!-- /wp:columns -->",
 	'viewportWidth' => 800,
 	'categories'    => [ 'material' ],
 	'description'   => __( 'Single Feature Extended pattern.', 'material-design' ),
diff --git a/plugin/php/block-patterns/single-feature.php b/plugin/php/block-patterns/single-feature.php
index d8f95c7e8..8462bcd5e 100644
--- a/plugin/php/block-patterns/single-feature.php
+++ b/plugin/php/block-patterns/single-feature.php
@@ -29,7 +29,7 @@
 
 return [
 	'title'         => __( 'Single Feature', 'material-design' ),
-	'content'       => "<!-- wp:columns {\"align\":\"wide\"} -->\n<div class=\"wp-block-columns alignwide\"><!-- wp:column -->\n<div class=\"wp-block-column\"><!-- wp:image -->\n<figure class=\"wp-block-image size-large\"><img src=\"$image\" alt=\"\" /></figure>\n<!-- /wp:image --></div>\n<!-- /wp:column -->\n<!-- wp:column -->\n<div class=\"wp-block-column\"><!-- wp:heading {\"level\":3} -->\n<h3>Headline</h3>\n<!-- /wp:heading -->\n<!-- wp:paragraph -->\n<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec sapien nunc. Curabitur vestibulum leo vel neque consequat, a dictum nibh lacinia. Suspendisse sit amet enim velit. Suspendisse semper leo nibh, in venenatis orci blandit sagittis. </p>\n<!-- /wp:paragraph -->\n<!-- wp:material/buttons -->\n<div class=\"wp-block-material-buttons\"><!-- wp:material/button -->\n<div class=\"wp-block-material-button\" id=\"block-material-button-7\"><button class=\"mdc-button mdc-button--raised\"><i class=\"material-icons mdc-button__icon\">spa</i><div class=\"mdc-button__ripple\"></div><span class=\"mdc-button__label\">Call to action</span></button></div>\n<!-- /wp:material/button --></div>\n<!-- /wp:material/buttons --></div>\n<!-- /wp:column --></div>\n<!-- /wp:columns -->",
+	'content'       => "<!-- wp:columns {\"align\":\"wide\"} -->\n<div class=\"wp-block-columns alignwide\"><!-- wp:column -->\n<div class=\"wp-block-column\"><!-- wp:image -->\n<figure class=\"wp-block-image size-large\"><img src=\"$image\" alt=\"\" /></figure>\n<!-- /wp:image --></div>\n<!-- /wp:column -->\n<!-- wp:column -->\n<div class=\"wp-block-column\"><!-- wp:heading {\"level\":3} -->\n<h3>Headline</h3>\n<!-- /wp:heading -->\n<!-- wp:paragraph -->\n<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec sapien nunc. Curabitur vestibulum leo vel neque consequat, a dictum nibh lacinia. Suspendisse sit amet enim velit. Suspendisse semper leo nibh, in venenatis orci blandit sagittis. </p>\n<!-- /wp:paragraph -->\n<!-- wp:material/buttons -->\n<div class=\"wp-block-material-buttons\"><!-- wp:material/button {\"style\":\"elevated\"} -->\n<div class=\"wp-block-material-button\" id=\"block-material-button-7\"><button class=\"mdc-button label-large mdc-button--elevated\"><i class=\"material-icons mdc-button__icon\">spa</i><div class=\"mdc-button__ripple\"></div><span class=\"mdc-button__label\">Call to action</span></button></div>\n<!-- /wp:material/button --></div>\n<!-- /wp:material/buttons --></div>\n<!-- /wp:column --></div>\n<!-- /wp:columns -->",
 	'viewportWidth' => 800,
 	'categories'    => [ 'material' ],
 	'description'   => __( 'Single Feature pattern.', 'material-design' ),
diff --git a/plugin/tests/js/block-editor/blocks/button/__snapshots__/edit.test.js.snap b/plugin/tests/js/block-editor/blocks/button/__snapshots__/edit.test.js.snap
index 0c86ce8cb..7674a2188 100644
--- a/plugin/tests/js/block-editor/blocks/button/__snapshots__/edit.test.js.snap
+++ b/plugin/tests/js/block-editor/blocks/button/__snapshots__/edit.test.js.snap
@@ -31,7 +31,7 @@ Object {
     <div>
       <div>
         <div
-          class="mdc-button mdc-button--text"
+          class="mdc-button label-large mdc-button--text"
         >
           <div
             aria-label="Add text…"
@@ -221,7 +221,7 @@ Object {
                 class="btn-group__list__list-item__button"
                 type="button"
               >
-                Raised
+                Elevated
               </button>
             </li>
             <li
@@ -231,7 +231,17 @@ Object {
                 class="btn-group__list__list-item__button"
                 type="button"
               >
-                Unelevated
+                Filled
+              </button>
+            </li>
+            <li
+              class="btn-group__list__list-item"
+            >
+              <button
+                class="btn-group__list__list-item__button"
+                type="button"
+              >
+                Tonal
               </button>
             </li>
           </ul>
@@ -706,7 +716,7 @@ Object {
   "container": <div>
     <div>
       <div
-        class="mdc-button mdc-button--text"
+        class="mdc-button label-large mdc-button--text"
       >
         <div
           aria-label="Add text…"
@@ -896,7 +906,17 @@ Object {
               class="btn-group__list__list-item__button"
               type="button"
             >
-              Raised
+              Elevated
+            </button>
+          </li>
+          <li
+            class="btn-group__list__list-item"
+          >
+            <button
+              class="btn-group__list__list-item__button"
+              type="button"
+            >
+              Filled
             </button>
           </li>
           <li
@@ -906,7 +926,7 @@ Object {
               class="btn-group__list__list-item__button"
               type="button"
             >
-              Unelevated
+              Tonal
             </button>
           </li>
         </ul>
diff --git a/plugin/tests/js/block-editor/blocks/button/__snapshots__/save.test.js.snap b/plugin/tests/js/block-editor/blocks/button/__snapshots__/save.test.js.snap
index 3614b0821..e6746b8ac 100644
--- a/plugin/tests/js/block-editor/blocks/button/__snapshots__/save.test.js.snap
+++ b/plugin/tests/js/block-editor/blocks/button/__snapshots__/save.test.js.snap
@@ -7,9 +7,9 @@ Object {
     <div>
       <div>
         <a
-          class="mdc-button mdc-button--raised"
+          class="mdc-button mdc-button--undefined"
           href="https://google.com"
-          style="background-color: rgb(51, 51, 51); color: rgb(241, 241, 241); border-radius: 5px;"
+          style="color: rgb(241, 241, 241); border-radius: 5px;"
         >
           <div
             class="mdc-button__ripple"
@@ -24,9 +24,9 @@ Object {
   "container": <div>
     <div>
       <a
-        class="mdc-button mdc-button--raised"
+        class="mdc-button mdc-button--undefined"
         href="https://google.com"
-        style="background-color: rgb(51, 51, 51); color: rgb(241, 241, 241); border-radius: 5px;"
+        style="color: rgb(241, 241, 241); border-radius: 5px;"
       >
         <div
           class="mdc-button__ripple"
@@ -98,9 +98,9 @@ Object {
     <div>
       <div>
         <a
-          class="mdc-button mdc-button--raised"
+          class="mdc-button mdc-button--undefined"
           href="https://google.com"
-          style="background-color: rgb(51, 51, 51); color: rgb(241, 241, 241); border-radius: 5px;"
+          style="color: rgb(241, 241, 241); border-radius: 5px;"
         >
           <i
             class="material-icons mdc-button__icon"
@@ -120,9 +120,9 @@ Object {
   "container": <div>
     <div>
       <a
-        class="mdc-button mdc-button--raised"
+        class="mdc-button mdc-button--undefined"
         href="https://google.com"
-        style="background-color: rgb(51, 51, 51); color: rgb(241, 241, 241); border-radius: 5px;"
+        style="color: rgb(241, 241, 241); border-radius: 5px;"
       >
         <i
           class="material-icons mdc-button__icon"
@@ -199,9 +199,9 @@ Object {
     <div>
       <div>
         <a
-          class="mdc-button mdc-button--raised"
+          class="mdc-button mdc-button--undefined"
           href="https://google.com"
-          style="background-color: rgb(51, 51, 51); color: rgb(241, 241, 241); border-radius: 5px;"
+          style="color: rgb(241, 241, 241); border-radius: 5px;"
         >
           <div
             class="mdc-button__ripple"
@@ -221,9 +221,9 @@ Object {
   "container": <div>
     <div>
       <a
-        class="mdc-button mdc-button--raised"
+        class="mdc-button mdc-button--undefined"
         href="https://google.com"
-        style="background-color: rgb(51, 51, 51); color: rgb(241, 241, 241); border-radius: 5px;"
+        style="color: rgb(241, 241, 241); border-radius: 5px;"
       >
         <div
           class="mdc-button__ripple"
@@ -464,9 +464,9 @@ Object {
     <div>
       <div>
         <a
-          class="mdc-button mdc-button--raised is-large"
+          class="mdc-button mdc-button--undefined is-large"
           href="https://google.com"
-          style="background-color: rgb(51, 51, 51); color: rgb(241, 241, 241); border-radius: 5px;"
+          style="color: rgb(241, 241, 241); border-radius: 5px;"
         >
           <i
             class="material-icons mdc-button__icon"
@@ -486,9 +486,9 @@ Object {
   "container": <div>
     <div>
       <a
-        class="mdc-button mdc-button--raised is-large"
+        class="mdc-button mdc-button--undefined is-large"
         href="https://google.com"
-        style="background-color: rgb(51, 51, 51); color: rgb(241, 241, 241); border-radius: 5px;"
+        style="color: rgb(241, 241, 241); border-radius: 5px;"
       >
         <i
           class="material-icons mdc-button__icon"
@@ -565,7 +565,7 @@ Object {
     <div>
       <div>
         <button
-          class="mdc-button mdc-button--raised"
+          class="mdc-button label-large mdc-button--undefined"
         >
           <div
             class="mdc-button__ripple"
@@ -580,7 +580,7 @@ Object {
   "container": <div>
     <div>
       <button
-        class="mdc-button mdc-button--raised"
+        class="mdc-button label-large mdc-button--undefined"
       >
         <div
           class="mdc-button__ripple"
diff --git a/plugin/tests/js/block-editor/blocks/button/edit.test.js b/plugin/tests/js/block-editor/blocks/button/edit.test.js
index 4825d05bd..7ceddd6a5 100644
--- a/plugin/tests/js/block-editor/blocks/button/edit.test.js
+++ b/plugin/tests/js/block-editor/blocks/button/edit.test.js
@@ -69,7 +69,7 @@ jest.mock( '@wordpress/data', () => ( {
 } ) );
 
 const baseProps = {
-	attributes: { type: 'text', style: 'text' },
+	attributes: { type: 'text', elevationStyle: 'text' },
 	setAttributes: jest.fn(),
 };
 
@@ -122,7 +122,7 @@ describe( 'ButtonEdit', () => {
 
 	it( 'should display an text with outlined style', () => {
 		setup( {
-			attributes: { type: 'text', style: 'outlined' },
+			attributes: { type: 'text', elevationStyle: 'outlined' },
 			setAttributes: jest.fn(),
 		} );
 
@@ -135,36 +135,51 @@ describe( 'ButtonEdit', () => {
 		expect( screen.queryByText( 'Container Color' ) ).toBeNull();
 	} );
 
-	it( 'should display an text with raised style', () => {
+	it( 'should display an text with elevated style', () => {
 		setup( {
-			attributes: { type: 'text', style: 'raised' },
+			attributes: { type: 'text', elevationStyle: 'elevated' },
 			setAttributes: jest.fn(),
 		} );
 
 		const container = document.body;
 		const matches = container.querySelector(
-			'.mdc-button.mdc-button--raised'
+			'.mdc-button.mdc-button--elevated'
 		);
 
 		expect( matches ).toBeInTheDocument();
 		expect( screen.getByText( 'Container Color' ) ).toBeInTheDocument();
 	} );
 
-	it( 'should display an text with unelevated style', () => {
+	it( 'should display an text with filled style', () => {
 		setup( {
-			attributes: { type: 'text', style: 'unelevated' },
+			attributes: { type: 'text', elevationStyle: 'filled' },
 			setAttributes: jest.fn(),
 		} );
 
 		const container = document.body;
 		const matches = container.querySelector(
-			'.mdc-button.mdc-button--unelevated'
+			'.mdc-button.mdc-button--filled'
 		);
 
 		expect( matches ).toBeInTheDocument();
 		expect( screen.getByText( 'Container Color' ) ).toBeInTheDocument();
 	} );
 
+	it( 'should display an text with tonal style', () => {
+		setup( {
+			attributes: { type: 'text', elevationStyle: 'tonal' },
+			setAttributes: jest.fn(),
+		} );
+
+		const container = document.body;
+		const matches = container.querySelector(
+			'.mdc-button.mdc-button--tonal'
+		);
+
+		expect( matches ).toBeInTheDocument();
+		expect( screen.queryByText( 'Container Color' ) ).toBeNull();
+	} );
+
 	it( 'should display icon picker if icon position is set', () => {
 		setup( {
 			attributes: {