Skip to content

Commit

Permalink
Merge branch 'develop' into fix/pattern
Browse files Browse the repository at this point in the history
  • Loading branch information
emeaguiar committed Aug 26, 2022
2 parents 288e82a + 9821490 commit cecbaf9
Show file tree
Hide file tree
Showing 15 changed files with 301 additions and 35 deletions.
35 changes: 35 additions & 0 deletions plugin/assets/css/src/_frontend.css
Original file line number Diff line number Diff line change
@@ -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";
46 changes: 46 additions & 0 deletions plugin/assets/css/src/components/button.css
Original file line number Diff line number Diff line change
Expand Up @@ -665,3 +665,49 @@ 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;
gap: 0.25em;
height: 56px;
padding: 16px;
width: unset;
}

.mdc-button.is-large > i {
font-size: 24px;
height: auto;
margin-left: auto;
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);
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,
.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), 0.12);
box-shadow: var(--md-sys-elevation-0);
color: rgba(var(--md-sys-color-on-surface-rgb), 0.38);
}
10 changes: 0 additions & 10 deletions plugin/assets/css/src/components/material.css
Original file line number Diff line number Diff line change
Expand Up @@ -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 {

Expand Down
21 changes: 21 additions & 0 deletions plugin/assets/css/src/front-end-with-active-theme.css
Original file line number Diff line number Diff line change
@@ -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";
16 changes: 2 additions & 14 deletions plugin/assets/css/src/front-end.css
Original file line number Diff line number Diff line change
Expand Up @@ -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";
27 changes: 27 additions & 0 deletions plugin/assets/css/src/material-components-with-active-theme.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
/**
* 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/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";
2 changes: 1 addition & 1 deletion plugin/assets/css/src/material-components.css
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down
42 changes: 42 additions & 0 deletions plugin/assets/css/src/tokens/elevation.css
Original file line number Diff line number Diff line change
@@ -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: 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);
}
3 changes: 3 additions & 0 deletions plugin/assets/css/src/tokens/index.css
Original file line number Diff line number Diff line change
Expand Up @@ -16,3 +16,6 @@

@import "./palette.css";
@import "./colors.css";
@import "./shape.css";
@import "./opacity.css";
@import "./elevation.css";
22 changes: 22 additions & 0 deletions plugin/assets/css/src/tokens/opacity.css
Original file line number Diff line number Diff line change
@@ -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;
}
66 changes: 66 additions & 0 deletions plugin/assets/css/src/tokens/shape.css
Original file line number Diff line number Diff line change
@@ -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: 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);
}
14 changes: 11 additions & 3 deletions plugin/assets/src/block-editor/blocks/button/edit.js
Original file line number Diff line number Diff line change
Expand Up @@ -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' ),
Expand Down Expand Up @@ -306,7 +312,7 @@ const ButtonEdit = ( {
</>
) }

{ type === 'text' && (
{ type === 'text' && size !== 'large' && (
<>
<span>
{ __( 'Variations', 'material-design' ) }
Expand Down Expand Up @@ -359,7 +365,7 @@ const ButtonEdit = ( {
title={ __( 'Corner Styles', 'material-design' ) }
initialOpen={ true }
>
{ elevationStyle !== 'text' ? (
{ elevationStyle !== 'text' && size !== 'large' && (
<>
<div className="components-base-control">
{ __(
Expand Down Expand Up @@ -391,7 +397,9 @@ const ButtonEdit = ( {
blockName={ ButtonBlockName }
/>
</>
) : (
) }

{ ( elevationStyle === 'text' || size === 'large' ) && (
<p>
{ __(
'Current button style does not support rounded corners.',
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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;
};

Expand Down

0 comments on commit cecbaf9

Please sign in to comment.