Skip to content

Commit

Permalink
Merge pull request #433 from material-components/m3/patterns
Browse files Browse the repository at this point in the history 
Update patterns m3
  • Loading branch information
@emeaguiar
emeaguiar committed Aug 24, 2022
2 parents 7904ade + ea2827e commit e8f80f5
Show file tree
Hide file tree
Showing 17 changed files with 578 additions and 23 deletions.
10 changes: 5 additions & 5 deletions plugin/assets/css/src/components/list.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@
margin: 0;
padding: 8px 0;
list-style-type: none;
color: rgba(var(--md-sys-color-on-background-rgb, 0, 0, 0), 0.87);
color: var(--md-sys-color-on-background-rgb, rgba(0, 0, 0, 0.87));
}

.mdc-list:focus {
Expand All @@ -38,23 +38,23 @@
}

.mdc-list-item__secondary-text {
color: rgba(var(--md-sys-color-on-background-rgb, 0, 0, 0), 0.54);
color: var(--md-sys-color-on-background, rgba(0, 0, 0, 0.54));
}

.mdc-list-item__graphic {
background-color: transparent;
}

.mdc-list-item__graphic {
color: rgba(var(--md-sys-color-on-background-rgb, 0, 0, 0), 0.38);
color: var(--md-sys-color-on-background, rgba(0, 0, 0, 0.38));
}

.mdc-list-item__meta {
color: rgba(var(--md-sys-color-on-background-rgb, 0, 0, 0), 0.38);
color: var(--md-sys-color-on-background, rgba(0, 0, 0, 0.38));
}

.mdc-list-group__subheader {
color: rgba(var(--md-sys-color-on-background-rgb, 0, 0, 0), 0.87);
color: var(--md-sys-color-on-background, rgba(0, 0, 0, 0.87));
}

.mdc-list-item--disabled .mdc-list-item__text {
Expand Down
3 changes: 2 additions & 1 deletion plugin/assets/src/block-editor/blocks/buttons/block.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,5 +6,6 @@
"anchor": true,
"align": true,
"alignWide": false
}
},
"apiVersion": 2
}
4 changes: 2 additions & 2 deletions plugin/assets/src/customizer/utils.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -124,7 +124,7 @@ export const sanitizeControlId = id =>
*
* @return {string} Hex color
*/
export function randomColor() {
export const randomColor = () => {
let hexColor = Math.floor( Math.random() * MAX_HEX_COLORS ).toString( 16 );

// Pad to make sure it's 6 characters.
Expand All @@ -133,4 +133,4 @@ export function randomColor() {
}

return '#' + hexColor;
}
};
40 changes: 39 additions & 1 deletion plugin/php/block-patterns/call-to-action-benefits.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,45 @@

