From bb2874d0004b1bb4eb9f0ee4d319c2e24dc9a007 Mon Sep 17 00:00:00 2001 From: Mario Aguiar Date: Tue, 26 Jul 2022 10:02:52 -0500 Subject: [PATCH 01/27] Add basic outlined button --- plugin/assets/css/src/components/button.css | 40 +++++++++++++++++++ plugin/assets/css/src/components/card.css | 2 +- plugin/assets/css/src/material-components.css | 1 + 3 files changed, 42 insertions(+), 1 deletion(-) create mode 100644 plugin/assets/css/src/components/button.css diff --git a/plugin/assets/css/src/components/button.css b/plugin/assets/css/src/components/button.css new file mode 100644 index 00000000..5ab6c286 --- /dev/null +++ b/plugin/assets/css/src/components/button.css @@ -0,0 +1,40 @@ +/* + * 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; + display: flex; + justify-content: center; + letter-spacing: 0.1px; +} + +.mdc-button--raised { + background-color: var(--md-sys-color-surface); + color: var(--md-sys-color-on-surface); +} + +.mdc-button--outlined { + background: transparent; + border: 1px solid var(--md-sys-color-outline); + color: var(--md-sys-color-primary); + padding: 10px 24px; + + &:hover, + &:focus, + &:active { + background-color: rgba(var(--md-sys-color-primary-rgb), 0.08); + } +} diff --git a/plugin/assets/css/src/components/card.css b/plugin/assets/css/src/components/card.css index 5ceb478f..069bd5b6 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 c716326a..e8b54463 100644 --- a/plugin/assets/css/src/material-components.css +++ b/plugin/assets/css/src/material-components.css @@ -30,3 +30,4 @@ @import "components/image-card.css"; @import "./components/material.css"; @import "./components/datatable.css"; +@import "./components/button.css"; From f7a160bd63d889d8cca7f31ea2c66038da9dba13 Mon Sep 17 00:00:00 2001 From: Mario Aguiar Date: Tue, 26 Jul 2022 10:59:53 -0500 Subject: [PATCH 02/27] Add text styles --- plugin/assets/css/src/block-editor.css | 1 + plugin/assets/css/src/components/button.css | 42 +++++++++++++++++---- 2 files changed, 36 insertions(+), 7 deletions(-) diff --git a/plugin/assets/css/src/block-editor.css b/plugin/assets/css/src/block-editor.css index 4f435c4a..f0622a04 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 index 5ab6c286..d7c965de 100644 --- a/plugin/assets/css/src/components/button.css +++ b/plugin/assets/css/src/components/button.css @@ -19,22 +19,50 @@ display: flex; justify-content: center; letter-spacing: 0.1px; + padding: 0 24px; } .mdc-button--raised { - background-color: var(--md-sys-color-surface); - color: var(--md-sys-color-on-surface); + 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); + outline: thin dotted; + } } -.mdc-button--outlined { +.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); + 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); - padding: 10px 24px; - &:hover, + &:hover { + background-color: rgba(var(--md-sys-color-primary-rgb), 0.08); + } + &:focus, &:active { - background-color: rgba(var(--md-sys-color-primary-rgb), 0.08); + background-color: rgba(var(--md-sys-color-primary-rgb), 0.12); + outline: thin dotted; + } +} + +.mdc-button--text, +.mdc-button--text:not(:disabled) { + border: 0 !important; /* Use !important to override the default style of the button. */; + + &:hover { + background-color: transparent; } } From 00ca2a0ab19faca2146fa02ebb614fddca044d20 Mon Sep 17 00:00:00 2001 From: Mario Aguiar Date: Tue, 26 Jul 2022 12:20:40 -0500 Subject: [PATCH 03/27] Add migration file --- .../src/block-editor/blocks/button/block.json | 3 +- .../block-editor/blocks/button/deprecated.js | 24 ++ .../blocks/button/deprecated/m2/m2-version.js | 259 ++++++++++++++++++ .../src/block-editor/blocks/button/index.js | 1 + .../src/block-editor/blocks/button/options.js | 4 +- 5 files changed, 288 insertions(+), 3 deletions(-) create mode 100644 plugin/assets/src/block-editor/blocks/button/deprecated.js create mode 100644 plugin/assets/src/block-editor/blocks/button/deprecated/m2/m2-version.js diff --git a/plugin/assets/src/block-editor/blocks/button/block.json b/plugin/assets/src/block-editor/blocks/button/block.json index a31451d6..e3cead38 100644 --- a/plugin/assets/src/block-editor/blocks/button/block.json +++ b/plugin/assets/src/block-editor/blocks/button/block.json @@ -16,7 +16,8 @@ }, "style": { "type": "string", - "default": "raised" + "default": "raised", + "enum": [ "text", "outlined", "raised", "filled" ] }, "iconPosition": { "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 00000000..bbaf3e4b --- /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 00000000..1b0a7a6c --- /dev/null +++ b/plugin/assets/src/block-editor/blocks/button/deprecated/m2/m2-version.js @@ -0,0 +1,259 @@ +/* + * 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. + */ + +/** + * WordPress dependencies + */ +import { useBlockProps } from '@wordpress/block-editor'; + +/** + * 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' && ( + { icon } + ) } +
+ { label } + { icon && iconPosition === 'trailing' && ( + { icon } + ) } + +); + +const attributesM2 = { + label: { + type: 'string', + default: '', + }, + type: { + type: 'string', + default: 'text', + }, + style: { + type: 'string', + default: 'raised', + }, + iconPosition: { + type: 'string', + default: 'leading', + }, + cornerRadius: { + type: 'number', + default: '', + }, + url: { + type: 'string', + default: '', + }, + rel: { + type: 'string', + default: '', + }, + linkTarget: { + type: 'string', + default: '', + }, + icon: { + type: 'string', + default: '', + }, + backgroundColor: { + type: 'string', + }, + textColor: { + type: 'string', + default: '', + }, + tooltip: { + type: 'string', + default: '', + }, + id: { + type: 'string', + default: '', + }, + 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, +} ) => { + const blockProps = useBlockProps.save( { + className, + id, + } ); + + if ( 'icon' === type ) { + const tooltipId = tooltip ? `${ id }-tooltip` : false; + const tooltipProps = tooltipId + ? { + 'aria-describedby': tooltipId, + } + : {}; + + return ( +
+ { url && ! isSubmit ? ( + + { icon } + + ) : ( + + ) } + + { tooltipId && ( + + ) } +
+ ); + } + + return ( +
+ { url && ! isSubmit ? ( + + + + ) : ( + + ) } +
+ ); +}; + +export const SaveM2 = { + attributes: attributesM2, + save: Save, +}; diff --git a/plugin/assets/src/block-editor/blocks/button/index.js b/plugin/assets/src/block-editor/blocks/button/index.js index b03f79ef..a6f778d7 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'; diff --git a/plugin/assets/src/block-editor/blocks/button/options.js b/plugin/assets/src/block-editor/blocks/button/options.js index c2037f25..394f6e3e 100644 --- a/plugin/assets/src/block-editor/blocks/button/options.js +++ b/plugin/assets/src/block-editor/blocks/button/options.js @@ -47,11 +47,11 @@ export const BUTTON_STYLES = [ value: 'outlined', }, { - label: __( 'Raised', 'material-design' ), + label: __( 'Elevated', 'material-design' ), value: 'raised', }, { - label: __( 'Unelevated', 'material-design' ), + label: __( 'Filled', 'material-design' ), value: 'unelevated', }, ]; From 4e584e4abb11cc81cb73370eacfd06bbc97282ef Mon Sep 17 00:00:00 2001 From: Mario Aguiar Date: Thu, 28 Jul 2022 10:06:11 -0500 Subject: [PATCH 04/27] Transform raised to elevated --- plugin/assets/css/src/components/button.css | 3 ++- plugin/assets/src/block-editor/blocks/button/edit.js | 6 ++++++ plugin/assets/src/block-editor/blocks/button/index.js | 1 - plugin/assets/src/block-editor/blocks/button/options.js | 4 ++-- 4 files changed, 10 insertions(+), 4 deletions(-) diff --git a/plugin/assets/css/src/components/button.css b/plugin/assets/css/src/components/button.css index d7c965de..e69805f1 100644 --- a/plugin/assets/css/src/components/button.css +++ b/plugin/assets/css/src/components/button.css @@ -22,7 +22,8 @@ padding: 0 24px; } -.mdc-button--raised { +.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); diff --git a/plugin/assets/src/block-editor/blocks/button/edit.js b/plugin/assets/src/block-editor/blocks/button/edit.js index 570cef86..1a188985 100644 --- a/plugin/assets/src/block-editor/blocks/button/edit.js +++ b/plugin/assets/src/block-editor/blocks/button/edit.js @@ -202,6 +202,12 @@ const ButtonEdit = ( { } }, [ isSubmitButton ] ); // eslint-disable-line + useEffect( () => { + if ( 'raised' === style ) { + setAttributes( { style: 'elevated' } ); + } + }, [ style ] ); // eslint-disable-line + /** * Sets ref and linkTarget when the toggle is touched. * diff --git a/plugin/assets/src/block-editor/blocks/button/index.js b/plugin/assets/src/block-editor/blocks/button/index.js index a6f778d7..b03f79ef 100644 --- a/plugin/assets/src/block-editor/blocks/button/index.js +++ b/plugin/assets/src/block-editor/blocks/button/index.js @@ -22,7 +22,6 @@ import { __ } from '@wordpress/i18n'; /** * Internal dependencies */ -import deprecated from './deprecated'; import icon from './components/block-icon'; import edit from './edit'; import save from './save'; diff --git a/plugin/assets/src/block-editor/blocks/button/options.js b/plugin/assets/src/block-editor/blocks/button/options.js index 394f6e3e..b4fa2508 100644 --- a/plugin/assets/src/block-editor/blocks/button/options.js +++ b/plugin/assets/src/block-editor/blocks/button/options.js @@ -48,11 +48,11 @@ export const BUTTON_STYLES = [ }, { label: __( 'Elevated', 'material-design' ), - value: 'raised', + value: 'elevated', }, { label: __( 'Filled', 'material-design' ), - value: 'unelevated', + value: 'filled', }, ]; From 193e7352712020c326a113bf954e1a9b27d70195 Mon Sep 17 00:00:00 2001 From: Mario Aguiar Date: Tue, 2 Aug 2022 11:50:06 -0500 Subject: [PATCH 05/27] Update defaults to be filled instead of raised --- plugin/assets/src/block-editor/blocks/button/block.json | 3 +-- plugin/assets/src/block-editor/blocks/button/edit.js | 4 ++++ 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/plugin/assets/src/block-editor/blocks/button/block.json b/plugin/assets/src/block-editor/blocks/button/block.json index e3cead38..aa9ae69a 100644 --- a/plugin/assets/src/block-editor/blocks/button/block.json +++ b/plugin/assets/src/block-editor/blocks/button/block.json @@ -15,9 +15,8 @@ "default": "text" }, "style": { - "type": "string", "default": "raised", - "enum": [ "text", "outlined", "raised", "filled" ] + "enum": [ "text", "outlined", "unelevated", "filled" ] }, "iconPosition": { "type": "string", diff --git a/plugin/assets/src/block-editor/blocks/button/edit.js b/plugin/assets/src/block-editor/blocks/button/edit.js index 1a188985..3dad968c 100644 --- a/plugin/assets/src/block-editor/blocks/button/edit.js +++ b/plugin/assets/src/block-editor/blocks/button/edit.js @@ -206,6 +206,10 @@ const ButtonEdit = ( { if ( 'raised' === style ) { setAttributes( { style: 'elevated' } ); } + + if ( 'unelevated' === style ) { + setAttributes( { style: 'filled' } ); + } }, [ style ] ); // eslint-disable-line /** From 76857dab746b1c53ac604459210429d4cd6c3d58 Mon Sep 17 00:00:00 2001 From: Mario Aguiar Date: Tue, 2 Aug 2022 11:51:01 -0500 Subject: [PATCH 06/27] Add filled style --- plugin/assets/css/src/components/button.css | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/plugin/assets/css/src/components/button.css b/plugin/assets/css/src/components/button.css index e69805f1..d47f06b0 100644 --- a/plugin/assets/css/src/components/button.css +++ b/plugin/assets/css/src/components/button.css @@ -19,7 +19,7 @@ display: flex; justify-content: center; letter-spacing: 0.1px; - padding: 0 24px; + padding: 10px 24px; } .mdc-button--raised, @@ -67,3 +67,8 @@ background-color: transparent; } } + +.mdc-button--filled { + background-color: var(--md-sys-color-primary); + color: var(--md-sys-color-on-primary); +} From 5aa47a174bd01b8c894cf321dca9dc05eb604db0 Mon Sep 17 00:00:00 2001 From: Mario Aguiar Date: Tue, 2 Aug 2022 12:17:11 -0500 Subject: [PATCH 07/27] Add new styles to hasBg function --- .../assets/src/block-editor/blocks/button/utils/has-bg.js | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) 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 915f866d..b33cd8db 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 ); From f755d1f3ae323e03545eac222536c584474124a6 Mon Sep 17 00:00:00 2001 From: Mario Aguiar Date: Tue, 2 Aug 2022 12:32:06 -0500 Subject: [PATCH 08/27] Remove borders --- plugin/assets/css/src/components/button.css | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/plugin/assets/css/src/components/button.css b/plugin/assets/css/src/components/button.css index d47f06b0..fb3b253f 100644 --- a/plugin/assets/css/src/components/button.css +++ b/plugin/assets/css/src/components/button.css @@ -16,6 +16,7 @@ .mdc-button { align-items: center; + border: 0; display: flex; justify-content: center; letter-spacing: 0.1px; @@ -71,4 +72,13 @@ .mdc-button--filled { 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); + } + + &:focus, + &:active { + outline: thin dotted; + } } From 53fbea534283f239c8a85b74721a4f8dcc806d2e Mon Sep 17 00:00:00 2001 From: Mario Aguiar Date: Wed, 3 Aug 2022 11:54:09 -0500 Subject: [PATCH 09/27] Add compatibility with unelevated class --- plugin/assets/css/src/components/button.css | 16 +++++++++++----- 1 file changed, 11 insertions(+), 5 deletions(-) diff --git a/plugin/assets/css/src/components/button.css b/plugin/assets/css/src/components/button.css index fb3b253f..ddcbf870 100644 --- a/plugin/assets/css/src/components/button.css +++ b/plugin/assets/css/src/components/button.css @@ -21,6 +21,15 @@ justify-content: center; letter-spacing: 0.1px; padding: 10px 24px; + + & .mdc-button__icon ~ .mdc-button__label { + margin-left: 8px; + } + + &.is-large { + height: 50px; + padding: 16px 32px; + } } .mdc-button--raised, @@ -63,13 +72,10 @@ .mdc-button--text, .mdc-button--text:not(:disabled) { border: 0 !important; /* Use !important to override the default style of the button. */; - - &:hover { - background-color: transparent; - } } -.mdc-button--filled { +.mdc-button--filled, +.mdc-button--unelevated { background-color: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary); From e91a88ea995a20de7267a2e173c7800f10343e97 Mon Sep 17 00:00:00 2001 From: Mario Aguiar Date: Fri, 5 Aug 2022 12:16:39 -0500 Subject: [PATCH 10/27] Update default --- plugin/assets/src/block-editor/blocks/button/block.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/plugin/assets/src/block-editor/blocks/button/block.json b/plugin/assets/src/block-editor/blocks/button/block.json index aa9ae69a..6f206780 100644 --- a/plugin/assets/src/block-editor/blocks/button/block.json +++ b/plugin/assets/src/block-editor/blocks/button/block.json @@ -16,7 +16,7 @@ }, "style": { "default": "raised", - "enum": [ "text", "outlined", "unelevated", "filled" ] + "enum": [ "text", "outlined", "elevated", "filled" ] }, "iconPosition": { "type": "string", From bee2381c3e9e0cfd6a6498856e0dec110ee0e9d4 Mon Sep 17 00:00:00 2001 From: Mario Aguiar Date: Fri, 5 Aug 2022 12:33:00 -0500 Subject: [PATCH 11/27] Add tonal option --- plugin/assets/src/block-editor/blocks/button/block.json | 2 +- plugin/assets/src/block-editor/blocks/button/options.js | 4 ++++ 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/plugin/assets/src/block-editor/blocks/button/block.json b/plugin/assets/src/block-editor/blocks/button/block.json index 6f206780..1c9d066a 100644 --- a/plugin/assets/src/block-editor/blocks/button/block.json +++ b/plugin/assets/src/block-editor/blocks/button/block.json @@ -16,7 +16,7 @@ }, "style": { "default": "raised", - "enum": [ "text", "outlined", "elevated", "filled" ] + "enum": [ "text", "outlined", "elevated", "filled", "tonal" ] }, "iconPosition": { "type": "string", diff --git a/plugin/assets/src/block-editor/blocks/button/options.js b/plugin/assets/src/block-editor/blocks/button/options.js index b4fa2508..2db01a27 100644 --- a/plugin/assets/src/block-editor/blocks/button/options.js +++ b/plugin/assets/src/block-editor/blocks/button/options.js @@ -54,6 +54,10 @@ export const BUTTON_STYLES = [ label: __( 'Filled', 'material-design' ), value: 'filled', }, + { + label: __( 'Tonal', 'material-design' ), + value: 'tonal', + }, ]; export const ICON_POSITIONS = [ From 8a3010bf575b4b1a6a82924e39f17af5be28bd4e Mon Sep 17 00:00:00 2001 From: Mario Aguiar Date: Fri, 5 Aug 2022 12:33:09 -0500 Subject: [PATCH 12/27] Add tonal styles --- plugin/assets/css/src/components/button.css | 18 +++++++++++++----- 1 file changed, 13 insertions(+), 5 deletions(-) diff --git a/plugin/assets/css/src/components/button.css b/plugin/assets/css/src/components/button.css index ddcbf870..20f0b46b 100644 --- a/plugin/assets/css/src/components/button.css +++ b/plugin/assets/css/src/components/button.css @@ -22,6 +22,11 @@ letter-spacing: 0.1px; padding: 10px 24px; + &:focus, + &:active { + outline: thin dotted; + } + & .mdc-button__icon ~ .mdc-button__label { margin-left: 8px; } @@ -46,7 +51,6 @@ &:focus, &:active { background-color: rgba(var(--md-sys-color-primary-rgb), 0.12); - outline: thin dotted; } } @@ -65,7 +69,6 @@ &:focus, &:active { background-color: rgba(var(--md-sys-color-primary-rgb), 0.12); - outline: thin dotted; } } @@ -82,9 +85,14 @@ &:hover { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 3px 1px rgba(0, 0, 0, 0.15); } +} - &:focus, - &:active { - outline: thin dotted; +.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); } } From 44dcf1789868e09425cc5e4102cce9e2a405c1d3 Mon Sep 17 00:00:00 2001 From: Mario Aguiar Date: Fri, 5 Aug 2022 13:30:47 -0500 Subject: [PATCH 13/27] Add label large class --- plugin/assets/src/block-editor/blocks/button/edit.js | 2 +- plugin/assets/src/block-editor/blocks/button/save.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/plugin/assets/src/block-editor/blocks/button/edit.js b/plugin/assets/src/block-editor/blocks/button/edit.js index 3dad968c..75283e17 100644 --- a/plugin/assets/src/block-editor/blocks/button/edit.js +++ b/plugin/assets/src/block-editor/blocks/button/edit.js @@ -112,7 +112,7 @@ const MdcButton = ( { ? { borderRadius: `${ cornerRadius }px` } : {} ), } } - className={ classNames( 'mdc-button', { + className={ classNames( 'mdc-button label-large', { [ `mdc-button--${ style }` ]: true, [ `is-large` ]: size === 'large', } ) } diff --git a/plugin/assets/src/block-editor/blocks/button/save.js b/plugin/assets/src/block-editor/blocks/button/save.js index 0dcd3086..bfda9761 100644 --- a/plugin/assets/src/block-editor/blocks/button/save.js +++ b/plugin/assets/src/block-editor/blocks/button/save.js @@ -155,7 +155,7 @@ const ButtonSave = ( { ) : (
  • - Unelevated + Filled + +
    • +
  • +
    • @@ -706,7 +716,7 @@ Object { "container":
    - Raised + Elevated + + +
  • +
  • - Unelevated + Tonal
    • 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 3614b082..a326cdfa 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 @@ -565,7 +565,7 @@ Object {
    \n
    \n\n\n\n
    \n\n\n\n
    \n
    \n
    • spaBenefit 1
    \n
    \n\n\n\n
    \n
    • favoriteBenefit 2
    \n
    \n\n\n\n
    \n
    • check_circleBenefit 3
    \n
    \n
    \n
    \n", + 'content' => "\n
    \n

    Call to action

    \n\n\n\n

    Perform this action in no time, satisfaction guaranteed.

    \n\n\n\n
    \n
    \n
    \n\n\n\n
    \n\n\n\n
    \n
    \n
    • spaBenefit 1
    \n
    \n\n\n\n
    \n
    • favoriteBenefit 2
    \n
    \n\n\n\n
    \n
    • check_circleBenefit 3
    \n
    \n
    \n
    \n", '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 0b780837..cdeca870 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' => "\n
    \n

    Features

    \n\n\n\n

    Lorem ipsum dolor sit amet consectetur adipiscing

    \n\n\n\n
    \n
    \n
    security
    \n\n\n\n
    Feature 1
    \n\n\n\n

    Arcu fusce convallis quam pharetra suspendisse porta auctor, fames quis sollicitudin torquent tempus ullamcor.

    \n\n\n\n
    \n
    \n
    \n\n\n\n
    \n
    \n\n\n\n
    \n
    web
    \n\n\n\n
    Feature 2
    \n\n\n\n

    Quis eros molestie libero porttitor convallis, integer sed ullamcorper nunc pharetra cras vitae nisl inceptos.

    \n\n\n\n
    \n
    \n
    \n\n\n\n
    \n
    \n\n\n\n
    \n
    offline_bolt
    \n\n\n\n
    Feature 3
    \n\n\n\n

    Placerat aptent ullamcorper vestibulum netus magnis eros id mauris, curae rutrum inceptos eleifend.

    \n\n\n\n
    \n
    \n
    \n\n\n\n
    \n
    \n
    \n
    \n", + 'content' => "\n
    \n

    Features

    \n\n\n\n

    Lorem ipsum dolor sit amet consectetur adipiscing

    \n\n\n\n
    \n
    \n
    security
    \n\n\n\n
    Feature 1
    \n\n\n\n

    Arcu fusce convallis quam pharetra suspendisse porta auctor, fames quis sollicitudin torquent tempus ullamcor.

    \n\n\n\n
    \n
    \n
    \n\n\n\n
    \n
    \n\n\n\n
    \n
    web
    \n\n\n\n
    Feature 2
    \n\n\n\n

    Quis eros molestie libero porttitor convallis, integer sed ullamcorper nunc pharetra cras vitae nisl inceptos.

    \n\n\n\n
    \n
    \n
    \n\n\n\n
    \n
    \n\n\n\n
    \n
    offline_bolt
    \n\n\n\n
    Feature 3
    \n\n\n\n

    Placerat aptent ullamcorper vestibulum netus magnis eros id mauris, curae rutrum inceptos eleifend.

    \n\n\n\n
    \n
    \n
    \n\n\n\n
    \n
    \n
    \n
    \n", '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 08b2e5eb..a7a87b2f 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' => "\n
    \n

    Call to action

    \n\n\n\n

    Perform this action in no time, satisfaction guaranteed.

    \n\n\n\n
    \n
    \n
    \n\n\n\n
    \n
    \n", + 'content' => "\n
    \n

    Call to action

    \n\n\n\n

    Perform this action in no time, satisfaction guaranteed.

    \n\n\n\n
    \n
    \n
    \n\n\n\n
    \n
    \n", '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 10d4bcd1..e4619ec1 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' => "\n

    Contact us

    \n\n\n\n

    Lorem ipsum dolor sit amet, consectetur adipiscing elit.

    \n\n\n\n
    \n\n\n\n
    \n
    \n\n\n\n
    \n\n\n\n
    \n\n\n\n
    \n
    \n", + 'content' => "\n

    Contact us

    \n\n\n\n

    Lorem ipsum dolor sit amet, consectetur adipiscing elit.

    \n\n\n\n
    \n\n\n\n
    \n
    \n\n\n\n
    \n\n\n\n
    \n\n\n\n
    \n
    \n", '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 2c5a2dda..8ff95e04 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' => "

    Landing Page Hero Section

    Imperdiet taciti nostra pulvinar bibendum congue varius sapien, diam curae pellentesque quam auctor praesent nullam convallis, tincidunt urna suscipit litora netus dictum.

    \"\"
    ", + 'content' => "

    Landing Page Hero Section

    Imperdiet taciti nostra pulvinar bibendum congue varius sapien, diam curae pellentesque quam auctor praesent nullam convallis, tincidunt urna suscipit litora netus dictum.

    \"\"
    ", '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 5844e2a0..9de36b2c 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' => "\n
    \n

    Enormous Heading

    \n\n\n\n

    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.

    \n\n\n\n
    \n
    \n
    \n
    \n", + 'content' => "\n
    \n

    Enormous Heading

    \n\n\n\n

    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.

    \n\n\n\n
    \n
    \n
    \n
    \n", '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 2a9e9b71..a60850a7 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' => "\n
    \n
    \n

    Highlights

    \n\n\n\n

    Amet consectetur adipiscing elit fermentum, quis bibendum pretium sociis eros per habitasse, tempus conubia commodo enim urna malesuada placerat.

    \n\n\n\n
    \n
    \n
    \n\n\n\n

    \n
    \n\n\n\n
    \n\n\n\n
    \n
    \n
    \n
    \n\n\n\n
    lightbulb_outline
    \n\n\n\n
    List item
    \n\n\n\n

    Dolor sit amet consectetur adipiscing elit ullamcorper, dictumst ultrices rutrum malesuada turpis pretium rhoncus vitae tempor.

    \n
    \n\n\n\n
    \n
    \n\n\n\n
    lightbulb_outline
    \n\n\n\n
    List item
    \n\n\n\n

    Dolor sit amet consectetur adipiscing elit ullamcorper, dictumst ultrices rutrum malesuada turpis pretium rhoncus vitae tempor.

    \n
    \n
    \n\n\n\n
    \n
    \n
    \n\n\n\n
    spa
    \n\n\n\n
    List item
    \n\n\n\n

    Dolor sit amet consectetur adipiscing elit ullamcorper, dictumst ultrices rutrum malesuada turpis pretium rhoncus vitae tempor.

    \n
    \n\n\n\n
    \n
    \n\n\n\n
    spa
    \n\n\n\n
    List item
    \n\n\n\n

    Dolor sit amet consectetur adipiscing elit ullamcorper, dictumst ultrices rutrum malesuada turpis pretium rhoncus vitae tempor.

    \n
    \n
    \n
    \n
    \n", + 'content' => "\n
    \n
    \n

    Highlights

    \n\n\n\n

    Amet consectetur adipiscing elit fermentum, quis bibendum pretium sociis eros per habitasse, tempus conubia commodo enim urna malesuada placerat.

    \n\n\n\n
    \n
    \n
    \n\n\n\n

    \n
    \n\n\n\n
    \n\n\n\n
    \n
    \n
    \n
    \n\n\n\n
    lightbulb_outline
    \n\n\n\n
    List item
    \n\n\n\n

    Dolor sit amet consectetur adipiscing elit ullamcorper, dictumst ultrices rutrum malesuada turpis pretium rhoncus vitae tempor.

    \n
    \n\n\n\n
    \n
    \n\n\n\n
    lightbulb_outline
    \n\n\n\n
    List item
    \n\n\n\n

    Dolor sit amet consectetur adipiscing elit ullamcorper, dictumst ultrices rutrum malesuada turpis pretium rhoncus vitae tempor.

    \n
    \n
    \n\n\n\n
    \n
    \n
    \n\n\n\n
    spa
    \n\n\n\n
    List item
    \n\n\n\n

    Dolor sit amet consectetur adipiscing elit ullamcorper, dictumst ultrices rutrum malesuada turpis pretium rhoncus vitae tempor.

    \n
    \n\n\n\n
    \n
    \n\n\n\n
    spa
    \n\n\n\n
    List item
    \n\n\n\n

    Dolor sit amet consectetur adipiscing elit ullamcorper, dictumst ultrices rutrum malesuada turpis pretium rhoncus vitae tempor.

    \n
    \n
    \n
    \n
    \n", '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 e4c529c3..7f04a917 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' => '

    Latest Posts

    Perform this action in no time. Satisfaction guaranteed

    ', + 'content' => '

    Latest Posts

    Perform this action in no time. Satisfaction guaranteed

    ', '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 89ebb0aa..b05d2da2 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' => "\n
    \n
    \n
    \"\"/
    \n
    \n\n\n
    \n

    Headline

    \n\n\n

    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.

    \n\n\n
    \n
    \n
    \n
    \n
    \n\n\n
    \n
    \n

    Headline

    \n\n\n

    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.

    \n\n\n
    \n
    \n
    \n
    \n\n\n
    \n
    \"\"/
    \n
    \n
    \n", + 'content' => "\n
    \n
    \n
    \"\"/
    \n
    \n\n\n
    \n

    Headline

    \n\n\n

    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.

    \n\n\n
    \n
    \n
    \n
    \n
    \n\n\n
    \n
    \n

    Headline

    \n\n\n

    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.

    \n\n\n
    \n
    \n
    \n
    \n\n\n
    \n
    \"\"/
    \n
    \n
    \n", '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 bb1ebaf6..ed3c755c 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' => "\n
    \n

    Numbers

    \n\n\n\n

    Some count that matters

    \n\n\n\n
    \n
    \n
    thumb_up_off_alt
    \n\n\n\n

    10k+

    \n\n\n\n

    Sit amet consectetur adipiscing elit dui, diam nam facilisis

    \n\n\n\n
    \n
    \n\n\n\n
    \n
    monetization_on
    \n\n\n\n

    200%

    \n\n\n\n

    Sit amet consectetur adipiscing elit dui, diam nam facilisis

    \n\n\n\n
    \n
    \n\n\n\n
    \n
    file_download
    \n\n\n\n

    2.5M

    \n\n\n\n

    Sit amet consectetur adipiscing elit dui, diam nam facilisis

    \n\n\n\n
    \n
    \n
    \n\n\n\n
    \n
    \n
    \n
    \n", // phpcs:ignore WordPressVIPMinimum.Security.Mustache.OutputNotation + 'content' => "\n
    \n

    Numbers

    \n\n\n\n

    Some count that matters

    \n\n\n\n
    \n
    \n
    thumb_up_off_alt
    \n\n\n\n

    10k+

    \n\n\n\n

    Sit amet consectetur adipiscing elit dui, diam nam facilisis

    \n\n\n\n
    \n
    \n\n\n\n
    \n
    monetization_on
    \n\n\n\n

    200%

    \n\n\n\n

    Sit amet consectetur adipiscing elit dui, diam nam facilisis

    \n\n\n\n
    \n
    \n\n\n\n
    \n
    file_download
    \n\n\n\n

    2.5M

    \n\n\n\n

    Sit amet consectetur adipiscing elit dui, diam nam facilisis

    \n\n\n\n
    \n
    \n
    \n\n\n\n
    \n
    \n
    \n
    \n", // 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 1618bf54..d5e4bdd8 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' => "\n
    \n

    Pricing

    \n\n\n\n

    Perform this action in no time, Satisfaction guaranteed.

    \n\n\n\n
    \n
    \n
    Price title
    \n\n\n\n

    Price Subtitle Description.

    \n\n\n\n

    $ 9.99 / mo

    \n\n\n\n

    First feature included
    Second feature included
    Third feature included
    Fourth feature included
    Fifth feature included

    \n\n\n\n
    \n
    \n
    \n
    \n\n\n\n
    \n
    Price title
    \n\n\n\n

    Price Subtitle Description.

    \n\n\n\n

    $ 9.99 / mo

    \n\n\n\n

    First feature included
    Second feature included
    Third feature included
    Fourth feature included
    Fifth feature included

    \n\n\n\n
    \n
    \n
    \n
    \n
    \n
    \n", // phpcs:ignore WordPressVIPMinimum.Security.Mustache.OutputNotation + 'content' => "\n
    \n

    Pricing

    \n\n\n\n

    Perform this action in no time, Satisfaction guaranteed.

    \n\n\n\n
    \n
    \n
    Price title
    \n\n\n\n

    Price Subtitle Description.

    \n\n\n\n

    $ 9.99 / mo

    \n\n\n\n

    First feature included
    Second feature included
    Third feature included
    Fourth feature included
    Fifth feature included

    \n\n\n\n
    \n
    \n
    \n
    \n\n\n\n
    \n
    Price title
    \n\n\n\n

    Price Subtitle Description.

    \n\n\n\n

    $ 9.99 / mo

    \n\n\n\n

    First feature included
    Second feature included
    Third feature included
    Fourth feature included
    Fifth feature included

    \n\n\n\n
    \n
    \n
    \n
    \n
    \n
    \n", // 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 39934f07..c40ea374 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' => "\n
    \n
    \n
    • \"\"
    • \"\"
    • \"\"
    • \"\"
    \n
    \n\n\n
    \n

    Headline

    \n\n\n

    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.

    \n\n\n
    • spaHeadlineOne line description
    • spaHeadlineOne line description
    • spaHeadlineOne line description
    \n\n\n
    \n\n\n
    \n
    \n
    \n
    \n
    \n", + 'content' => "\n
    \n
    \n
    • \"\"
    • \"\"
    • \"\"
    • \"\"
    \n
    \n\n\n
    \n

    Headline

    \n\n\n

    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.

    \n\n\n
    • spaHeadlineOne line description
    • spaHeadlineOne line description
    • spaHeadlineOne line description
    \n\n\n
    \n\n\n
    \n
    \n
    \n
    \n
    \n", '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 d8f95c7e..8462bcd5 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' => "\n
    \n
    \n
    \"\"
    \n
    \n\n\n
    \n

    Headline

    \n\n\n

    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.

    \n\n\n
    \n
    \n
    \n
    \n
    \n", + 'content' => "\n
    \n
    \n
    \"\"
    \n
    \n\n\n
    \n

    Headline

    \n\n\n

    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.

    \n\n\n
    \n
    \n
    \n
    \n
    \n", 'viewportWidth' => 800, 'categories' => [ 'material' ], 'description' => __( 'Single Feature pattern.', 'material-design' ), From 3a6eb8289f2a7feb74b690779acebebee5a71425 Mon Sep 17 00:00:00 2001 From: Mario Aguiar Date: Tue, 9 Aug 2022 12:43:22 -0500 Subject: [PATCH 16/27] Add deprecation functions to button --- .../src/block-editor/blocks/button/block.json | 6 +++- .../blocks/button/deprecated/m2/m2-version.js | 36 ++++++++++++------- .../src/block-editor/blocks/button/edit.js | 36 +++++++------------ .../src/block-editor/blocks/button/index.js | 2 ++ .../src/block-editor/blocks/button/save.js | 10 +++--- plugin/php/block-patterns/contact-form.php | 2 +- 6 files changed, 50 insertions(+), 42 deletions(-) diff --git a/plugin/assets/src/block-editor/blocks/button/block.json b/plugin/assets/src/block-editor/blocks/button/block.json index 1c9d066a..a324a334 100644 --- a/plugin/assets/src/block-editor/blocks/button/block.json +++ b/plugin/assets/src/block-editor/blocks/button/block.json @@ -16,7 +16,7 @@ }, "style": { "default": "raised", - "enum": [ "text", "outlined", "elevated", "filled", "tonal" ] + "type": "string" }, "iconPosition": { "type": "string", @@ -76,6 +76,10 @@ "size": { "type": "string", "default": "normal" + }, + "elevationStyle": { + "default": "elevated", + "enum": [ "text", "outlined", "elevated", "filled", "tonal" ] } } } 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 index 1b0a7a6c..54ff32ae 100644 --- 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 @@ -14,15 +14,11 @@ * limitations under the License. */ -/** - * WordPress dependencies - */ -import { useBlockProps } from '@wordpress/block-editor'; - /** * External dependencies */ import classNames from 'classnames'; +import { omit } from 'lodash'; /** * Internal dependencies @@ -134,11 +130,6 @@ const Save = ( { }, className, } ) => { - const blockProps = useBlockProps.save( { - className, - id, - } ); - if ( 'icon' === type ) { const tooltipId = tooltip ? `${ id }-tooltip` : false; const tooltipProps = tooltipId @@ -148,7 +139,7 @@ const Save = ( { : {}; return ( -
    +
    { url && ! isSubmit ? ( + - { hasBg( style ) && type === 'text' && ( + { hasBg( elevationStyle ) && type === 'text' && ( - { hasBg( style ) && type === 'text' && ( + { hasBg( elevationStyle ) && type === 'text' && ( - { style !== 'text' ? ( + { elevationStyle !== 'text' ? ( <>
    { __( diff --git a/plugin/assets/src/block-editor/blocks/button/index.js b/plugin/assets/src/block-editor/blocks/button/index.js index b03f79ef..5405b8ad 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/save.js b/plugin/assets/src/block-editor/blocks/button/save.js index bfda9761..313eead6 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', } ) } > @@ -156,11 +156,11 @@ const ButtonSave = ( { ) : (
    \n
    \n", + 'content' => "\n

    Contact us

    \n\n\n\n

    Lorem ipsum dolor sit amet, consectetur adipiscing elit.

    \n\n\n\n
    \n\n\n\n
    \n
    \n\n\n\n
    \n\n\n\n
    \n\n\n\n
    \n
    \n", 'viewportWidth' => 800, 'categories' => [ 'material', 'buttons', 'header' ], 'description' => __( 'Contact Form pattern.', 'material-design' ), From 4790e108547a0dcec0657a127a1fe74cd62abdd0 Mon Sep 17 00:00:00 2001 From: Utkarsh Patel Date: Thu, 11 Aug 2022 13:41:02 +0530 Subject: [PATCH 17/27] Fix migration --- .../src/block-editor/blocks/button/block.json | 3 ++- .../blocks/button/deprecated/m2/m2-version.js | 23 +++++++++++++++---- 2 files changed, 20 insertions(+), 6 deletions(-) diff --git a/plugin/assets/src/block-editor/blocks/button/block.json b/plugin/assets/src/block-editor/blocks/button/block.json index a324a334..c2afabd4 100644 --- a/plugin/assets/src/block-editor/blocks/button/block.json +++ b/plugin/assets/src/block-editor/blocks/button/block.json @@ -79,7 +79,8 @@ }, "elevationStyle": { "default": "elevated", - "enum": [ "text", "outlined", "elevated", "filled", "tonal" ] + "enum": [ "text", "outlined", "elevated", "filled", "tonal" ], + "type": "string" } } } 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 index 54ff32ae..0d3ed235 100644 --- 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 @@ -18,7 +18,6 @@ * External dependencies */ import classNames from 'classnames'; -import { omit } from 'lodash'; /** * Internal dependencies @@ -51,6 +50,8 @@ const ButtonChildren = ( { icon, iconPosition, label } ) => ( const attributesM2 = { label: { type: 'string', + source: 'html', + selector: '.mdc-button__label', default: '', }, type: { @@ -67,38 +68,50 @@ const attributesM2 = { }, cornerRadius: { type: 'number', - default: '', }, url: { type: 'string', + source: 'attribute', + selector: 'a', + attribute: 'href', default: '', }, rel: { type: 'string', + source: 'attribute', + selector: 'a', + attribute: 'rel', default: '', }, linkTarget: { type: 'string', - default: '', + source: 'attribute', + selector: 'a', + attribute: 'target', }, icon: { type: 'string', default: '', + source: 'text', + selector: '.material-icons', }, backgroundColor: { type: 'string', }, textColor: { type: 'string', - default: '', }, tooltip: { type: 'string', default: '', + source: 'text', + selector: '.mdc-tooltip', }, id: { type: 'string', - default: '', + source: 'attribute', + attribute: 'id', + selector: '*', }, isSubmit: { type: 'boolean', From ff6da1f83aa2ebe361a0879f91588b57da9462a1 Mon Sep 17 00:00:00 2001 From: Mario Aguiar Date: Thu, 11 Aug 2022 11:52:34 -0500 Subject: [PATCH 18/27] Update tests --- .../button/__snapshots__/save.test.js.snap | 36 +++++++++---------- .../block-editor/blocks/button/edit.test.js | 31 +++++++++++----- 2 files changed, 41 insertions(+), 26 deletions(-) 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 a326cdfa..e6746b8a 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 {