Merge branch 'develop' into fix/color-palette

Author: Mario Aguiar

plugin/assets/css/src/components/material.css

@@ -452,6 +452,15 @@
 	}
 }
 
+.wp-block-material-buttons,
+.wp-block-material-button {
+
+	& .mdc-button.is-large {
+		height: 50px;
+		padding: 16px 32px;
+	}
+}
+
 .mdc-layout-grid .material-design-card {
 	height: 100%;
 

plugin/assets/src/block-editor/blocks/button/block.json

@@ -71,6 +71,10 @@
     "isSubmit": {
       "type": "boolean",
       "default": false
+    },
+    "size": {
+      "type": "string",
+      "default": "normal"
     }
   }
 }

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

@@ -33,7 +33,12 @@ import { withSelect } from '@wordpress/data';
  * Internal dependencies
  */
 import './style.css';
-import { BUTTON_STYLES, ICON_POSITIONS, BUTTON_TYPES } from './options';
+import {
+	BUTTON_STYLES,
+	ICON_POSITIONS,
+	BUTTON_TYPES,
+	BUTTON_SIZE,
+} from './options';
 import { name as ButtonBlockName } from './index';
 import hasBg from './utils/has-bg';
 import { getConfig, getIconName } from '../../utils';
@@ -62,6 +67,7 @@ const MdcButton = ( {
 	iconPosition,
 	label,
 	setter,
+	size,
 } ) => {
 	icon = getIconName( icon );
 
@@ -87,6 +93,7 @@ const MdcButton = ( {
 			} }
 			className={ classNames( 'mdc-button', {
 				[ `mdc-button--${ style }` ]: true,
+				[ `is-large` ]: size === 'large',
 			} ) }
 		>
 			{ icon && ( iconPosition === 'leading' || type === 'icon' ) && (
@@ -126,6 +133,7 @@ const ButtonEdit = ( {
 		backgroundColor,
 		isSubmit,
 		tooltip,
+		size,
 	},
 	setAttributes,
 	isSelected,
@@ -194,6 +202,7 @@ const ButtonEdit = ( {
 						iconPosition,
 						label,
 						setter,
+						size,
 					} }
 				/>
 
@@ -219,6 +228,17 @@ const ButtonEdit = ( {
 						onChange={ switchType }
 					/>
 
+					{ type === 'text' && (
+						<>
+							<span>{ __( 'Size', 'material-design' ) }</span>
+							<ButtonGroup
+								buttons={ BUTTON_SIZE }
+								current={ size }
+								onClick={ setter( 'size' ) }
+							/>
+						</>
+					) }
+
 					{ type === 'text' && (
 						<>
 							<span>{ __( 'Variations', 'material-design' ) }</span>

plugin/assets/src/block-editor/blocks/button/options.js

@@ -70,3 +70,14 @@ export const ICON_POSITIONS = [
 		value: 'trailing',
 	},
 ];
+
+export const BUTTON_SIZE = [
+	{
+		label: __( 'Normal', 'material-design' ),
+		value: 'normal',
+	},
+	{
+		label: __( 'Large', 'material-design' ),
+		value: 'large',
+	},
+];

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

@@ -63,6 +63,7 @@ const ButtonSave = ( {
 		isSubmit,
 		tooltip,
 		id,
+		size,
 	},
 	className,
 } ) => {
@@ -129,6 +130,7 @@ const ButtonSave = ( {
 					} }
 					className={ classNames( 'mdc-button', {
 						[ `mdc-button--${ style }` ]: true,
+						[ `is-large` ]: size === 'large',
 					} ) }
 				>
 					<ButtonChildren
@@ -141,6 +143,7 @@ const ButtonSave = ( {
 				<button
 					className={ classNames( 'mdc-button', {
 						[ `mdc-button--${ style }` ]: true,
+						[ `is-large` ]: size === 'large',
 					} ) }
 					style={ {
 						...( backgroundColor && hasBg( style ) ? { backgroundColor } : {} ),

plugin/php/block-patterns/button.php

@@ -25,7 +25,7 @@
 
 return [
 	'title'         => __( 'Button', 'material-design' ),
-	'content'       => "<!-- wp:material/buttons -->\n<div class=\"wp-block-material-buttons\">\n<!-- wp:material/button -->\n<div class=\"wp-block-material-button\" id=\"block-material-button-5\"><button class=\"mdc-button mdc-button--raised\"><i class=\"material-icons mdc-button__icon\">drafts</i><div class=\"mdc-button__ripple\"></div><span class=\"mdc-button__label\">Call to Action</span></button></div>\n<!-- /wp:material/button -->\n</div><!-- /wp:material/buttons -->",
+	'content'       => "<!-- wp:material/buttons -->\n<div class=\"wp-block-material-buttons\"><!-- wp:material/button {\"size\":\"large\"} -->\n<div class=\"wp-block-material-button\" id=\"block-material-button-5\"><button class=\"mdc-button mdc-button--raised is-large\"><i class=\"material-icons mdc-button__icon\">drafts</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 -->",
 	'viewportWidth' => 800,
 	'categories'    => [ 'material', 'text' ],
 	'description'   => __( 'An example button block.', 'material-design' ),

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\"><div class=\"wp-block-group__inner-container\"></div></div>\n<!-- /wp:group -->\n<!-- wp:group {\"backgroundColor\":\"white\"} -->\n<div class=\"wp-block-group has-white-background-color has-background\"><div class=\"wp-block-group__inner-container\"><!-- wp:heading {\"textAlign\":\"center\",\"align\":\"wide\"} -->\n<h2 class=\"alignwide has-text-align-center\">Call to action</h2>\n<!-- /wp:heading -->\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<!-- 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-17\"><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<!-- wp:spacer {\"height\":16} -->\n<div style=\"height:16px\" aria-hidden=\"true\" class=\"wp-block-spacer\"></div>\n<!-- /wp:spacer -->\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<!-- 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<!-- 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></div>\n<!-- /wp:group -->",
+	'content'       => "<!-- wp:group {\"backgroundColor\":\"white\"} -->\n<div class=\"wp-block-group has-white-background-color has-background\"><div class=\"wp-block-group__inner-container\"><!-- 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></div>\n<!-- /wp:group -->",
 	'viewportWidth' => 800,
 	'categories'    => [ 'material', 'buttons', 'header' ],
 	'description'   => __( 'Call to action + benefits pattern.', 'material-design' ),

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\",\"backgroundColor\":\"white\"} -->\n<div class=\"wp-block-group alignfull has-white-background-color has-background\"><div class=\"wp-block-group__inner-container\"><!-- 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\"} -->\n<div class=\"wp-block-material-button\" id=\"block-material-button-17\"><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 --></div></div>\n<!-- /wp:group -->",
+	'content'       => "<!-- wp:group {\"align\":\"full\",\"backgroundColor\":\"white\"} -->\n<div class=\"wp-block-group alignfull has-white-background-color has-background\"><div class=\"wp-block-group__inner-container\"><!-- 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></div>\n<!-- /wp:group -->",
 	'viewportWidth' => 800,
 	'categories'    => [ 'material', 'buttons', 'header' ],
 	'description'   => __( 'Call to action pattern.', 'material-design' ),

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<!-- wp:paragraph {\"align\":\"center\"} -->\n<p class=\"has-text-align-center\">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>\n<!-- /wp:paragraph -->\n<!-- wp:spacer {\"height\":8} -->\n<div style=\"height:8px\" aria-hidden=\"true\" class=\"wp-block-spacer\"></div>\n<!-- /wp:spacer -->\n<!-- wp:material/contact-form {\"emailTo\":\"[email protected]\"} -->\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<!-- 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<!-- 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<!-- wp:material/button {\"style\":\"unelevated\",\"iconPosition\":\"none\",\"isSubmit\":true} -->\n<div class=\"wp-block-material-button\" id=\"block-material-button-15\"><button class=\"mdc-button mdc-button--unelevated\" 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 -->\n<!-- wp:paragraph -->\n<p></p>\n<!-- /wp:paragraph -->",
+	'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\":\"[email protected]\"} -->\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 -->",
 	'viewportWidth' => 800,
 	'categories'    => [ 'material', 'buttons', 'header' ],
 	'description'   => __( 'Contact Form pattern.', 'material-design' ),