Skip to content

Commit e8f80f5

Browse files
author
Mario Aguiar
authored
Merge pull request #433 from material-components/m3/patterns
Update patterns m3
2 parents 7904ade + ea2827e commit e8f80f5

File tree

17 files changed

+578
-23
lines changed

17 files changed

+578
-23
lines changed

‎plugin/assets/css/src/components/list.css‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@
2626
margin: 0;
2727
padding: 8px 0;
2828
list-style-type: none;
29-
color: rgba(var(--md-sys-color-on-background-rgb, 0, 0, 0), 0.87);
29+
color: var(--md-sys-color-on-background-rgb, rgba(0, 0, 0, 0.87));
3030
}
3131

3232
.mdc-list:focus {
@@ -38,23 +38,23 @@
3838
}
3939

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

4444
.mdc-list-item__graphic {
4545
background-color: transparent;
4646
}
4747

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

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

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

6060
.mdc-list-item--disabled .mdc-list-item__text {

‎plugin/assets/src/block-editor/blocks/buttons/block.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,5 +6,6 @@
66
"anchor": true,
77
"align": true,
88
"alignWide": false
9-
}
9+
},
10+
"apiVersion": 2
1011
}

‎plugin/assets/src/customizer/utils.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -124,7 +124,7 @@ export const sanitizeControlId = id =>
124124
*
125125
* @return {string} Hex color
126126
*/
127-
export function randomColor() {
127+
export const randomColor = () => {
128128
let hexColor = Math.floor( Math.random() * MAX_HEX_COLORS ).toString( 16 );
129129

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

135135
return '#' + hexColor;
136-
}
136+
};

‎plugin/php/block-patterns/call-to-action-benefits.php‎

Lines changed: 39 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,45 @@
2525

