From 39c9f6da7e8ae60fc18ee58df5704a1d5681b78d Mon Sep 17 00:00:00 2001 From: Utkarsh Patel Date: Thu, 25 Aug 2022 10:51:55 +0530 Subject: [PATCH 01/11] Optimise plugin css --- plugin/assets/css/src/_frontend.css | 35 +++++++++++++++++++ .../css/src/front-end-with-active-theme.css | 21 +++++++++++ plugin/assets/css/src/front-end.css | 16 ++------- .../material-components-with-active-theme.css | 28 +++++++++++++++ plugin/assets/css/src/material-components.css | 2 +- plugin/php/class-plugin.php | 21 +++++++---- webpack.config.js | 8 +++++ 7 files changed, 110 insertions(+), 21 deletions(-) create mode 100644 plugin/assets/css/src/_frontend.css create mode 100644 plugin/assets/css/src/front-end-with-active-theme.css create mode 100644 plugin/assets/css/src/material-components-with-active-theme.css diff --git a/plugin/assets/css/src/_frontend.css b/plugin/assets/css/src/_frontend.css new file mode 100644 index 00000000..0528d79b --- /dev/null +++ b/plugin/assets/css/src/_frontend.css @@ -0,0 +1,35 @@ +/* + * + * 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. + * + * + */ + +/* + * All Frontend CSS without importing material-components.css. + */ +@import "./base/variables.css"; +@import "./conf/index.css"; +@import "typography.css"; +@import "./components/contact-form.css"; +@import "./components/masonry-grid.css"; +@import "./components/card.css"; +@import "./components/core.css"; +@import "../../src/block-editor/blocks/common-posts-list/style.css"; +@import "../../src/block-editor/blocks/contact-form/inner-blocks/common/style.css"; +@import "../../src/block-editor/blocks/card/style.css"; +@import "./block/style/masonry.css"; +@import "./overrides.css"; +@import "./tokens/index.css"; diff --git a/plugin/assets/css/src/front-end-with-active-theme.css b/plugin/assets/css/src/front-end-with-active-theme.css new file mode 100644 index 00000000..deda2ab6 --- /dev/null +++ b/plugin/assets/css/src/front-end-with-active-theme.css @@ -0,0 +1,21 @@ +/** + * Copyright 2020 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. + */ + +/* + * All Frontend CSS. + */ +@import "material-components-with-active-theme.css"; +@import "_frontend.css"; diff --git a/plugin/assets/css/src/front-end.css b/plugin/assets/css/src/front-end.css index deb435a4..181a643f 100644 --- a/plugin/assets/css/src/front-end.css +++ b/plugin/assets/css/src/front-end.css @@ -17,17 +17,5 @@ /* * All Frontend CSS. */ -@import "./base/variables.css"; -@import "./conf/index.css"; -@import "typography.css"; -@import "./material-components.css"; -@import "./components/contact-form.css"; -@import "./components/masonry-grid.css"; -@import "./components/card.css"; -@import "./components/core.css"; -@import "../../src/block-editor/blocks/common-posts-list/style.css"; -@import "../../src/block-editor/blocks/contact-form/inner-blocks/common/style.css"; -@import "../../src/block-editor/blocks/card/style.css"; -@import "./block/style/masonry.css"; -@import "./overrides.css"; -@import "./tokens/index.css"; +@import "material-components.css"; +@import "_frontend.css"; diff --git a/plugin/assets/css/src/material-components-with-active-theme.css b/plugin/assets/css/src/material-components-with-active-theme.css new file mode 100644 index 00000000..404e7253 --- /dev/null +++ b/plugin/assets/css/src/material-components-with-active-theme.css @@ -0,0 +1,28 @@ +/** + * Copyright 2020 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. + */ + +/* + * Required Material components when material theme is active. + */ + +@import "mixins.css"; +@import "@material/icon-button/dist/mdc.icon-button.css"; +@import "@material/layout-grid/dist/mdc.layout-grid.css"; +@import "@material/tab-bar/dist/mdc.tab-bar.css"; +@import "@material/tab-scroller/dist/mdc.tab-scroller.css"; +@import "./components/material.css"; +@import "./components/datatable.css"; +@import "./components/tooltip.css"; diff --git a/plugin/assets/css/src/material-components.css b/plugin/assets/css/src/material-components.css index 4282da9f..6e568f02 100644 --- a/plugin/assets/css/src/material-components.css +++ b/plugin/assets/css/src/material-components.css @@ -22,7 +22,7 @@ @import "@material/layout-grid/dist/mdc.layout-grid.css"; @import "@material/tab-bar/dist/mdc.tab-bar.css"; @import "@material/tab-scroller/dist/mdc.tab-scroller.css"; -@import "components/image-card.css"; +@import "./components/image-card.css"; @import "./components/material.css"; @import "./components/datatable.css"; @import "./components/text-field.css"; diff --git a/plugin/php/class-plugin.php b/plugin/php/class-plugin.php index 99df0213..9e3957a9 100644 --- a/plugin/php/class-plugin.php +++ b/plugin/php/class-plugin.php @@ -263,12 +263,21 @@ public function enqueue_front_end_assets() { wp_localize_script( 'material-front-end-js', 'materialDesign', $wp_localized_script_data ); - wp_enqueue_style( - 'material-front-end-css', - $this->asset_url( 'assets/css/front-end-compiled.css' ), - [], - $this->asset_version() - ); + if ( self::THEME_SLUG === get_template() ) { + wp_enqueue_style( + 'material-front-end-css', + $this->asset_url( 'assets/css/front-end-w-theme-compiled.css' ), + [], + $this->asset_version() + ); + } else { + wp_enqueue_style( + 'material-front-end-css', + $this->asset_url( 'assets/css/front-end-compiled.css' ), + [], + $this->asset_version() + ); + } /** * Enqueue material style overrides if the theme is not material. diff --git a/webpack.config.js b/webpack.config.js index 3f50045f..24801930 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -84,6 +84,14 @@ const assets = { './plugin/assets/css/src/front-end.css', ], }, + { + name: 'Front End with material theme ', // Remove duplicate css from theme when theme is active. + chunk: 'front-end-w-theme', + entry: [ + './plugin/assets/src/front-end/index.js', + './plugin/assets/css/src/front-end-with-active-theme.css', + ], + }, { name: 'Admin', chunk: 'admin', From 7ee8ee8e7a337b54981466b74469c7e0b0d27a55 Mon Sep 17 00:00:00 2001 From: Utkarsh Patel Date: Thu, 25 Aug 2022 11:29:37 +0530 Subject: [PATCH 02/11] Remove icon button --- plugin/assets/css/src/material-components-with-active-theme.css | 1 - 1 file changed, 1 deletion(-) diff --git a/plugin/assets/css/src/material-components-with-active-theme.css b/plugin/assets/css/src/material-components-with-active-theme.css index 404e7253..9ed875f9 100644 --- a/plugin/assets/css/src/material-components-with-active-theme.css +++ b/plugin/assets/css/src/material-components-with-active-theme.css @@ -19,7 +19,6 @@ */ @import "mixins.css"; -@import "@material/icon-button/dist/mdc.icon-button.css"; @import "@material/layout-grid/dist/mdc.layout-grid.css"; @import "@material/tab-bar/dist/mdc.tab-bar.css"; @import "@material/tab-scroller/dist/mdc.tab-scroller.css"; From bbac073b3cc1a38b6914d5335cf6bb7e1851877f Mon Sep 17 00:00:00 2001 From: Mario Aguiar Date: Thu, 25 Aug 2022 10:35:12 -0500 Subject: [PATCH 03/11] Fix color panel error --- .../src/block-editor/components/global-color/color-panel.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/plugin/assets/src/block-editor/components/global-color/color-panel.js b/plugin/assets/src/block-editor/components/global-color/color-panel.js index ffe4472e..6b702cca 100644 --- a/plugin/assets/src/block-editor/components/global-color/color-panel.js +++ b/plugin/assets/src/block-editor/components/global-color/color-panel.js @@ -35,11 +35,12 @@ import { __ } from '@wordpress/i18n'; * @return {string} variable name example: '--md-sys-color-on-primary'. */ const getColorFromVarString = color => { - if ( color.includes( 'var(' ) ) { + if ( color && color.includes( 'var(' ) ) { const colorVar = color.split( '(' )[ 1 ].split( ')' )[ 0 ]; const style = getComputedStyle( document.body ); return style.getPropertyValue( colorVar ); } + return color; }; From d7922e75f41a67441a0a55e6c27920f5f35c195c Mon Sep 17 00:00:00 2001 From: Mario Aguiar Date: Thu, 25 Aug 2022 10:51:55 -0500 Subject: [PATCH 04/11] Remove corner styles slider in large button --- plugin/assets/src/block-editor/blocks/button/edit.js | 6 ++++-- 1 file changed, 4 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 c8ae12b3..fc61255e 100644 --- a/plugin/assets/src/block-editor/blocks/button/edit.js +++ b/plugin/assets/src/block-editor/blocks/button/edit.js @@ -359,7 +359,7 @@ const ButtonEdit = ( { title={ __( 'Corner Styles', 'material-design' ) } initialOpen={ true } > - { elevationStyle !== 'text' ? ( + { elevationStyle !== 'text' && size !== 'large' && ( <>
{ __( @@ -391,7 +391,9 @@ const ButtonEdit = ( { blockName={ ButtonBlockName } /> - ) : ( + ) } + + { ( elevationStyle === 'text' || size === 'large' ) && (

{ __( 'Current button style does not support rounded corners.', From 79567ec77b027199d1ae9e70fe5dfa24c730f4a4 Mon Sep 17 00:00:00 2001 From: Mario Aguiar Date: Thu, 25 Aug 2022 11:12:19 -0500 Subject: [PATCH 05/11] Port fab styles to large button --- plugin/assets/css/src/components/button.css | 40 +++++++++++++++++++++ 1 file changed, 40 insertions(+) diff --git a/plugin/assets/css/src/components/button.css b/plugin/assets/css/src/components/button.css index bad8efb6..d95bc9b5 100644 --- a/plugin/assets/css/src/components/button.css +++ b/plugin/assets/css/src/components/button.css @@ -665,3 +665,43 @@ svg.mdc-button__icon { background-color: var(--md-sys-color-surface); } } + +.mdc-button.is-large { + background-color: var(--md-sys-color-primary-container); + border-radius: var(--md-sys-shape-medium); + box-shadow: var(--md-sys-elevation-1); + color: var(--md-sys-color-on-primary-container); + font-size: 16px; + height: 56px; + padding: 16px; + width: unset; +} + +.mdc-button.is-large > i { + font-size: 24px; + margin-right: 8px; +} + +.mdc-button.is-large:hover, +.mdc-button.is-large .hover { + background-color: rgba(var(--md-sys-color-on-primary-container-rgb), var(--md-sys-state-hover-state-layer-opacity)); + box-shadow: var(--md-sys-elevation-4); +} + +.mdc-button.is-large:focus, +.mdc-button.is-large .focus { + background-color: rgba(var(--md-sys-color-on-primary-container-rgb), var(--md-sys-state-focus-state-layer-opacity)); + box-shadow: var(--md-sys-elevation-2); +} + +.mdc-button.is-large:active, +.mdc-button.is-large .active { + background-color: rgba(var(--md-sys-color-on-primary-container-rgb), var(--md-sys-state-pressed-state-layer-opacity)); + box-shadow: var(--md-sys-elevation-2); +} + +.mdc-button.is-large[disabled] { + background-color: rgba(var(--md-sys-color-on-surface-rgb),.12); + box-shadow: var(--md-sys-elevation-0); + color: rgba(var(--md-sys-color-on-surface-rgb),.38) +} From 4d6da8c9082b5f0319b256c4209a3c05ed86fff1 Mon Sep 17 00:00:00 2001 From: Mario Aguiar Date: Thu, 25 Aug 2022 11:12:31 -0500 Subject: [PATCH 06/11] Add shape tokens --- plugin/assets/css/src/tokens/index.css | 1 + plugin/assets/css/src/tokens/shape.css | 66 ++++++++++++++++++++++++++ 2 files changed, 67 insertions(+) create mode 100644 plugin/assets/css/src/tokens/shape.css diff --git a/plugin/assets/css/src/tokens/index.css b/plugin/assets/css/src/tokens/index.css index f6cfe500..70a21438 100644 --- a/plugin/assets/css/src/tokens/index.css +++ b/plugin/assets/css/src/tokens/index.css @@ -16,3 +16,4 @@ @import "./palette.css"; @import "./colors.css"; +@import "./shape.css"; diff --git a/plugin/assets/css/src/tokens/shape.css b/plugin/assets/css/src/tokens/shape.css new file mode 100644 index 00000000..e793c276 --- /dev/null +++ b/plugin/assets/css/src/tokens/shape.css @@ -0,0 +1,66 @@ +/** + * 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. + */ + +:root { + --md-sys-shape-corner-full-family: 3px; + --md-sys-shape-corner-extra-large-top-family: 1px; + --md-sys-shape-corner-extra-large-top: 0px; + --md-sys-shape-corner-extra-large-top-top-left: 28px; + --md-sys-shape-corner-extra-large-top-top-right-unit: 1px; + --md-sys-shape-corner-extra-large-top-top-right: 28px; + --md-sys-shape-corner-extra-large-family: 1px; + --md-sys-shape-corner-extra-large-unit: 1px; + --md-sys-shape-corner-extra-large: 28px; + --md-sys-shape-corner-large-top-family: 1px; + --md-sys-shape-corner-large-top-unit: 1px; + --md-sys-shape-corner-large-top: 0px; + --md-sys-shape-corner-large-top-top-left-unit: 1px; + --md-sys-shape-corner-large-top-top-left: 16px; + --md-sys-shape-corner-large-top-top-right-unit: 1px; + --md-sys-shape-corner-large-top-top-right: 16px; + --md-sys-shape-corner-large-end-family: 1px; + --md-sys-shape-corner-large-end-unit: 1px; + --md-sys-shape-corner-large-end: 0px; + --md-sys-shape-corner-large-end-top-right-unit: 1px; + --md-sys-shape-corner-large-end-top-right: 16px; + --md-sys-shape-corner-large-end-bottom-right-unit: 1px; + --md-sys-shape-corner-large-end-bottom-right: 16px; + --md-sys-shape-corner-large-family: 1px; + --md-sys-shape-corner-large-unit: 1px; + --md-sys-shape-corner-large: 16px; + --md-sys-shape-corner-medium-family: 1px; + --md-sys-shape-corner-medium-unit: 1px; + --md-sys-shape-corner-medium: 12px; + --md-sys-shape-corner-small-family: 1px; + --md-sys-shape-corner-small-unit: 1px; + --md-sys-shape-corner-small: 8px; + --md-sys-shape-corner-extra-small-top-family: 1px; + --md-sys-shape-corner-extra-small-top-unit: 1px; + --md-sys-shape-corner-extra-small-top: 0px; + --md-sys-shape-corner-extra-small-top-top-left-unit: 1px; + --md-sys-shape-corner-extra-small-top-top-left: 4px; + --md-sys-shape-corner-extra-small-top-top-right-unit: 1px; + --md-sys-shape-corner-extra-small-top-top-right: 4px; + --md-sys-shape-corner-extra-small-family: 1px; + --md-sys-shape-corner-extra-small-unit: 1px; + --md-sys-shape-corner-extra-small: 4px; + --md-sys-shape-corner-none-family: 1px; + --md-sys-shape-corner-none-unit: 1px; + --md-sys-shape-corner-none: 0px; + --md-sys-shape-small: var(--md-sys-shape-corner-small); + --md-sys-shape-medium: var(--md-sys-shape-corner-medium); + --md-sys-shape-large: var(--md-sys-shape-corner-large); +} From 554424ad797a79ef66bd46829251340877277b87 Mon Sep 17 00:00:00 2001 From: Mario Aguiar Date: Thu, 25 Aug 2022 11:25:45 -0500 Subject: [PATCH 07/11] Add elevation and opacity tokens --- plugin/assets/css/src/tokens/elevation.css | 42 ++++++++++++++++++++++ plugin/assets/css/src/tokens/index.css | 2 ++ plugin/assets/css/src/tokens/opacity.css | 22 ++++++++++++ 3 files changed, 66 insertions(+) create mode 100644 plugin/assets/css/src/tokens/elevation.css create mode 100644 plugin/assets/css/src/tokens/opacity.css diff --git a/plugin/assets/css/src/tokens/elevation.css b/plugin/assets/css/src/tokens/elevation.css new file mode 100644 index 00000000..6e9ca038 --- /dev/null +++ b/plugin/assets/css/src/tokens/elevation.css @@ -0,0 +1,42 @@ +/** + * 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. + */ + +:root { + --md-sys-elevation-level5-value: 12px; + --md-sys-elevation-level5-unit: 1px; + --md-sys-elevation-level5: 12px; + --md-sys-elevation-level4-value: 8px; + --md-sys-elevation-level4-unit: 1px; + --md-sys-elevation-level4: 8px; + --md-sys-elevation-level3-value: 6px; + --md-sys-elevation-level3-unit: 1px; + --md-sys-elevation-level3: 6px; + --md-sys-elevation-level2-value: 3px; + --md-sys-elevation-level2-unit: 1px; + --md-sys-elevation-level2: 3px; + --md-sys-elevation-level1-value: 1px; + --md-sys-elevation-level1-unit: 1px; + --md-sys-elevation-level1: 1px; + --md-sys-elevation-level0-value: 0px; + --md-sys-elevation-level0-unit: 1px; + --md-sys-elevation-level0: 0px; + --md-sys-elevation-0: 0px 0px 0px 0px rgba(var(--md-sys-color-shadow-rgb), .2), 0px 0px 0px 0px rgba(var(--md-sys-color-shadow-rgb), .14), 0px 0px 0px 0px rgba(var(--md-sys-color-shadow-rgb), .12); + --md-sys-elevation-1: 0px 3px 1px -2px rgba(var(--md-sys-color-shadow-rgb), .2), 0px 2px 2px 0px rgba(var(--md-sys-color-shadow-rgb), .14), 0px 1px 5px 0px rgba(var(--md-sys-color-shadow-rgb), .12); + --md-sys-elevation-2: 0px 2px 4px -1px rgba(var(--md-sys-color-shadow-rgb), .2), 0px 4px 5px 0px rgba(var(--md-sys-color-shadow-rgb), .14), 0px 1px 10px 0px rgba(var(--md-sys-color-shadow-rgb), .12); + --md-sys-elevation-3: 0px 5px 5px -3px rgba(var(--md-sys-color-shadow-rgb), .2), 0px 8px 10px 1px rgba(var(--md-sys-color-shadow-rgb), .14), 0px 3px 14px 2px rgba(var(--md-sys-color-shadow-rgb), .12); + --md-sys-elevation-4: 0px 5px 5px -3px rgba(var(--md-sys-color-shadow-rgb), .2), 0px 8px 10px 1px rgba(var(--md-sys-color-shadow-rgb), .14), 0px 3px 14px 2px rgba(var(--md-sys-color-shadow-rgb), .12); + --md-sys-elevation-5: 0px 8px 10px -6px rgba(var(--md-sys-color-shadow-rgb), .2), 0px 16px 24px 2px rgba(var(--md-sys-color-shadow-rgb), .14), 0px 6px 30px 5px rgba(var(--md-sys-color-shadow-rgb), .12) +} diff --git a/plugin/assets/css/src/tokens/index.css b/plugin/assets/css/src/tokens/index.css index 70a21438..5899cd6c 100644 --- a/plugin/assets/css/src/tokens/index.css +++ b/plugin/assets/css/src/tokens/index.css @@ -17,3 +17,5 @@ @import "./palette.css"; @import "./colors.css"; @import "./shape.css"; +@import "./opacity.css"; +@import "./elevation.css"; diff --git a/plugin/assets/css/src/tokens/opacity.css b/plugin/assets/css/src/tokens/opacity.css new file mode 100644 index 00000000..b564d4c0 --- /dev/null +++ b/plugin/assets/css/src/tokens/opacity.css @@ -0,0 +1,22 @@ +/** + * 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. + */ + +:root { + --md-sys-state-dragged-state-layer-opacity: 0.16; + --md-sys-state-pressed-state-layer-opacity: 0.12; + --md-sys-state-focus-state-layer-opacity: 0.12; + --md-sys-state-hover-state-layer-opacity: 0.08 +} From 24cc84603c5e28d38295ef07fdd07ea2a117a3d0 Mon Sep 17 00:00:00 2001 From: Mario Aguiar Date: Thu, 25 Aug 2022 11:25:56 -0500 Subject: [PATCH 08/11] Fix hover color --- plugin/assets/css/src/components/button.css | 2 ++ 1 file changed, 2 insertions(+) diff --git a/plugin/assets/css/src/components/button.css b/plugin/assets/css/src/components/button.css index d95bc9b5..f234cfd2 100644 --- a/plugin/assets/css/src/components/button.css +++ b/plugin/assets/css/src/components/button.css @@ -686,12 +686,14 @@ svg.mdc-button__icon { .mdc-button.is-large .hover { background-color: rgba(var(--md-sys-color-on-primary-container-rgb), var(--md-sys-state-hover-state-layer-opacity)); box-shadow: var(--md-sys-elevation-4); + color: var(--md-sys-color-on-primary-container); } .mdc-button.is-large:focus, .mdc-button.is-large .focus { background-color: rgba(var(--md-sys-color-on-primary-container-rgb), var(--md-sys-state-focus-state-layer-opacity)); box-shadow: var(--md-sys-elevation-2); + color: var(--md-sys-color-on-primary-container); } .mdc-button.is-large:active, From 45c14ed550ff2489331e24afda86c45396fa4932 Mon Sep 17 00:00:00 2001 From: Mario Aguiar Date: Thu, 25 Aug 2022 11:33:50 -0500 Subject: [PATCH 09/11] Update width --- plugin/assets/css/src/components/button.css | 3 +++ plugin/assets/css/src/components/material.css | 10 ---------- 2 files changed, 3 insertions(+), 10 deletions(-) diff --git a/plugin/assets/css/src/components/button.css b/plugin/assets/css/src/components/button.css index f234cfd2..57c848a9 100644 --- a/plugin/assets/css/src/components/button.css +++ b/plugin/assets/css/src/components/button.css @@ -679,7 +679,10 @@ svg.mdc-button__icon { .mdc-button.is-large > i { font-size: 24px; + height: auto; + margin-left: auto; margin-right: 8px; + width: auto; } .mdc-button.is-large:hover, diff --git a/plugin/assets/css/src/components/material.css b/plugin/assets/css/src/components/material.css index 8d2651d4..5ca781d2 100644 --- a/plugin/assets/css/src/components/material.css +++ b/plugin/assets/css/src/components/material.css @@ -331,16 +331,6 @@ } } -.wp-block-material-buttons, -.wp-block-material-button { - - & .mdc-button.is-large { - height: 50px; - padding: 16px 32px; - } -} - - /* Icon */ .wp-block-material-icon { From 1a0a9d5010caa4479484dc18653d7c95edd68fb6 Mon Sep 17 00:00:00 2001 From: Mario Aguiar Date: Thu, 25 Aug 2022 12:20:54 -0500 Subject: [PATCH 10/11] Hide variations if button is large --- plugin/assets/css/src/components/button.css | 29 +++--- plugin/assets/css/src/tokens/elevation.css | 46 ++++----- plugin/assets/css/src/tokens/opacity.css | 6 +- plugin/assets/css/src/tokens/shape.css | 94 +++++++++---------- .../src/block-editor/blocks/button/edit.js | 2 +- 5 files changed, 89 insertions(+), 88 deletions(-) diff --git a/plugin/assets/css/src/components/button.css b/plugin/assets/css/src/components/button.css index 57c848a9..bc7a4b8d 100644 --- a/plugin/assets/css/src/components/button.css +++ b/plugin/assets/css/src/components/button.css @@ -667,13 +667,14 @@ svg.mdc-button__icon { } .mdc-button.is-large { - background-color: var(--md-sys-color-primary-container); + background-color: var(--md-sys-color-primary-container); border-radius: var(--md-sys-shape-medium); - box-shadow: var(--md-sys-elevation-1); - color: var(--md-sys-color-on-primary-container); + box-shadow: var(--md-sys-elevation-1); + color: var(--md-sys-color-on-primary-container); font-size: 16px; + gap: 0.25em; height: 56px; - padding: 16px; + padding: 16px; width: unset; } @@ -681,32 +682,32 @@ svg.mdc-button__icon { font-size: 24px; height: auto; margin-left: auto; - margin-right: 8px; + margin-right: 8px; width: auto; } .mdc-button.is-large:hover, .mdc-button.is-large .hover { - background-color: rgba(var(--md-sys-color-on-primary-container-rgb), var(--md-sys-state-hover-state-layer-opacity)); - box-shadow: var(--md-sys-elevation-4); + background-color: rgba(var(--md-sys-color-on-primary-container-rgb), var(--md-sys-state-hover-state-layer-opacity)); + box-shadow: var(--md-sys-elevation-4); color: var(--md-sys-color-on-primary-container); } .mdc-button.is-large:focus, .mdc-button.is-large .focus { - background-color: rgba(var(--md-sys-color-on-primary-container-rgb), var(--md-sys-state-focus-state-layer-opacity)); - box-shadow: var(--md-sys-elevation-2); + background-color: rgba(var(--md-sys-color-on-primary-container-rgb), var(--md-sys-state-focus-state-layer-opacity)); + box-shadow: var(--md-sys-elevation-2); color: var(--md-sys-color-on-primary-container); } .mdc-button.is-large:active, .mdc-button.is-large .active { - background-color: rgba(var(--md-sys-color-on-primary-container-rgb), var(--md-sys-state-pressed-state-layer-opacity)); - box-shadow: var(--md-sys-elevation-2); + background-color: rgba(var(--md-sys-color-on-primary-container-rgb), var(--md-sys-state-pressed-state-layer-opacity)); + box-shadow: var(--md-sys-elevation-2); } .mdc-button.is-large[disabled] { - background-color: rgba(var(--md-sys-color-on-surface-rgb),.12); - box-shadow: var(--md-sys-elevation-0); - color: rgba(var(--md-sys-color-on-surface-rgb),.38) + background-color: rgba(var(--md-sys-color-on-surface-rgb), 0.12); + box-shadow: var(--md-sys-elevation-0); + color: rgba(var(--md-sys-color-on-surface-rgb), 0.38); } diff --git a/plugin/assets/css/src/tokens/elevation.css b/plugin/assets/css/src/tokens/elevation.css index 6e9ca038..4064c31d 100644 --- a/plugin/assets/css/src/tokens/elevation.css +++ b/plugin/assets/css/src/tokens/elevation.css @@ -16,27 +16,27 @@ :root { --md-sys-elevation-level5-value: 12px; - --md-sys-elevation-level5-unit: 1px; - --md-sys-elevation-level5: 12px; - --md-sys-elevation-level4-value: 8px; - --md-sys-elevation-level4-unit: 1px; - --md-sys-elevation-level4: 8px; - --md-sys-elevation-level3-value: 6px; - --md-sys-elevation-level3-unit: 1px; - --md-sys-elevation-level3: 6px; - --md-sys-elevation-level2-value: 3px; - --md-sys-elevation-level2-unit: 1px; - --md-sys-elevation-level2: 3px; - --md-sys-elevation-level1-value: 1px; - --md-sys-elevation-level1-unit: 1px; - --md-sys-elevation-level1: 1px; - --md-sys-elevation-level0-value: 0px; - --md-sys-elevation-level0-unit: 1px; - --md-sys-elevation-level0: 0px; - --md-sys-elevation-0: 0px 0px 0px 0px rgba(var(--md-sys-color-shadow-rgb), .2), 0px 0px 0px 0px rgba(var(--md-sys-color-shadow-rgb), .14), 0px 0px 0px 0px rgba(var(--md-sys-color-shadow-rgb), .12); - --md-sys-elevation-1: 0px 3px 1px -2px rgba(var(--md-sys-color-shadow-rgb), .2), 0px 2px 2px 0px rgba(var(--md-sys-color-shadow-rgb), .14), 0px 1px 5px 0px rgba(var(--md-sys-color-shadow-rgb), .12); - --md-sys-elevation-2: 0px 2px 4px -1px rgba(var(--md-sys-color-shadow-rgb), .2), 0px 4px 5px 0px rgba(var(--md-sys-color-shadow-rgb), .14), 0px 1px 10px 0px rgba(var(--md-sys-color-shadow-rgb), .12); - --md-sys-elevation-3: 0px 5px 5px -3px rgba(var(--md-sys-color-shadow-rgb), .2), 0px 8px 10px 1px rgba(var(--md-sys-color-shadow-rgb), .14), 0px 3px 14px 2px rgba(var(--md-sys-color-shadow-rgb), .12); - --md-sys-elevation-4: 0px 5px 5px -3px rgba(var(--md-sys-color-shadow-rgb), .2), 0px 8px 10px 1px rgba(var(--md-sys-color-shadow-rgb), .14), 0px 3px 14px 2px rgba(var(--md-sys-color-shadow-rgb), .12); - --md-sys-elevation-5: 0px 8px 10px -6px rgba(var(--md-sys-color-shadow-rgb), .2), 0px 16px 24px 2px rgba(var(--md-sys-color-shadow-rgb), .14), 0px 6px 30px 5px rgba(var(--md-sys-color-shadow-rgb), .12) + --md-sys-elevation-level5-unit: 1px; + --md-sys-elevation-level5: 12px; + --md-sys-elevation-level4-value: 8px; + --md-sys-elevation-level4-unit: 1px; + --md-sys-elevation-level4: 8px; + --md-sys-elevation-level3-value: 6px; + --md-sys-elevation-level3-unit: 1px; + --md-sys-elevation-level3: 6px; + --md-sys-elevation-level2-value: 3px; + --md-sys-elevation-level2-unit: 1px; + --md-sys-elevation-level2: 3px; + --md-sys-elevation-level1-value: 1px; + --md-sys-elevation-level1-unit: 1px; + --md-sys-elevation-level1: 1px; + --md-sys-elevation-level0-value: 0; + --md-sys-elevation-level0-unit: 1px; + --md-sys-elevation-level0: 0; + --md-sys-elevation-0: 0 0 0 0 rgba(var(--md-sys-color-shadow-rgb), .2), 0 0 0 0 rgba(var(--md-sys-color-shadow-rgb), .14), 0 0 0 0 rgba(var(--md-sys-color-shadow-rgb), 0.12); + --md-sys-elevation-1: 0 3px 1px -2px rgba(var(--md-sys-color-shadow-rgb), .2), 0 2px 2px 0 rgba(var(--md-sys-color-shadow-rgb), .14), 0 1px 5px 0 rgba(var(--md-sys-color-shadow-rgb), 0.12); + --md-sys-elevation-2: 0 2px 4px -1px rgba(var(--md-sys-color-shadow-rgb), .2), 0 4px 5px 0 rgba(var(--md-sys-color-shadow-rgb), .14), 0 1px 10px 0 rgba(var(--md-sys-color-shadow-rgb), 0.12); + --md-sys-elevation-3: 0 5px 5px -3px rgba(var(--md-sys-color-shadow-rgb), .2), 0 8px 10px 1px rgba(var(--md-sys-color-shadow-rgb), .14), 0 3px 14px 2px rgba(var(--md-sys-color-shadow-rgb), 0.12); + --md-sys-elevation-4: 0 5px 5px -3px rgba(var(--md-sys-color-shadow-rgb), .2), 0 8px 10px 1px rgba(var(--md-sys-color-shadow-rgb), .14), 0 3px 14px 2px rgba(var(--md-sys-color-shadow-rgb), 0.12); + --md-sys-elevation-5: 0 8px 10px -6px rgba(var(--md-sys-color-shadow-rgb), .2), 0 16px 24px 2px rgba(var(--md-sys-color-shadow-rgb), .14), 0 6px 30px 5px rgba(var(--md-sys-color-shadow-rgb), 0 .12); } diff --git a/plugin/assets/css/src/tokens/opacity.css b/plugin/assets/css/src/tokens/opacity.css index b564d4c0..b81487bc 100644 --- a/plugin/assets/css/src/tokens/opacity.css +++ b/plugin/assets/css/src/tokens/opacity.css @@ -16,7 +16,7 @@ :root { --md-sys-state-dragged-state-layer-opacity: 0.16; - --md-sys-state-pressed-state-layer-opacity: 0.12; - --md-sys-state-focus-state-layer-opacity: 0.12; - --md-sys-state-hover-state-layer-opacity: 0.08 + --md-sys-state-pressed-state-layer-opacity: 0.12; + --md-sys-state-focus-state-layer-opacity: 0.12; + --md-sys-state-hover-state-layer-opacity: 0.08; } diff --git a/plugin/assets/css/src/tokens/shape.css b/plugin/assets/css/src/tokens/shape.css index e793c276..08349bb1 100644 --- a/plugin/assets/css/src/tokens/shape.css +++ b/plugin/assets/css/src/tokens/shape.css @@ -16,51 +16,51 @@ :root { --md-sys-shape-corner-full-family: 3px; - --md-sys-shape-corner-extra-large-top-family: 1px; - --md-sys-shape-corner-extra-large-top: 0px; - --md-sys-shape-corner-extra-large-top-top-left: 28px; - --md-sys-shape-corner-extra-large-top-top-right-unit: 1px; - --md-sys-shape-corner-extra-large-top-top-right: 28px; - --md-sys-shape-corner-extra-large-family: 1px; - --md-sys-shape-corner-extra-large-unit: 1px; - --md-sys-shape-corner-extra-large: 28px; - --md-sys-shape-corner-large-top-family: 1px; - --md-sys-shape-corner-large-top-unit: 1px; - --md-sys-shape-corner-large-top: 0px; - --md-sys-shape-corner-large-top-top-left-unit: 1px; - --md-sys-shape-corner-large-top-top-left: 16px; - --md-sys-shape-corner-large-top-top-right-unit: 1px; - --md-sys-shape-corner-large-top-top-right: 16px; - --md-sys-shape-corner-large-end-family: 1px; - --md-sys-shape-corner-large-end-unit: 1px; - --md-sys-shape-corner-large-end: 0px; - --md-sys-shape-corner-large-end-top-right-unit: 1px; - --md-sys-shape-corner-large-end-top-right: 16px; - --md-sys-shape-corner-large-end-bottom-right-unit: 1px; - --md-sys-shape-corner-large-end-bottom-right: 16px; - --md-sys-shape-corner-large-family: 1px; - --md-sys-shape-corner-large-unit: 1px; - --md-sys-shape-corner-large: 16px; - --md-sys-shape-corner-medium-family: 1px; - --md-sys-shape-corner-medium-unit: 1px; - --md-sys-shape-corner-medium: 12px; - --md-sys-shape-corner-small-family: 1px; - --md-sys-shape-corner-small-unit: 1px; - --md-sys-shape-corner-small: 8px; - --md-sys-shape-corner-extra-small-top-family: 1px; - --md-sys-shape-corner-extra-small-top-unit: 1px; - --md-sys-shape-corner-extra-small-top: 0px; - --md-sys-shape-corner-extra-small-top-top-left-unit: 1px; - --md-sys-shape-corner-extra-small-top-top-left: 4px; - --md-sys-shape-corner-extra-small-top-top-right-unit: 1px; - --md-sys-shape-corner-extra-small-top-top-right: 4px; - --md-sys-shape-corner-extra-small-family: 1px; - --md-sys-shape-corner-extra-small-unit: 1px; - --md-sys-shape-corner-extra-small: 4px; - --md-sys-shape-corner-none-family: 1px; - --md-sys-shape-corner-none-unit: 1px; - --md-sys-shape-corner-none: 0px; - --md-sys-shape-small: var(--md-sys-shape-corner-small); - --md-sys-shape-medium: var(--md-sys-shape-corner-medium); - --md-sys-shape-large: var(--md-sys-shape-corner-large); + --md-sys-shape-corner-extra-large-top-family: 1px; + --md-sys-shape-corner-extra-large-top: 0; + --md-sys-shape-corner-extra-large-top-top-left: 28px; + --md-sys-shape-corner-extra-large-top-top-right-unit: 1px; + --md-sys-shape-corner-extra-large-top-top-right: 28px; + --md-sys-shape-corner-extra-large-family: 1px; + --md-sys-shape-corner-extra-large-unit: 1px; + --md-sys-shape-corner-extra-large: 28px; + --md-sys-shape-corner-large-top-family: 1px; + --md-sys-shape-corner-large-top-unit: 1px; + --md-sys-shape-corner-large-top: 0; + --md-sys-shape-corner-large-top-top-left-unit: 1px; + --md-sys-shape-corner-large-top-top-left: 16px; + --md-sys-shape-corner-large-top-top-right-unit: 1px; + --md-sys-shape-corner-large-top-top-right: 16px; + --md-sys-shape-corner-large-end-family: 1px; + --md-sys-shape-corner-large-end-unit: 1px; + --md-sys-shape-corner-large-end: 0; + --md-sys-shape-corner-large-end-top-right-unit: 1px; + --md-sys-shape-corner-large-end-top-right: 16px; + --md-sys-shape-corner-large-end-bottom-right-unit: 1px; + --md-sys-shape-corner-large-end-bottom-right: 16px; + --md-sys-shape-corner-large-family: 1px; + --md-sys-shape-corner-large-unit: 1px; + --md-sys-shape-corner-large: 16px; + --md-sys-shape-corner-medium-family: 1px; + --md-sys-shape-corner-medium-unit: 1px; + --md-sys-shape-corner-medium: 12px; + --md-sys-shape-corner-small-family: 1px; + --md-sys-shape-corner-small-unit: 1px; + --md-sys-shape-corner-small: 8px; + --md-sys-shape-corner-extra-small-top-family: 1px; + --md-sys-shape-corner-extra-small-top-unit: 1px; + --md-sys-shape-corner-extra-small-top: 0; + --md-sys-shape-corner-extra-small-top-top-left-unit: 1px; + --md-sys-shape-corner-extra-small-top-top-left: 4px; + --md-sys-shape-corner-extra-small-top-top-right-unit: 1px; + --md-sys-shape-corner-extra-small-top-top-right: 4px; + --md-sys-shape-corner-extra-small-family: 1px; + --md-sys-shape-corner-extra-small-unit: 1px; + --md-sys-shape-corner-extra-small: 4px; + --md-sys-shape-corner-none-family: 1px; + --md-sys-shape-corner-none-unit: 1px; + --md-sys-shape-corner-none: 0; + --md-sys-shape-small: var(--md-sys-shape-corner-small); + --md-sys-shape-medium: var(--md-sys-shape-corner-medium); + --md-sys-shape-large: var(--md-sys-shape-corner-large); } diff --git a/plugin/assets/src/block-editor/blocks/button/edit.js b/plugin/assets/src/block-editor/blocks/button/edit.js index fc61255e..ebfd4e15 100644 --- a/plugin/assets/src/block-editor/blocks/button/edit.js +++ b/plugin/assets/src/block-editor/blocks/button/edit.js @@ -306,7 +306,7 @@ const ButtonEdit = ( { ) } - { type === 'text' && ( + { type === 'text' && size !== 'large' && ( <> { __( 'Variations', 'material-design' ) } From 0af91b8ca1c04178f6be030159a05c0b04f5974b Mon Sep 17 00:00:00 2001 From: Mario Aguiar Date: Thu, 25 Aug 2022 12:30:21 -0500 Subject: [PATCH 11/11] Large button is always filled --- plugin/assets/src/block-editor/blocks/button/edit.js | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/plugin/assets/src/block-editor/blocks/button/edit.js b/plugin/assets/src/block-editor/blocks/button/edit.js index ebfd4e15..40466505 100644 --- a/plugin/assets/src/block-editor/blocks/button/edit.js +++ b/plugin/assets/src/block-editor/blocks/button/edit.js @@ -201,6 +201,12 @@ const ButtonEdit = ( { } }, [ isSubmitButton ] ); // eslint-disable-line + useEffect( () => { + if ( 'large' === size ) { + setAttributes( { elevationStyle: 'filled' } ); + } + }, [ size ] ); //eslint-disable-line react-hooks/exhaustive-deps + const colorSettings = { text: { label: __( 'Text Color', 'material-design' ),