return [
'title' => __( 'Call to action (CTA) + Benefits', 'material-design' ),
'content' => "<!-- wp:group -->\n<div class=\"wp-block-group\"><!-- wp:heading {\"textAlign\":\"center\",\"align\":\"wide\"} -->\n<h2 class=\"alignwide has-text-align-center\">Call to action</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph {\"align\":\"center\"} -->\n<p class=\"has-text-align-center\">Perform this action in no time, satisfaction guaranteed.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:material/buttons {\"align\":\"center\"} -->\n<div class=\"wp-block-material-buttons aligncenter\"><!-- wp:material/button {\"iconPosition\":\"none\",\"size\":\"large\",\"style\":\"elevated\"} -->\n<div class=\"wp-block-material-button\" id=\"block-material-button-17\"><button class=\"mdc-button label-large mdc-button--elevated is-large\"><div class=\"mdc-button__ripple\"></div><span class=\"mdc-button__label\">Call to action</span></button></div>\n<!-- /wp:material/button --></div>\n<!-- /wp:material/buttons -->\n\n<!-- wp:spacer {\"height\":16} -->\n<div style=\"height:16px\" aria-hidden=\"true\" class=\"wp-block-spacer\"></div>\n<!-- /wp:spacer -->\n\n<!-- wp:columns -->\n<div class=\"wp-block-columns\"><!-- wp:column -->\n<div class=\"wp-block-column\"><!-- wp:material/list -->\n<div class=\"wp-block-material-list\"><ul class=\"mdc-list\"><li class=\"mdc-list-item\"><span class=\"mdc-list-item__graphic material-icons\">spa</span><span class=\"mdc-list-item__text\"><span class=\"mdc-list-item__primary-text\">Benefit 1</span></span></li></ul></div>\n<!-- /wp:material/list --></div>\n<!-- /wp:column -->\n\n<!-- wp:column -->\n<div class=\"wp-block-column\"><!-- wp:material/list -->\n<div class=\"wp-block-material-list\"><ul class=\"mdc-list\"><li class=\"mdc-list-item\"><span class=\"mdc-list-item__graphic material-icons\">favorite</span><span class=\"mdc-list-item__text\"><span class=\"mdc-list-item__primary-text\">Benefit 2</span></span></li></ul></div>\n<!-- /wp:material/list --></div>\n<!-- /wp:column -->\n\n<!-- wp:column -->\n<div class=\"wp-block-column\"><!-- wp:material/list -->\n<div class=\"wp-block-material-list\"><ul class=\"mdc-list\"><li class=\"mdc-list-item\"><span class=\"mdc-list-item__graphic material-icons\">check_circle</span><span class=\"mdc-list-item__text\"><span class=\"mdc-list-item__primary-text\">Benefit 3</span></span></li></ul></div>\n<!-- /wp:material/list --></div>\n<!-- /wp:column --></div>\n<!-- /wp:columns --></div>\n<!-- /wp:group -->",
'content' => '<!-- wp:group -->
<div class="wp-block-group"><!-- wp:heading {"textAlign":"center","align":"wide"} -->
<h2 class="alignwide has-text-align-center">Call to action</h2>
<!-- /wp:heading -->
<!-- wp:paragraph {"align":"center"} -->
<p class="has-text-align-center">Perform this action in no time, satisfaction guaranteed.</p>
<!-- /wp:paragraph -->
<!-- wp:material/buttons {"align":"center"} -->
<div class="wp-block-material-buttons aligncenter"><!-- wp:material/button {"style":"elevated","iconPosition":"none","size":"large","elevationStyle":"filled"} -->
<div class="wp-block-material-button" id="block-material-button-17"><button class="mdc-button label-large mdc-button--filled is-large"><div class="mdc-button__ripple"></div><span class="mdc-button__label">Call to action</span></button></div>
<!-- /wp:material/button --></div>
<!-- /wp:material/buttons -->
<!-- wp:spacer {"height":"16px"} -->
<div style="height:16px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->
<!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:material/list -->
<div class="wp-block-material-list"><ul class="mdc-list"><li class="mdc-list-item"><span class="mdc-list-item__graphic material-icons">spa</span><span class="mdc-list-item__text"><span class="mdc-list-item__primary-text">Benefit 1</span></span></li></ul></div>
<!-- /wp:material/list --></div>
<!-- /wp:column -->
<!-- wp:column -->
<div class="wp-block-column"><!-- wp:material/list -->
<div class="wp-block-material-list"><ul class="mdc-list"><li class="mdc-list-item"><span class="mdc-list-item__graphic material-icons">favorite</span><span class="mdc-list-item__text"><span class="mdc-list-item__primary-text">Benefit 2</span></span></li></ul></div>
<!-- /wp:material/list --></div>
<!-- /wp:column -->
<!-- wp:column -->
<div class="wp-block-column"><!-- wp:material/list -->
<div class="wp-block-material-list"><ul class="mdc-list"><li class="mdc-list-item"><span class="mdc-list-item__graphic material-icons">check_circle</span><span class="mdc-list-item__text"><span class="mdc-list-item__primary-text">Benefit 3</span></span></li></ul></div>
<!-- /wp:material/list --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group -->',
'viewportWidth' => 800,
'categories' => [ 'material', 'buttons', 'header' ],
'description' => __( 'Call to action + benefits pattern.', 'material-design' ),
Expand Down
84 changes: 83 additions & 1 deletion plugin/php/block-patterns/call-to-action-features.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,89 @@

return [
'title' => __( 'Features with icon + Call to action (CTA)', 'material-design' ),
'content' => "<!-- wp:group {\"align\":\"wide\"} -->\n<div class=\"wp-block-group alignwide\"><div class=\"wp-block-group__inner-container\"><!-- wp:heading {\"textAlign\":\"center\"} -->\n<h2 class=\"has-text-align-center\">Features</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph {\"align\":\"center\",\"fontSize\":\"medium\"} -->\n<p class=\"has-text-align-center has-medium-font-size\">Lorem ipsum dolor sit amet consectetur adipiscing</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:columns -->\n<div class=\"wp-block-columns\"><!-- wp:column -->\n<div class=\"wp-block-column\"><!-- wp:material/icon {\"iconSize\":\"48\",\"align\":\"center\"} -->\n<div class=\"wp-block-material-icon has-text-align-center\"><i class=\"material-icons md-48\">security</i></div>\n<!-- /wp:material/icon -->\n\n<!-- wp:heading {\"textAlign\":\"center\",\"level\":5} -->\n<h5 class=\"has-text-align-center\">Feature 1</h5>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph {\"align\":\"center\"} -->\n<p class=\"has-text-align-center\">Arcu fusce convallis quam pharetra suspendisse porta auctor, fames quis sollicitudin torquent tempus ullamcor.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:material/buttons {\"align\":\"center\"} -->\n<div class=\"wp-block-material-buttons aligncenter\"><!-- wp:material/button {\"iconPosition\":\"none\", \"style\":\"elevated\"} -->\n<div class=\"wp-block-material-button\" id=\"block-material-button-0\"><button class=\"mdc-button label-large mdc-button--elevated\"><div class=\"mdc-button__ripple\"></div><span class=\"mdc-button__label\">Call to action</span></button></div>\n<!-- /wp:material/button --></div>\n<!-- /wp:material/buttons -->\n\n<!-- wp:spacer {\"height\":30} -->\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"></div>\n<!-- /wp:spacer --></div>\n<!-- /wp:column -->\n\n<!-- wp:column -->\n<div class=\"wp-block-column\"><!-- wp:material/icon {\"iconSize\":\"48\",\"align\":\"center\"} -->\n<div class=\"wp-block-material-icon has-text-align-center\"><i class=\"material-icons md-48\">web</i></div>\n<!-- /wp:material/icon -->\n\n<!-- wp:heading {\"textAlign\":\"center\",\"level\":5} -->\n<h5 class=\"has-text-align-center\">Feature 2</h5>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph {\"align\":\"center\"} -->\n<p class=\"has-text-align-center\">Quis eros molestie libero porttitor convallis, integer sed ullamcorper nunc pharetra cras vitae nisl inceptos.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:material/buttons {\"align\":\"center\"} -->\n<div class=\"wp-block-material-buttons aligncenter\"><!-- wp:material/button {\"iconPosition\":\"none\",\"style\":\"elevated\"} -->\n<div class=\"wp-block-material-button\" id=\"block-material-button-1\"><button class=\"mdc-button label-large mdc-button--elevated\"><div class=\"mdc-button__ripple\"></div><span class=\"mdc-button__label\">Call to action</span></button></div>\n<!-- /wp:material/button --></div>\n<!-- /wp:material/buttons -->\n\n<!-- wp:spacer {\"height\":30} -->\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"></div>\n<!-- /wp:spacer --></div>\n<!-- /wp:column -->\n\n<!-- wp:column -->\n<div class=\"wp-block-column\"><!-- wp:material/icon {\"iconSize\":\"48\",\"align\":\"center\"} -->\n<div class=\"wp-block-material-icon has-text-align-center\"><i class=\"material-icons md-48\">offline_bolt</i></div>\n<!-- /wp:material/icon -->\n\n<!-- wp:heading {\"textAlign\":\"center\",\"level\":5} -->\n<h5 class=\"has-text-align-center\">Feature 3</h5>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph {\"align\":\"center\"} -->\n<p class=\"has-text-align-center\">Placerat aptent ullamcorper vestibulum netus magnis eros id mauris, curae rutrum inceptos eleifend.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:material/buttons {\"align\":\"center\"} -->\n<div class=\"wp-block-material-buttons aligncenter\"><!-- wp:material/button {\"iconPosition\":\"none\",\"style\":\"elevated\"} -->\n<div class=\"wp-block-material-button\" id=\"block-material-button-2\"><button class=\"mdc-button label-large mdc-button--elevated\"><div class=\"mdc-button__ripple\"></div><span class=\"mdc-button__label\">Call to Action</span></button></div>\n<!-- /wp:material/button --></div>\n<!-- /wp:material/buttons -->\n\n<!-- wp:spacer {\"height\":30} -->\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"></div>\n<!-- /wp:spacer --></div>\n<!-- /wp:column --></div>\n<!-- /wp:columns --></div></div>\n<!-- /wp:group -->",
'content' => '<!-- wp:group {"align":"wide"} -->
<div class="wp-block-group alignwide"><!-- wp:heading {"textAlign":"center"} -->
<h2 class="has-text-align-center">Features</h2>
<!-- /wp:heading -->
<!-- wp:paragraph {"align":"center","fontSize":"medium"} -->
<p class="has-text-align-center has-medium-font-size">Lorem ipsum dolor sit amet consectetur adipiscing</p>
<!-- /wp:paragraph -->
<!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:material/icon {"iconSize":"48","align":"center"} -->
<div class="wp-block-material-icon has-text-align-center"><i class="material-icons md-48">security</i></div>
<!-- /wp:material/icon -->
<!-- wp:heading {"textAlign":"center","level":5} -->
<h5 class="has-text-align-center">Feature 1</h5>
<!-- /wp:heading -->
<!-- wp:paragraph {"align":"center"} -->
<p class="has-text-align-center">Arcu fusce convallis quam pharetra suspendisse porta auctor, fames quis sollicitudin torquent tempus ullamcor.</p>
<!-- /wp:paragraph -->
<!-- wp:material/buttons {"align":"center"} -->
<div class="wp-block-material-buttons aligncenter"><!-- wp:material/button {"style":"elevated","iconPosition":"none","elevationStyle":"filled"} -->
<div class="wp-block-material-button" id="block-material-button-0"><button class="mdc-button label-large mdc-button--filled"><div class="mdc-button__ripple"></div><span class="mdc-button__label">Call to action</span></button></div>
<!-- /wp:material/button --></div>
<!-- /wp:material/buttons -->
<!-- wp:spacer {"height":"30px"} -->
<div style="height:30px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer --></div>
<!-- /wp:column -->
<!-- wp:column -->
<div class="wp-block-column"><!-- wp:material/icon {"iconSize":"48","align":"center"} -->
<div class="wp-block-material-icon has-text-align-center"><i class="material-icons md-48">web</i></div>
<!-- /wp:material/icon -->
<!-- wp:heading {"textAlign":"center","level":5} -->
<h5 class="has-text-align-center">Feature 2</h5>
<!-- /wp:heading -->
<!-- wp:paragraph {"align":"center"} -->
<p class="has-text-align-center">Quis eros molestie libero porttitor convallis, integer sed ullamcorper nunc pharetra cras vitae nisl inceptos.</p>
<!-- /wp:paragraph -->
<!-- wp:material/buttons {"align":"center"} -->
<div class="wp-block-material-buttons aligncenter"><!-- wp:material/button {"style":"elevated","iconPosition":"none","elevationStyle":"filled"} -->
<div class="wp-block-material-button" id="block-material-button-1"><button class="mdc-button label-large mdc-button--filled"><div class="mdc-button__ripple"></div><span class="mdc-button__label">Call to action</span></button></div>
<!-- /wp:material/button --></div>
<!-- /wp:material/buttons -->
<!-- wp:spacer {"height":"30px"} -->
<div style="height:30px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer --></div>
<!-- /wp:column -->
<!-- wp:column -->
<div class="wp-block-column"><!-- wp:material/icon {"iconSize":"48","align":"center"} -->
<div class="wp-block-material-icon has-text-align-center"><i class="material-icons md-48">offline_bolt</i></div>
<!-- /wp:material/icon -->
<!-- wp:heading {"textAlign":"center","level":5} -->
<h5 class="has-text-align-center">Feature 3</h5>
<!-- /wp:heading -->
<!-- wp:paragraph {"align":"center"} -->
<p class="has-text-align-center">Placerat aptent ullamcorper vestibulum netus magnis eros id mauris, curae rutrum inceptos eleifend.</p>
<!-- /wp:paragraph -->
<!-- wp:material/buttons {"align":"center"} -->
<div class="wp-block-material-buttons aligncenter"><!-- wp:material/button {"style":"elevated","iconPosition":"none","elevationStyle":"filled"} -->
<div class="wp-block-material-button" id="block-material-button-2"><button class="mdc-button label-large mdc-button--filled"><div class="mdc-button__ripple"></div><span class="mdc-button__label">Call to Action</span></button></div>
<!-- /wp:material/button --></div>
<!-- /wp:material/buttons -->
<!-- wp:spacer {"height":"30px"} -->
<div style="height:30px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group -->',
'viewportWidth' => 800,
'categories' => [ 'material', 'buttons', 'header' ],
'description' => __( '3 features with icon + call to action', 'material-design' ),
Expand Down
20 changes: 19 additions & 1 deletion plugin/php/block-patterns/call-to-action.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,25 @@

return [
'title' => __( 'Call to action(CTA)', 'material-design' ),
'content' => "<!-- wp:group {\"align\":\"full\"} -->\n<div class=\"wp-block-group alignfull\"><!-- wp:heading {\"textAlign\":\"center\",\"align\":\"wide\"} -->\n<h2 class=\"alignwide has-text-align-center\">Call to action</h2>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph {\"align\":\"center\"} -->\n<p class=\"has-text-align-center\">Perform this action in no time, satisfaction guaranteed.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:material/buttons {\"align\":\"center\"} -->\n<div class=\"wp-block-material-buttons aligncenter\"><!-- wp:material/button {\"iconPosition\":\"none\",\"size\":\"large\",\"style\":\"elevated\"} -->\n<div class=\"wp-block-material-button\" id=\"block-material-button-17\"><button class=\"mdc-button label-large mdc-button--elevated is-large\"><div class=\"mdc-button__ripple\"></div><span class=\"mdc-button__label\">Call to action</span></button></div>\n<!-- /wp:material/button --></div>\n<!-- /wp:material/buttons -->\n\n<!-- wp:spacer {\"height\":50} -->\n<div style=\"height:50px\" aria-hidden=\"true\" class=\"wp-block-spacer\"></div>\n<!-- /wp:spacer --></div>\n<!-- /wp:group -->",
'content' => '<!-- wp:group {"align":"full"} -->
<div class="wp-block-group alignfull"><!-- wp:heading {"textAlign":"center","align":"wide"} -->
<h2 class="alignwide has-text-align-center">Call to action</h2>
<!-- /wp:heading -->
<!-- wp:paragraph {"align":"center"} -->
<p class="has-text-align-center">Perform this action in no time, satisfaction guaranteed.</p>
<!-- /wp:paragraph -->
<!-- wp:material/buttons {"align":"center"} -->
<div class="wp-block-material-buttons aligncenter"><!-- wp:material/button {"style":"elevated","iconPosition":"none","size":"large","elevationStyle":"filled"} -->
<div class="wp-block-material-button" id="block-material-button-17"><button class="mdc-button label-large mdc-button--filled is-large"><div class="mdc-button__ripple"></div><span class="mdc-button__label">Call to action</span></button></div>
<!-- /wp:material/button --></div>
<!-- /wp:material/buttons -->
<!-- wp:spacer {"height":"50px"} -->
<div style="height:50px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer --></div>
<!-- /wp:group -->',
'viewportWidth' => 800,
'categories' => [ 'material', 'buttons', 'header' ],
'description' => __( 'Call to action pattern.', 'material-design' ),
Expand Down
Loading

0 comments on commit e8f80f5

Please sign in to comment.