2626
return [
2727
'title' => __( 'Call to action (CTA) + Benefits', 'material-design' ),
28-
'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 -->",
28+
'content' => '<!-- wp:group -->
29+
<div class="wp-block-group"><!-- wp:heading {"textAlign":"center","align":"wide"} -->
30+
<h2 class="alignwide has-text-align-center">Call to action</h2>
31+
<!-- /wp:heading -->
32+
33+
<!-- wp:paragraph {"align":"center"} -->
34+
<p class="has-text-align-center">Perform this action in no time, satisfaction guaranteed.</p>
35+
<!-- /wp:paragraph -->
36+
37+
<!-- wp:material/buttons {"align":"center"} -->
38+
<div class="wp-block-material-buttons aligncenter"><!-- wp:material/button {"style":"elevated","iconPosition":"none","size":"large","elevationStyle":"filled"} -->
39+
<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>
40+
<!-- /wp:material/button --></div>
41+
<!-- /wp:material/buttons -->
42+
43+
<!-- wp:spacer {"height":"16px"} -->
44+
<div style="height:16px" aria-hidden="true" class="wp-block-spacer"></div>
45+
<!-- /wp:spacer -->
46+
47+
<!-- wp:columns -->
48+
<div class="wp-block-columns"><!-- wp:column -->
49+
<div class="wp-block-column"><!-- wp:material/list -->
50+
<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>
51+
<!-- /wp:material/list --></div>
52+
<!-- /wp:column -->
53+
54+
<!-- wp:column -->
55+
<div class="wp-block-column"><!-- wp:material/list -->
56+
<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>
57+
<!-- /wp:material/list --></div>
58+
<!-- /wp:column -->
59+
60+
<!-- wp:column -->
61+
<div class="wp-block-column"><!-- wp:material/list -->
62+
<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>
63+
<!-- /wp:material/list --></div>
64+
<!-- /wp:column --></div>
65+
<!-- /wp:columns --></div>
66+
<!-- /wp:group -->',
2967
'viewportWidth' => 800,
3068
'categories' => [ 'material', 'buttons', 'header' ],
3169
'description' => __( 'Call to action + benefits pattern.', 'material-design' ),

‎plugin/php/block-patterns/call-to-action-features.php‎

Lines changed: 83 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,89 @@
2525

2626
return [
2727
'title' => __( 'Features with icon + Call to action (CTA)', 'material-design' ),
28-
'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 -->",
28+
'content' => '<!-- wp:group {"align":"wide"} -->
29+
<div class="wp-block-group alignwide"><!-- wp:heading {"textAlign":"center"} -->
30+
<h2 class="has-text-align-center">Features</h2>
31+
<!-- /wp:heading -->
32+
33+
<!-- wp:paragraph {"align":"center","fontSize":"medium"} -->
34+
<p class="has-text-align-center has-medium-font-size">Lorem ipsum dolor sit amet consectetur adipiscing</p>
35+
<!-- /wp:paragraph -->
36+
37+
<!-- wp:columns -->
38+
<div class="wp-block-columns"><!-- wp:column -->
39+
<div class="wp-block-column"><!-- wp:material/icon {"iconSize":"48","align":"center"} -->
40+
<div class="wp-block-material-icon has-text-align-center"><i class="material-icons md-48">security</i></div>
41+
<!-- /wp:material/icon -->
42+
43+
<!-- wp:heading {"textAlign":"center","level":5} -->
44+
<h5 class="has-text-align-center">Feature 1</h5>
45+
<!-- /wp:heading -->
46+
47+
<!-- wp:paragraph {"align":"center"} -->
48+
<p class="has-text-align-center">Arcu fusce convallis quam pharetra suspendisse porta auctor, fames quis sollicitudin torquent tempus ullamcor.</p>
49+
<!-- /wp:paragraph -->
50+
51+
<!-- wp:material/buttons {"align":"center"} -->
52+
<div class="wp-block-material-buttons aligncenter"><!-- wp:material/button {"style":"elevated","iconPosition":"none","elevationStyle":"filled"} -->
53+
<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>
54+
<!-- /wp:material/button --></div>
55+
<!-- /wp:material/buttons -->
56+
57+
<!-- wp:spacer {"height":"30px"} -->
58+
<div style="height:30px" aria-hidden="true" class="wp-block-spacer"></div>
59+
<!-- /wp:spacer --></div>
60+
<!-- /wp:column -->
61+
62+
<!-- wp:column -->
63+
<div class="wp-block-column"><!-- wp:material/icon {"iconSize":"48","align":"center"} -->
64+
<div class="wp-block-material-icon has-text-align-center"><i class="material-icons md-48">web</i></div>
65+
<!-- /wp:material/icon -->
66+
67+
<!-- wp:heading {"textAlign":"center","level":5} -->
68+
<h5 class="has-text-align-center">Feature 2</h5>
69+
<!-- /wp:heading -->
70+
71+
<!-- wp:paragraph {"align":"center"} -->
72+
<p class="has-text-align-center">Quis eros molestie libero porttitor convallis, integer sed ullamcorper nunc pharetra cras vitae nisl inceptos.</p>
73+
<!-- /wp:paragraph -->
74+
75+
<!-- wp:material/buttons {"align":"center"} -->
76+
<div class="wp-block-material-buttons aligncenter"><!-- wp:material/button {"style":"elevated","iconPosition":"none","elevationStyle":"filled"} -->
77+
<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>
78+
<!-- /wp:material/button --></div>
79+
<!-- /wp:material/buttons -->
80+
81+
<!-- wp:spacer {"height":"30px"} -->
82+
<div style="height:30px" aria-hidden="true" class="wp-block-spacer"></div>
83+
<!-- /wp:spacer --></div>
84+
<!-- /wp:column -->
85+
86+
<!-- wp:column -->
87+
<div class="wp-block-column"><!-- wp:material/icon {"iconSize":"48","align":"center"} -->
88+
<div class="wp-block-material-icon has-text-align-center"><i class="material-icons md-48">offline_bolt</i></div>
89+
<!-- /wp:material/icon -->
90+
91+
<!-- wp:heading {"textAlign":"center","level":5} -->
92+
<h5 class="has-text-align-center">Feature 3</h5>
93+
<!-- /wp:heading -->
94+
95+
<!-- wp:paragraph {"align":"center"} -->
96+
<p class="has-text-align-center">Placerat aptent ullamcorper vestibulum netus magnis eros id mauris, curae rutrum inceptos eleifend.</p>
97+
<!-- /wp:paragraph -->
98+
99+
<!-- wp:material/buttons {"align":"center"} -->
100+
<div class="wp-block-material-buttons aligncenter"><!-- wp:material/button {"style":"elevated","iconPosition":"none","elevationStyle":"filled"} -->
101+
<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>
102+
<!-- /wp:material/button --></div>
103+
<!-- /wp:material/buttons -->
104+
105+
<!-- wp:spacer {"height":"30px"} -->
106+
<div style="height:30px" aria-hidden="true" class="wp-block-spacer"></div>
107+
<!-- /wp:spacer --></div>
108+
<!-- /wp:column --></div>
109+
<!-- /wp:columns --></div>
110+
<!-- /wp:group -->',
29111
'viewportWidth' => 800,
30112
'categories' => [ 'material', 'buttons', 'header' ],
31113
'description' => __( '3 features with icon + call to action', 'material-design' ),

‎plugin/php/block-patterns/call-to-action.php‎

Lines changed: 19 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,25 @@
2525

2626
return [
2727
'title' => __( 'Call to action(CTA)', 'material-design' ),
28-
'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 -->",
28+
'content' => '<!-- wp:group {"align":"full"} -->
29+
<div class="wp-block-group alignfull"><!-- wp:heading {"textAlign":"center","align":"wide"} -->
30+
<h2 class="alignwide has-text-align-center">Call to action</h2>
31+
<!-- /wp:heading -->
32+
33+
<!-- wp:paragraph {"align":"center"} -->
34+
<p class="has-text-align-center">Perform this action in no time, satisfaction guaranteed.</p>
35+
<!-- /wp:paragraph -->
36+
37+
<!-- wp:material/buttons {"align":"center"} -->
38+
<div class="wp-block-material-buttons aligncenter"><!-- wp:material/button {"style":"elevated","iconPosition":"none","size":"large","elevationStyle":"filled"} -->
39+
<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>
40+
<!-- /wp:material/button --></div>
41+
<!-- /wp:material/buttons -->
42+
43+
<!-- wp:spacer {"height":"50px"} -->
44+
<div style="height:50px" aria-hidden="true" class="wp-block-spacer"></div>
45+
<!-- /wp:spacer --></div>
46+
<!-- /wp:group -->',
2947
'viewportWidth' => 800,
3048
'categories' => [ 'material', 'buttons', 'header' ],
3149
'description' => __( 'Call to action pattern.', 'material-design' ),

0 commit comments

Comments
 (0)