-
{ title }
+
{ title }
{ isDisabled && (
+
{ sprintf(
// translators: %s: last updated date.
__(
@@ -151,7 +151,7 @@ const Updater = ( {
) }
{ versionAvailable && (
-
+
{ sprintf(
// translators: %s: version number.
__(
diff --git a/plugin/assets/src/types/global.d.ts b/plugin/assets/src/types/global.d.ts
index 81cf40e38..501ad1ff6 100644
--- a/plugin/assets/src/types/global.d.ts
+++ b/plugin/assets/src/types/global.d.ts
@@ -1,10 +1,17 @@
export {};
-
+import { WP } from 'wp-types';
declare global {
interface Window {
materialDesignWizard: materialDesignWizard;
- wp: any;
+ wp: WP;
_wpCustomizeSettings: any;
+ material_m3_migration_color:{
+ nonce: string;
+ primaryColor: string;
+ },
+ material_m3_migration_notice: {
+ nonce: string;
+ }
}
}
diff --git a/plugin/assets/src/wizard/components/content/addons.js b/plugin/assets/src/wizard/components/content/addons.js
index 820716382..b37e4ac4c 100644
--- a/plugin/assets/src/wizard/components/content/addons.js
+++ b/plugin/assets/src/wizard/components/content/addons.js
@@ -32,7 +32,7 @@ import getConfig from '../../../admin/get-config';
const Addons = () => {
return (
-
+
{ __( 'Install addons', 'material-design' ) }
@@ -43,7 +43,7 @@ const Addons = () => {
switch={ ADDONS.THEME }
disabled={ 'ok' === getConfig( 'themeStatus' ) }
>
-
+
{ __( 'Material Design Theme', 'material-design' ) }
@@ -63,7 +63,7 @@ const Addons = () => {
) }addon-quick-start-examples.png` }
switch={ ADDONS.DEMO }
>
-
+
{ __( 'Quick Start Examples', 'material-design' ) }
diff --git a/plugin/assets/src/wizard/components/content/welcome.js b/plugin/assets/src/wizard/components/content/welcome.js
index b290b2e6f..06bc87103 100644
--- a/plugin/assets/src/wizard/components/content/welcome.js
+++ b/plugin/assets/src/wizard/components/content/welcome.js
@@ -35,7 +35,7 @@ const Welcome = () => {
image={ `${ getConfig( 'assetsPath' ) }welcome.png` }
imageSpan="5"
>
-
+
{ __( 'Start building', 'material-design' ) }
diff --git a/plugin/assets/src/wizard/components/content/work.js b/plugin/assets/src/wizard/components/content/work.js
index 9b5733d6f..1349a5bf1 100644
--- a/plugin/assets/src/wizard/components/content/work.js
+++ b/plugin/assets/src/wizard/components/content/work.js
@@ -38,7 +38,7 @@ const Work = () => {
) }complete-build-with-blocks.png` }
imageSpan="5"
>
-
+
{ __( 'Congrats!', 'material-design' ) }
diff --git a/plugin/assets/src/wizard/components/header/index.js b/plugin/assets/src/wizard/components/header/index.js
index f4e52aa2f..0e66e312b 100644
--- a/plugin/assets/src/wizard/components/header/index.js
+++ b/plugin/assets/src/wizard/components/header/index.js
@@ -34,7 +34,7 @@ const Header = () => {
{
-
+
{ __( 'Material Design for WordPress', 'material-design' ) }
diff --git a/plugin/material-design.php b/plugin/material-design.php
index 1e0d50ce5..d440e6e7a 100644
--- a/plugin/material-design.php
+++ b/plugin/material-design.php
@@ -3,8 +3,8 @@
* Plugin Name: Material Design
* Plugin URI: https://github.com/material-components/material-design-for-wordpress
* Description: The official Material Design plugin for WordPress. Customize your site’s navigation, colors, typography, and shapes, use Material Components, and choose from over 1,000 Google Fonts and Material Design icons. From the team behind Google’s open-source design system.
- * Version: 0.6.1
- * Requires at least: 5.6
+ * Version: 0.7.0
+ * Requires at least: 5.9
* Requires PHP: 5.6.20+
* Author: Material Design
* Author URI: http://material.io
diff --git a/plugin/php/block-patterns/call-to-action-benefits.php b/plugin/php/block-patterns/call-to-action-benefits.php
index 13ed9a87b..e6a80896b 100644
--- a/plugin/php/block-patterns/call-to-action-benefits.php
+++ b/plugin/php/block-patterns/call-to-action-benefits.php
@@ -25,7 +25,45 @@
return [
'title' => __( 'Call to action (CTA) + Benefits', '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
\n
\n",
+ 'content' => '
+
+
Call to action
+
+
+
+
Perform this action in no time, satisfaction guaranteed.
+
+
+
+
+
+
+
+
+
+
+
+
+
+',
'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 0b7808379..24f58ffb8 100644
--- a/plugin/php/block-patterns/call-to-action-features.php
+++ b/plugin/php/block-patterns/call-to-action-features.php
@@ -25,7 +25,89 @@
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
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
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",
+ 'content' => '
+
+
Features
+
+
+
+
Lorem ipsum dolor sit amet consectetur adipiscing
+
+
+
+
+
+
security
+
+
+
+
Feature 1
+
+
+
+
Arcu fusce convallis quam pharetra suspendisse porta auctor, fames quis sollicitudin torquent tempus ullamcor.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
web
+
+
+
+
Feature 2
+
+
+
+
Quis eros molestie libero porttitor convallis, integer sed ullamcorper nunc pharetra cras vitae nisl inceptos.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
offline_bolt
+
+
+
+
Feature 3
+
+
+
+
Placerat aptent ullamcorper vestibulum netus magnis eros id mauris, curae rutrum inceptos eleifend.
+
+
+
+
+
+
+
+
+
+
+
+',
'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 08b2e5eb6..32b2e9a89 100644
--- a/plugin/php/block-patterns/call-to-action.php
+++ b/plugin/php/block-patterns/call-to-action.php
@@ -25,7 +25,25 @@
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",
+ 'content' => '
+
+
Call to action
+
+
+
+
Perform this action in no time, satisfaction guaranteed.
+
+
+
+
+
+
+
+
+
+',
'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 10d4bcd19..84c100ae1 100644
--- a/plugin/php/block-patterns/contact-form.php
+++ b/plugin/php/block-patterns/contact-form.php
@@ -25,7 +25,35 @@
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",
+ 'content' => '
+
Contact us
+
+
+
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+
+
+
+
+
+
+
+
+',
'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 2c5a2ddac..ae77edde8 100644
--- a/plugin/php/block-patterns/hero-section-image.php
+++ b/plugin/php/block-patterns/hero-section-image.php
@@ -29,7 +29,31 @@
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 5844e2a01..58ffef8dc 100644
--- a/plugin/php/block-patterns/hero-section.php
+++ b/plugin/php/block-patterns/hero-section.php
@@ -25,7 +25,21 @@
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",
+ 'content' => '
+
+
Enormous Heading
+
+
+
+
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.
+
+
+
+
+
+',
'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 2a9e9b71b..24546b17a 100644
--- a/plugin/php/block-patterns/highlights.php
+++ b/plugin/php/block-patterns/highlights.php
@@ -25,7 +25,109 @@
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
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' => '
+
+
+
Highlights
+
+
+
+
Amet consectetur adipiscing elit fermentum, quis bibendum pretium sociis eros per habitasse, tempus conubia commodo enim urna malesuada placerat.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
lightbulb_outline
+
+
+
+
List item
+
+
+
+
Dolor sit amet consectetur adipiscing elit ullamcorper, dictumst ultrices rutrum malesuada turpis pretium rhoncus vitae tempor.
+
+
+
+
+
+
+
+
+
+
lightbulb_outline
+
+
+
+
List item
+
+
+
+
Dolor sit amet consectetur adipiscing elit ullamcorper, dictumst ultrices rutrum malesuada turpis pretium rhoncus vitae tempor.
+
+
+
+
+
+
+
+
+
+
+
+
spa
+
+
+
+
List item
+
+
+
+
Dolor sit amet consectetur adipiscing elit ullamcorper, dictumst ultrices rutrum malesuada turpis pretium rhoncus vitae tempor.
+
+
+
+
+
+
+
+
+
+
spa
+
+
+
+
List item
+
+
+
+
Dolor sit amet consectetur adipiscing elit ullamcorper, dictumst ultrices rutrum malesuada turpis pretium rhoncus vitae tempor.
+
+
+
+
+',
'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 e4c529c3f..3a9ce8a2e 100644
--- a/plugin/php/block-patterns/latest-posts.php
+++ b/plugin/php/block-patterns/latest-posts.php
@@ -25,7 +25,27 @@
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 89ebb0aaf..5f49ee956 100644
--- a/plugin/php/block-patterns/media-grid.php
+++ b/plugin/php/block-patterns/media-grid.php
@@ -29,7 +29,53 @@
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
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",
+ 'content' => '
+
+
+
+
+
+
+
+
+
Headline
+
+
+
+
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.
+
+
+
+
+
+
+
+
+
+
+
+
Headline
+
+
+
+
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.
+
+
+
+
+
+
+
+
+
+
+
+
+',
'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 bb1ebaf66..7a3e7de11 100644
--- a/plugin/php/block-patterns/numbers.php
+++ b/plugin/php/block-patterns/numbers.php
@@ -22,10 +22,80 @@
*
* @package MaterialDesign
*/
-
+// phpcs:ignoreFile WordPressVIPMinimum.Security.Mustache.OutputNotation
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", // phpcs:ignore WordPressVIPMinimum.Security.Mustache.OutputNotation
+ 'content' => '
+
+
Numbers
+
+
+
+
Some count that matters
+
+
+
+
+
+
thumb_up_off_alt
+
+
+
+
10k+
+
+
+
+
Sit amet consectetur adipiscing elit dui, diam nam facilisis
+
+
+
+
+
+
+
+
+
+
monetization_on
+
+
+
+
200%
+
+
+
+
Sit amet consectetur adipiscing elit dui, diam nam facilisis
+
+
+
+
+
+
+
+
+
+
file_download
+
+
+
+
2.5M
+
+
+
+
Sit amet consectetur adipiscing elit dui, diam nam facilisis
+
+
+
+
+
+
+
+
+
+
+
+',
'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 1618bf544..701efe7c2 100644
--- a/plugin/php/block-patterns/pricing.php
+++ b/plugin/php/block-patterns/pricing.php
@@ -23,9 +23,69 @@
* @package MaterialDesign
*/
+// phpcs:ignoreFile WordPressVIPMinimum.Security.Mustache.OutputNotation
+
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
\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
\n\n\n\n
\n
\n
\n
\n", // phpcs:ignore WordPressVIPMinimum.Security.Mustache.OutputNotation
+ 'content' => '
+
+
Pricing
+
+
+
+
Perform this action in no time, Satisfaction guaranteed.
+
+
+
+
+
+
Price title
+
+
+
+
Price Subtitle Description.
+
+
+
+
$ 9.99 / mo
+
+
+
+
First feature included
+
+
+
+
+
+
+
+
+
+
Price title
+
+
+
+
Price Subtitle Description.
+
+
+
+
$ 9.99 / mo
+
+
+
+
First feature included
+
+
+
+
+
+
+
+',
'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 39934f071..8f22ca01d 100644
--- a/plugin/php/block-patterns/single-feature-extended.php
+++ b/plugin/php/block-patterns/single-feature-extended.php
@@ -29,7 +29,37 @@
return [
'title' => __( 'Single Feature Extended', 'material-design' ),
- 'content' => "\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
spa Headline One line description spa Headline One line description spa Headline One line description \n\n\n
\n\n\n
\n
\n
\n",
+ 'content' => '
+
+
+
+
+
+
+
Headline
+
+
+
+
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.
+
+
+
+
spa Headline One line description spa Headline One line description spa Headline One line description
+
+
+
+
+
+
+
+
+
+
+',
'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 d8f95c7e8..011009007 100644
--- a/plugin/php/block-patterns/single-feature.php
+++ b/plugin/php/block-patterns/single-feature.php
@@ -29,7 +29,29 @@
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",
+ 'content' => '
+
+
+
+
+
+
+
+
+
Headline
+
+
+
+
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.
+
+
+
+
+
+
+',
'viewportWidth' => 800,
'categories' => [ 'material' ],
'description' => __( 'Single Feature pattern.', 'material-design' ),
diff --git a/plugin/php/blocks/class-card-block.php b/plugin/php/blocks/class-card-block.php
index c3a2fb3d1..f2dfb2006 100644
--- a/plugin/php/blocks/class-card-block.php
+++ b/plugin/php/blocks/class-card-block.php
@@ -76,7 +76,7 @@ public function handle_global_card_override( $content ) {
$global_card_style = $this->plugin->block_types->get_global_styles( 'card_style' );
$replace_string = '';
if ( $global_card_style === 'outlined' ) {
- $replace_string = 'mdc-card--outlined';
+ $replace_string = sprintf( 'mdc-card--%s', $global_card_style );
}
$content = str_replace( self::GLOBAL_CARD_CLASS, $replace_string, $content );
}
diff --git a/plugin/php/class-admin.php b/plugin/php/class-admin.php
index 7f80b36cc..1c8459959 100644
--- a/plugin/php/class-admin.php
+++ b/plugin/php/class-admin.php
@@ -139,7 +139,7 @@ public function render_onboarding_wizard_page() {
*/
public function render_settings_page() {
?>
-
+
plugin->asset_url( 'assets/js/polyfills.js' ),
- [],
- $version,
- false
- );
- }
-
wp_register_script(
'material-block-editor-js',
$this->plugin->asset_url( 'assets/js/block-editor.js' ),
@@ -187,7 +176,7 @@ public function enqueue_block_editor_assets() {
wp_register_style(
'material-block-editor-css',
$this->plugin->asset_url( 'assets/css/block-editor-compiled.css' ),
- [],
+ [ 'material-google-fonts' ],
$version
);
@@ -235,7 +224,7 @@ public function enqueue_block_editor_assets() {
'contact_form_preview' => $this->plugin->asset_url( 'assets/images/preview/contact-form.jpg' ),
'defaults' => [
'blocks' => $this->get_block_defaults(),
- 'colors' => $this->get_color_defaults(),
+ 'colors' => $this->get_color_defaults(), // Todo - pass m3 token and update color picker.
'globalStyle' => $this->get_global_styles(),
],
'customizerUrls' => [
@@ -245,6 +234,7 @@ public function enqueue_block_editor_assets() {
'postTypes' => $post_types,
'doesRequireBackCompatList' => version_compare( get_bloginfo( 'version' ), '5.8', '<' ),
'canUseQueryLoop' => version_compare( '5.8', get_bloginfo( 'version' ), '<=' ),
+ 'fallBackImageCard' => $this->plugin->asset_url( 'assets/images/placeholder-image-card.png' ),
];
if ( Helpers::is_current_user_admin_or_editor_with_manage_options() ) {
diff --git a/plugin/php/class-helpers.php b/plugin/php/class-helpers.php
index cb8723822..c780e7a83 100644
--- a/plugin/php/class-helpers.php
+++ b/plugin/php/class-helpers.php
@@ -148,6 +148,45 @@ public static function hex_to_rgb( $hex ) {
return array_map( 'self::hexdec', $values );
}
+ /**
+ * Convert color rgb to hex
+ *
+ * @param string $rgb Color value.
+ *
+ * @return string Hex value.
+ */
+ public static function rgb_to_hex( $rgb ) {
+ $red = $rgb >> 16 & 255;
+ $green = $rgb >> 8 & 255;
+ $blue = $rgb & 255;
+
+ $outparts = [ base_convert( $red, 10, 16 ), base_convert( $green, 10, 16 ), base_convert( $blue, 10, 16 ) ];
+
+ // Pad single-digit output values.
+ foreach ( $outparts as &$part ) {
+ if ( 1 === strlen( $part ) ) {
+ $part = '0' . $part;
+ }
+ }
+
+ return '#' . implode( '', $outparts );
+ }
+
+ /**
+ * Convert color rgb to hex
+ *
+ * @param string $rgb Color value.
+ *
+ * @return string Hex value.
+ */
+ public static function rgb_to_rgb_string( $rgb ) {
+ $red = $rgb >> 16 & 255;
+ $green = $rgb >> 8 & 255;
+ $blue = $rgb & 255;
+
+ return $red . ',' . $green . ',' . $blue;
+ }
+
/**
* Mix 2 colors with a weight.
*
@@ -207,4 +246,43 @@ public static function dechex( $decimal ) {
public static function sanitize_control_id( $id ) {
return str_replace( [ '[', ']' ], [ '-', '' ], $id );
}
+
+ /**
+ * Sanitize material generated colors.
+ *
+ * Colors are generated using `themeFromSourceColor` js function and are stored in the customizer in serialized form.
+ *
+ * @param array $color_palette color palette in array format from `themeFromSourceColor`.
+ *
+ * @return array
+ */
+ public static function sanitize_js_generated_colors( $color_palette ) {
+ $sanitized_color = [
+ 'source' => intval( $color_palette['source'] ),
+ 'schemes' => [],
+ 'palettes' => [],
+ ];
+
+ foreach ( $color_palette['schemes'] as $key => $values ) {
+ // Sanitize value by passing as ref and changing the value.
+ array_walk(
+ $values,
+ function ( &$val ) {
+ $val = intval( $val );
+ }
+ );
+ $sanitized_color['schemes'][ $key ] = $values;
+ }
+
+ foreach ( $color_palette['palettes'] as $key => $palette ) {
+ $sanitized_color['palettes'][ $key ] = [
+ 'primary' => floatval( $palette['hue'] ),
+ 'chroma' => intval( $palette['chroma'] ),
+ 'cache' => [],
+ ];
+ }
+
+ return $sanitized_color;
+ }
+
}
diff --git a/plugin/php/class-migration.php b/plugin/php/class-migration.php
new file mode 100644
index 000000000..c13ca0b58
--- /dev/null
+++ b/plugin/php/class-migration.php
@@ -0,0 +1,289 @@
+slug = $this->plugin->customizer_controls->slug;
+
+ add_action( 'admin_init', [ $this, 'migrate_m2_typography_settings_to_m3' ] );
+ add_action( 'admin_init', [ $this, 'migrate_m2_corner_radius' ] );
+ add_action( 'admin_init', [ $this, 'migrate_colors' ] );
+ add_action( 'admin_notices', [ $this, 'admin_notice_m3_migration' ] );
+
+ add_action( 'wp_ajax_m3_migrate_colors', [ $this, 'ajax_migrate_colors' ] );
+ add_action( 'wp_ajax_material_m3_notice', [ $this, 'notice_click' ] );
+ }
+
+ /**
+ * Get customizer option.
+ *
+ * @return array
+ */
+ public function get_customizer_option() {
+ return get_option( $this->slug, [] );
+ }
+
+ /**
+ * Get option for a given key.
+ *
+ * @param string $key Sub key.
+ *
+ * @return false|mixed
+ */
+ public function get( $key ) {
+ $migration_option = get_option( self::MIGRATION_KEY, [] );
+
+ return isset( $migration_option[ $key ] ) ? $migration_option[ $key ] : false;
+ }
+
+ /**
+ * Update option.
+ *
+ * @param string $key Sub key.
+ *
+ * @return void
+ */
+ public function update( $key ) {
+ $migration_option = get_option( self::MIGRATION_KEY, [] );
+ $migration_option[ $key ] = true;
+ update_option( self::MIGRATION_KEY, $migration_option );
+ }
+
+ /**
+ * Migrate m2 typography settings to m3.
+ *
+ * @return void
+ */
+ public function migrate_m2_typography_settings_to_m3() {
+ if ( $this->get( 'typography' ) ) {
+ return;
+ }
+
+ $map = [
+ 'headline_1' => 'display_small',
+ 'headline_2' => 'headline_large',
+ 'headline_3' => 'headline_medium',
+ 'headline_4' => 'headline_small',
+ 'headline_5' => 'title_large',
+ 'headline_6' => 'title_large',
+ 'subhead_1' => 'title_medium',
+ 'subhead_2' => 'title_small',
+ 'body_1' => 'body_large',
+ 'body_2' => 'body_medium',
+ 'caption' => 'body_small',
+ 'button' => 'label_large',
+ 'overline' => 'label_medium',
+ 'subtitle_1' => 'label_large',
+ 'subtitle_2' => 'label_medium',
+ 'head_font_family' => [ 'display_font_family', 'headline_font_family' ],
+ ];
+
+ $option = $this->get_customizer_option();
+
+ foreach ( $map as $m2_key => $m3_key ) {
+ if ( is_array( $m3_key ) ) {
+ foreach ( $m3_key as $sub_m3_key ) {
+ if ( isset( $option[ $m2_key ] ) ) {
+ $option[ $sub_m3_key ] = $option[ $m2_key ];
+ }
+ }
+ unset( $option[ $m2_key ] );
+ } else {
+ if ( isset( $option[ $m2_key ] ) ) {
+ $option[ $m3_key ] = $option[ $m2_key ];
+ unset( $option[ $m2_key ] );
+ }
+ }
+ }
+
+ update_option( $this->slug, $option );
+
+ $this->update( 'typography' );
+ }
+
+ /**
+ * Migrate m2 corner radius to m3.
+ *
+ * @return void
+ */
+ public function migrate_m2_corner_radius() {
+ if ( $this->get( 'corner_radius' ) ) {
+ return;
+ }
+ $slug = $this->plugin->customizer_controls->slug;
+ $option = get_option( $slug, [] );
+ $radius = [
+ 'button_radius' => '36',
+ 'card_radius' => '12',
+ 'chip_radius' => '8',
+ 'data_table_radius' => '24',
+ 'image_list_radius' => '12',
+ 'nav_drawer_radius' => '4',
+ 'text_field_radius' => '4',
+ ];
+ $option = array_merge( $option, $radius );
+ update_option( $slug, $option );
+ $this->update( 'corner_radius' );
+ }
+
+ /**
+ * Migrate colors.
+ *
+ * @return void
+ */
+ public function migrate_colors() {
+ if ( $this->get( 'color_migration' ) ) {
+ return;
+ }
+ add_action( 'admin_enqueue_scripts', [ $this, 'admin_enqueue_scripts' ] );
+ }
+
+ /**
+ * Admin enqueue script for color migration.
+ *
+ * @return void
+ */
+ public function admin_enqueue_scripts() {
+ $option = $this->get_customizer_option();
+
+ if ( isset( $option['color_palette'] ) ) {
+ return;
+ }
+
+ $version = include $this->plugin->dir_path . '/assets/js/admin-m3-color-migration.asset.php';
+
+ wp_enqueue_script(
+ 'material-m3-migration-color',
+ $this->plugin->asset_url( 'assets/js/admin-m3-color-migration.js' ),
+ array_merge( $version['dependencies'], [ 'wp-util' ] ),
+ $version['version'],
+ true
+ );
+
+ wp_localize_script(
+ 'material-m3-migration-color',
+ 'material_m3_migration_color',
+ [
+ 'nonce' => wp_create_nonce( 'material_m3_migration_color' ),
+ 'primaryColor' => isset( $option['primary_color'] ) ? $option['primary_color'] : $this->plugin->customizer_controls->get_default( 'primary_color' ),
+ ]
+ );
+ }
+
+ /**
+ * Ajax migrate colors.
+ *
+ * @return void
+ */
+ public function ajax_migrate_colors() {
+ if ( ! isset( $_POST['_wpnonce'] ) || ! wp_verify_nonce( $_POST['_wpnonce'], 'material_m3_migration_color' ) ) { // phpcs:ignore WordPress.Security.ValidatedSanitizedInput.InputNotSanitized
+ return;
+ }
+
+ $option = $this->get_customizer_option();
+ if ( isset( $option['color_palette'] ) ) {
+ // We already got the palette, abort.
+ wp_send_json_success();
+ }
+
+ $color_palette = json_decode( wp_unslash( isset( $_POST['colorPalette'] ) ? $_POST['colorPalette'] : [] ), true ); // phpcs:ignore WordPress.Security.ValidatedSanitizedInput.InputNotSanitized
+
+ $sanitized_color = Helpers::sanitize_js_generated_colors( $color_palette );
+
+ $option['color_palette'] = wp_json_encode( $sanitized_color );
+ update_option( $this->slug, $option );
+ $this->update( 'color_migration' );
+ wp_send_json_success();
+ }
+
+ /**
+ * Show admin notice when migrated from m2 to m3.
+ *
+ * @return void
+ */
+ public function admin_notice_m3_migration() {
+ if ( $this->get( 'admin_notice' ) ) {
+ return;
+ }
+ $version = include $this->plugin->dir_path . '/assets/js/admin-notice-m3-migration.asset.php';
+
+ wp_enqueue_script(
+ 'material-m3-notice-migration-color',
+ $this->plugin->asset_url( 'assets/js/admin-notice-m3-migration.js' ),
+ array_merge( $version['dependencies'], [ 'wp-util' ] ),
+ $version['version'],
+ true
+ );
+
+ wp_localize_script(
+ 'material-m3-notice-migration-color',
+ 'material_m3_migration_notice',
+ [
+ 'nonce' => wp_create_nonce( 'material_m3_migration_notice' ),
+ ]
+ );
+
+ $customizer_url = admin_url( 'customize.php?autofocus[panel]=' . $this->plugin->customizer_controls->slug );
+ printf(
+ '
%s
',
+ esc_html__( 'Your site has been updated with Material Design 3. The color palette will be generated dynamically from primary color. You can preview the site and change the source color from customizer.', 'material-design' )
+ );
+ echo '
';
+ }
+
+ /**
+ * Handle notice click.
+ *
+ * @return void
+ */
+ public function notice_click() {
+ if ( ! isset( $_POST['_wpnonce'] ) || ! wp_verify_nonce( $_POST['_wpnonce'], 'material_m3_migration_notice' ) ) { // phpcs:ignore WordPress.Security.ValidatedSanitizedInput.InputNotSanitized
+ return;
+ }
+ $this->update( 'admin_notice' );
+ wp_send_json_success();
+ }
+
+}
diff --git a/plugin/php/class-plugin.php b/plugin/php/class-plugin.php
index 5317917f2..9e3957a97 100644
--- a/plugin/php/class-plugin.php
+++ b/plugin/php/class-plugin.php
@@ -32,7 +32,6 @@
use MaterialDesign\Plugin\Rest\Design_Assets_REST_Controller;
use MaterialDesign\Plugin\Rest\Posts_REST_Controller;
use MaterialDesign\Plugin\Rest\Onboarding_REST_Controller;
-use MaterialDesign\Plugin\Rest\Reset_Card_Style_Controller;
use MaterialDesign\Plugin\Rest\Reset_Card_Style_Rest_Controller;
/**
@@ -145,6 +144,13 @@ class Plugin extends Plugin_Base {
*/
public $frontend;
+ /**
+ * Migration class.
+ *
+ * @var Migration
+ */
+ public $migration;
+
/**
* Initiate the plugin resources.
*
@@ -189,6 +195,9 @@ public function init() {
$this->frontend = new Frontend( $this );
$this->frontend->init();
+ $this->migration = new Migration( $this );
+ $this->migration->init();
+
// Init CLI.
if ( defined( 'WP_CLI' ) && false !== WP_CLI ) {
$this->fonts = new Fonts();
@@ -234,6 +243,7 @@ public function enqueue_front_end_assets() {
$material_design_recaptcha_site_key = get_option( 'material_design_recaptcha_site_key', '' );
$wp_localized_script_data = [
'ajax_url' => admin_url( 'admin-ajax.php' ),
+ 'sourceColor' => $this->customizer_controls->get_source_color(),
'darkModeStatus' => $this->customizer_controls->get_dark_mode_status(),
'globalStyle' => $this->block_types->get_global_styles(),
'isMaterialThemeActive' => $this->theme_status() === 'ok',
@@ -253,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/plugin/php/customizer/class-controls.php b/plugin/php/customizer/class-controls.php
index 684e2d2aa..3fd145c88 100644
--- a/plugin/php/customizer/class-controls.php
+++ b/plugin/php/customizer/class-controls.php
@@ -87,7 +87,7 @@ public function init() {
/**
* Register customizer options.
*
- * @param WP_Customize_Manager $wp_customize Theme Customizer object.
+ * @param \WP_Customize_Manager $wp_customize Theme Customizer object.
*/
public function register( $wp_customize ) {
$this->wp_customize = $wp_customize;
@@ -222,6 +222,20 @@ public function add_sections() {
}
}
+ /**
+ * Sanitize serialized json.
+ *
+ * @param string $json_color_palette json string.
+ *
+ * @return false|string
+ */
+ public function sanitize_color_palette_json( $json_color_palette ) {
+ $color_palette = json_decode( $json_color_palette, true );
+ $sanitized_color = Helpers::sanitize_js_generated_colors( $color_palette );
+
+ return wp_json_encode( $sanitized_color );
+ }
+
/**
* Add all controls in the "Theme" section.
*
@@ -232,12 +246,9 @@ public function add_theme_controls() {
* List of all the control settings in the Theme section.
*/
$settings = [
- 'style' => [
- 'default' => 'baseline',
- ],
- // This setting does not have an associated control.
- 'previous_style' => [
- 'default' => 'baseline',
+ 'color_palette' => [
+ 'default' => [],
+ 'sanitize_callback' => [ $this, 'sanitize_color_palette_json' ],
],
/**
* This setting does not have an associated control
@@ -246,52 +257,24 @@ public function add_theme_controls() {
'notify' => [
'default' => 0,
],
- ];
-
- $this->add_settings( $settings );
-
- $choices = $this->get_style_choices();
-
- /**
- * List of all the controls in the Theme section.
- */
- $controls_theme = [
- 'style' => new Image_Radio_Control(
- $this->wp_customize,
- $this->prepare_option_name( 'style' ),
- [
- 'section' => 'style',
- 'priority' => 10,
- 'choices' => $choices,
- ]
- ),
- ];
-
- $default_settings = [];
-
- foreach ( $choices as $key => $value ) {
- $default_settings[ $key ] = [
- 'dark' => 'auto',
- 'contrast' => 'auto',
- 'switcher' => false,
- 'active' => 'default',
- ];
- }
-
- $style_settings = [
'style_settings' => [
- 'default' => $default_settings,
+ 'default' => [
+ 'dark' => 'auto',
+ 'contrast' => 'auto',
+ 'switcher' => false,
+ 'active' => 'default',
+ ],
],
];
- $this->add_settings( $style_settings );
+ $this->add_settings( $settings );
$controls_settings = [
'style_settings' => new Style_Settings_Control(
$this->wp_customize,
$this->prepare_option_name( 'style_settings' ),
[
- 'section' => 'style_settings',
+ 'section' => 'colors',
'priority' => 200,
'style' => get_option( $this->prepare_option_name( 'style' ) ),
'css_var' => '--mdc-theme-setting',
@@ -299,7 +282,6 @@ public function add_theme_controls() {
),
];
- $this->add_controls( $controls_theme );
$this->add_controls( $controls_settings );
$active_mode_settings = [
@@ -309,15 +291,6 @@ public function add_theme_controls() {
];
$this->add_settings( $active_mode_settings );
-
- $this->add_controls(
- [
- 'active_mode' => [
- 'section' => 'dark_colors',
- 'type' => 'text',
- ],
- ]
- );
}
/**
@@ -372,12 +345,6 @@ public function add_color_controls() {
$this->prepare_option_name( $control['id'] ),
$args
);
-
- // Dark mode overrides.
- $dark_mode_controls[ $control['id'] . $this->dark_mode_suffix ] = $this->get_dark_mode_controls_override( $control, $args, 'dark_colors' );
-
- // High contrast overrides.
- $contrast_controls[ $control['id'] . $this->contrast_mode_suffix ] = $this->get_dark_mode_controls_override( $control, $args, 'contrast_colors' );
}
$this->add_controls( $controls );
@@ -393,11 +360,13 @@ public function add_typography_controls() {
/**
* Generate list of all the settings in the Typography section.
*/
- $settings = [];
+ $settings = [];
+ $typography_controls = $this->get_typography_controls();
+ $extra_controls = call_user_func_array( 'array_merge', wp_list_pluck( $typography_controls, 'choices' ) );
+
$all_controls = array_merge(
- $this->get_typography_controls(),
- $this->get_typography_extra_controls(),
- $this->get_typography_extra_controls( false )
+ $typography_controls,
+ $extra_controls
);
foreach ( $all_controls as $control ) {
@@ -411,7 +380,7 @@ public function add_typography_controls() {
*/
$controls = [];
- foreach ( $all_controls as $control ) {
+ foreach ( $typography_controls as $control ) {
$controls[ $control['id'] ] = new Google_Fonts_Control(
$this->wp_customize,
$this->prepare_option_name( $control['id'] ),
@@ -423,6 +392,20 @@ public function add_typography_controls() {
'choices' => ( ! empty( $control['choices'] ) ) ? $control['choices'] : [],
]
);
+
+ foreach ( $control['choices'] as $choice ) {
+ $controls[ $choice['id'] ] = new Google_Fonts_Control(
+ $this->wp_customize,
+ $this->prepare_option_name( $choice['id'] ),
+ [
+ 'section' => 'typography',
+ 'priority' => 10,
+ 'label' => $choice['label'],
+ 'css_vars' => $choice['css_vars'],
+ 'choices' => ( ! empty( $choice['choices'] ) ) ? $choice['choices'] : [],
+ ]
+ );
+ }
}
$this->add_controls( $controls );
@@ -712,6 +695,7 @@ function ( $image ) {
'styleControl' => $this->prepare_option_name( 'style' ),
'styleSettings' => $this->prepare_option_name( 'style_settings' ),
'prevStyleControl' => $this->prepare_option_name( 'previous_style' ),
+ 'colorPalette' => $this->prepare_option_name( 'color_palette' ),
'iconCollectionsControl' => $this->prepare_option_name( 'icon_collection' ),
'activeModeControl' => $this->prepare_option_name( 'active_mode' ),
'iconCollectionsOptions' => $this->get_icon_collection_controls(),
@@ -727,9 +711,7 @@ function ( $image ) {
'restPath' => esc_url( $this->plugin->onboarding_rest_controller->get_base_path() ),
'resetCardStyleRest' => esc_url( $this->plugin->reset_card_style_rest_controller->get_base_path() ),
'images' => $demo_images,
- 'styleChoices' => $this->get_style_choices(),
'colorControls' => $this->get_color_controls(),
- 'colorControlsDark' => $this->get_color_controls_variant( 'dark' ),
]
);
@@ -756,54 +738,55 @@ function ( $image ) {
* @return string
*/
public function get_google_fonts_url( $context = '' ) {
- $icons_style = $this->get_icon_style( '+' );
- $font_families = [ 'Material+Icons' . $icons_style ];
- $fonts = [];
+ $icons_style = $this->get_icon_style( '+' );
+ $merged_fonts = [ 'Material+Icons' . $icons_style ];
+ $fonts = [];
if ( 'block-editor' === $context ) {
- $font_families[] = 'Material+Icons+Outlined';
+ $merged_fonts[] = 'Material+Icons+Outlined';
}
// Get the font families used.
foreach ( $this->get_typography_controls() as $control ) {
- $type = 'head_font_family' === $control['id'] ? 'head' : 'body';
- $fonts[ $type ] = [
+ $fonts[ $control['id'] ] = [
'family' => $this->get_option( $control['id'] ),
'variants' => [],
];
}
- // Get the extra font controls.
- $typography_extra_controls = array_merge(
- $this->get_typography_extra_controls(),
- $this->get_typography_extra_controls( false )
- );
-
// Get the variant/weight used for each font control.
- foreach ( $typography_extra_controls as $control ) {
- $value = json_decode( $this->get_option( $control['id'] ), true );
- $weight = 'regular';
+ foreach ( $this->get_typography_controls() as $c ) {
+ $variants = [];
+ foreach ( $c['choices'] as $control ) {
+ $value = json_decode( $this->get_option( $control['id'] ), true );
+
+ if ( ! empty( $value ) && ! empty( $value['weight'] ) ) {
+ $weight = $value['weight'];
+ } else {
+ $weight = $control['weight']['default'];
+ }
- if ( ! empty( $value ) && ! empty( $value['weight'] ) ) {
- $weight = $value['weight'];
- } else {
- $weight = $control['weight']['default'];
- }
+ $variants[] = $weight;
- if ( false !== strpos( $control['id'], 'headline_' ) ) {
- $fonts['head']['variants'][] = $weight;
- } else {
- $fonts['body']['variants'][] = $weight;
}
+ $fonts[ $c['id'] ]['variants'] = $variants;
}
+ // Use font family with key to make it unique and merge it's variants.
+ $font_families = [];
foreach ( $fonts as $font ) {
- $variants = str_replace( 'regular', '400', implode( ',', array_unique( $font['variants'] ) ) );
- $font_families[] = str_replace( ' ', '+', $font['family'] ) . ':' . $variants;
+ $variants = str_replace( 'regular', '400', implode( ',', array_unique( $font['variants'] ) ) );
+ $font_family = str_replace( ' ', '+', $font['family'] );
+ $font_families[ $font_family ] = array_merge( isset( $font_families[ $font_family ] ) ? $font_families[ $font_family ] : [], explode( ',', $variants ) );
+ }
+
+ // Merge variants and make it unique.
+ foreach ( $font_families as $family => $variants ) {
+ $merged_fonts[] = $family . ':' . implode( ',', array_unique( $variants ) );
}
$fonts_url =
- add_query_arg( 'family', implode( '|', array_unique( $font_families ) ), '//fonts.googleapis.com/css' );
+ add_query_arg( 'family', implode( '|', $merged_fonts ), '//fonts.googleapis.com/css' );
/**
* Filter Google Fonts URL.
@@ -854,7 +837,6 @@ public function preview_scripts() {
* Render custom templates.
*/
public function templates() {
- Material_Color_Palette_Section::tabs_template();
Material_Color_Palette_Control::tabs_template();
}
@@ -867,31 +849,10 @@ public function get_frontend_css() {
$font_vars = [];
$google_fonts = Google_Fonts::get_fonts();
$dark_mode_vars = [];
+ $light_mode_vars = [];
- foreach ( $this->get_color_controls() as $control ) {
- $value = $this->get_option( $control['id'] );
- $rgb = Helpers::hex_to_rgb( $value );
- if ( ! empty( $rgb ) ) {
- $rgb = implode( ',', $rgb );
- }
-
- $color_vars[] = sprintf( '%s: %s;', esc_html( $control['css_var'] ), esc_html( $value ) );
- $color_vars[] = sprintf( '%s: %s;', esc_html( $control['css_var'] . '-rgb' ), esc_html( $rgb ) );
- }
-
- // Generate additional surface variant vars required by some components.
- $surface = $this->get_option( 'surface_color' );
- $on_surface = $this->get_option( 'on_surface_color' );
-
- if ( ! empty( $surface ) && ! empty( $on_surface ) ) {
- $mix_4 = Helpers::mix_colors( $on_surface, $surface, 0.04 );
- $color_vars[] = esc_html( "--mdc-theme-surface-mix-4: $mix_4;" );
-
- $mix_12 = Helpers::mix_colors( $on_surface, $surface, 0.12 );
- $color_vars[] = esc_html( "--mdc-theme-surface-mix-12: $mix_12;" );
- }
-
- foreach ( $this->get_typography_controls() as $control ) {
+ $typography_controls = $this->get_typography_controls();
+ foreach ( $typography_controls as $control ) {
$value = $this->get_option( $control['id'] );
$fallback = 'sans-serif';
@@ -913,10 +874,10 @@ public function get_frontend_css() {
}
}
- $typography_extra_controls = array_merge(
- $this->get_typography_extra_controls(),
- $this->get_typography_extra_controls( false )
- );
+ $typography_extra_controls = wp_list_pluck( $typography_controls, 'choices' );
+
+ // Merge all controls.
+ $typography_extra_controls = call_user_func_array( 'array_merge', $typography_extra_controls );
foreach ( $typography_extra_controls as $control ) {
$value = json_decode( $this->get_option( $control['id'] ), true );
@@ -935,7 +896,7 @@ public function get_frontend_css() {
esc_html( $var ),
esc_html( $value[ $type ] )
);
- } else {
+ } elseif ( 'weight' === $type ) {
$font_vars[] = sprintf(
'%s: %s !important;',
esc_html( $var ),
@@ -951,6 +912,20 @@ public function get_frontend_css() {
esc_html( $control['css_vars']['style'] ),
esc_html( $font_style )
);
+ } elseif ( 'tracking' === $type ) {
+ $font_size = isset( $value['size'] ) ? $value['size'] : 16;
+ $line_tracking = $value[ $type ] / $font_size;
+ $font_vars[] = sprintf(
+ '%s: %srem !important;',
+ esc_html( $var ),
+ esc_html( $line_tracking )
+ );
+ } else {
+ $font_vars[] = sprintf(
+ '%s: %s !important;',
+ esc_html( $var ),
+ esc_html( $value[ $type ] )
+ );
}
}
}
@@ -980,28 +955,29 @@ public function get_frontend_css() {
);
}
- foreach ( $this->get_color_controls_variant( 'dark' ) as $control ) {
- $value = $this->get_option( $control['id'] );
- $rgb = Helpers::hex_to_rgb( $value );
- if ( ! empty( $rgb ) ) {
- $rgb = implode( ',', $rgb );
- }
-
- $dark_mode_vars[] = sprintf( '%s: %s;', esc_html( $control['css_var'] ), esc_html( $value ) );
- $dark_mode_vars[] = sprintf( '%s: %s;', esc_html( $control['css_var'] . '-rgb' ), esc_html( $rgb ) );
- }
-
$glue = "\n\t\t\t\t";
$icon_collection = $this->get_icon_collection_css();
$color_vars = implode( $glue, $color_vars );
$corner_styles_vars = implode( $glue, $corner_styles_vars );
$font_vars = implode( $glue, $font_vars );
- $dark_mode_vars = implode( $glue, $dark_mode_vars );
+ $color_palette = $this->get_option( 'color_palette' );
+ $light_mode_vars = '';
+ $dark_mode_vars = '';
+
+ if ( $color_palette ) {
+ $color_palette = json_decode( $color_palette, true );
+ }
+
+ if ( ! empty( $color_palette ) ) {
+ $light_mode_vars = implode( $glue, $this->generate_theme_variables( $color_palette['schemes']['light'] ) );
+ $dark_mode_vars = implode( $glue, $this->generate_theme_variables( $color_palette['schemes']['dark'] ) );
+ }
+
$css = "
:root {
/* Theme color vars */
- {$color_vars}
+ {$light_mode_vars}
/* Icon collection type var */
{$icon_collection}
@@ -1013,19 +989,25 @@ public function get_frontend_css() {
{$corner_styles_vars}
}
+ /* Forced light mode */
+ body[data-color-scheme='light'] {
+ {$light_mode_vars}
+ }
+
/* Forced dark mode */
body[data-color-scheme='dark'] {
{$dark_mode_vars}
}
-
- /* Forced light mode */
- body[data-color-scheme='light'] {
- {$color_vars}
- }
";
if ( 'inactive' !== $this->get_dark_mode_status() ) {
$css .= "
+ @media (prefers-color-scheme: light) {
+ :root {
+ {$light_mode_vars}
+ }
+ }
+
@media (prefers-color-scheme: dark) {
:root {
{$dark_mode_vars}
@@ -1083,6 +1065,12 @@ public function get_design_styles() {
'on_secondary_color' => '#000000',
'on_secondary_color_dark' => '#000000',
'on_secondary_color_contrast' => '#000000',
+ 'tertiary_color' => '#7D5260',
+ 'tertiary_dark' => '#7D5260',
+ 'tertiary_contrast' => '#7D5260',
+ 'on_tertiary_color' => '#FFFFFF',
+ 'on_tertiary_color_dark' => '#FFFFFF',
+ 'on_tertiary_color_contrast' => '#FFFFFF',
'surface_color' => '#ffffff',
'surface_color_dark' => '#121212',
'surface_color_contrast' => '#ffffff',
@@ -1095,7 +1083,10 @@ public function get_design_styles() {
'on_background_color_dark' => '#ffffff',
'footer_color' => '#ffffff',
'on_footer_color' => '#000000',
- 'head_font_family' => 'Roboto',
+ 'display_font_family' => 'Roboto',
+ 'headline_font_family' => 'Roboto',
+ 'title_font_family' => 'Roboto',
+ 'label_font_family' => 'Roboto',
'body_font_family' => 'Roboto',
'global_radius' => '4',
'button_radius' => '4',
@@ -1130,7 +1121,10 @@ public function get_design_styles() {
'on_background_color' => '#000000',
'footer_color' => '#ffffff',
'on_footer_color' => '#000000',
- 'head_font_family' => 'Raleway',
+ 'display_font_family' => 'Raleway',
+ 'headline_font_family' => 'Raleway',
+ 'title_font_family' => 'Raleway',
+ 'label_font_family' => 'Raleway',
'body_font_family' => 'Raleway',
'global_radius' => '16',
'button_radius' => '16',
@@ -1165,7 +1159,10 @@ public function get_design_styles() {
'on_background_color' => '#000000',
'footer_color' => '#ffffff',
'on_footer_color' => '#000000',
- 'head_font_family' => 'Merriweather',
+ 'display_font_family' => 'Merriweather',
+ 'headline_font_family' => 'Merriweather',
+ 'title_font_family' => 'Merriweather',
+ 'label_font_family' => 'Merriweather',
'body_font_family' => 'Merriweather',
'global_radius' => '0',
'button_radius' => '0',
@@ -1200,7 +1197,10 @@ public function get_design_styles() {
'on_background_color' => '#442c2e',
'footer_color' => '#fff1ee',
'on_footer_color' => '#442c2e',
- 'head_font_family' => 'Rubik',
+ 'display_font_family' => 'Rubik',
+ 'headline_font_family' => 'Rubik',
+ 'title_font_family' => 'Rubik',
+ 'label_font_family' => 'Rubik',
'body_font_family' => 'Rubik',
'global_radius' => '8',
'button_radius' => '8',
@@ -1229,119 +1229,45 @@ public function get_color_controls() {
return [
[
'id' => 'primary_color',
- 'label' => __( 'Primary Color', 'material-design' ),
- 'a11y_label' => __( 'On Primary', 'material-design' ),
+ 'label' => __( 'Source Color', 'material-design' ),
+ 'a11y_label' => __( 'Source Color', 'material-design' ),
'related_text_setting' => $this->prepare_option_name( 'on_primary_color' ),
- 'css_var' => '--mdc-theme-primary',
- ],
- [
- 'id' => 'on_primary_color',
- 'label' => __( 'On Primary Color (text and icons)', 'material-design' ),
- 'a11y_label' => __( 'On Primary', 'material-design' ),
- 'related_setting' => $this->prepare_option_name( 'primary_color' ),
- 'css_var' => '--mdc-theme-on-primary',
- ],
- [
- 'id' => 'secondary_color',
- 'label' => __( 'Secondary Color', 'material-design' ),
- 'a11y_label' => __( 'On Secondary', 'material-design' ),
- 'related_text_setting' => $this->prepare_option_name( 'on_secondary_color' ),
- 'css_var' => '--mdc-theme-secondary',
- ],
- [
- 'id' => 'on_secondary_color',
- 'label' => __( 'On Secondary Color (text and icons)', 'material-design' ),
- 'a11y_label' => __( 'On Secondary', 'material-design' ),
- 'related_setting' => $this->prepare_option_name( 'secondary_color' ),
- 'css_var' => '--mdc-theme-on-secondary',
- ],
- [
- 'id' => 'surface_color',
- 'label' => __( 'Surface Color', 'material-design' ),
- 'a11y_label' => __( 'On Surface', 'material-design' ),
- 'related_text_setting' => $this->prepare_option_name( 'on_surface_color' ),
- 'css_var' => '--mdc-theme-surface',
- ],
- [
- 'id' => 'on_surface_color',
- 'label' => __( 'On Surface Color (text and icons)', 'material-design' ),
- 'a11y_label' => __( 'On Surface', 'material-design' ),
- 'related_setting' => $this->prepare_option_name( 'surface_color' ),
- 'css_var' => '--mdc-theme-on-surface',
+ 'css_var' => '--md-sys-color-primary',
],
];
}
- /**
- * Get a list of dark / contrast control settings.
- *
- * @param string $variant Color prefix to return.
- *
- * @return array New color controls.
- */
- public function get_color_controls_variant( $variant ) {
- $controls = $this->get_color_controls();
- $dark_controls = [];
-
- foreach ( $controls as $control ) {
- $dark_control = $control;
-
- $dark_control['id'] .= sprintf( '_%s', $variant );
-
- if ( isset( $dark_control['related_text_setting'] ) ) {
- $dark_control['related_text_setting'] = $this->prepare_option_name( $dark_control['id'] );
- }
-
- if ( isset( $dark_control['related_setting'] ) ) {
- $dark_control['related_setting'] = $this->prepare_option_name( $dark_control['id'] );
- }
-
- $dark_controls[] = $dark_control;
- }
-
- return $dark_controls;
- }
-
/**
* Get list of all the control settings in the Typography section.
*
* @return array
*/
public function get_typography_controls() {
- return [
- [
- 'id' => 'head_font_family',
- 'label' => __( 'Headlines & Subtitles', 'material-design' ),
- 'css_vars' => [
- 'family' => [
- '--mdc-typography-headline1-font-family',
- '--mdc-typography-headline2-font-family',
- '--mdc-typography-headline3-font-family',
- '--mdc-typography-headline4-font-family',
- '--mdc-typography-headline5-font-family',
- '--mdc-typography-headline6-font-family',
- '--mdc-typography-subtitle1-font-family',
- '--mdc-typography-subtitle2-font-family',
- ],
- ],
- 'choices' => $this->get_typography_extra_controls(),
- ],
- [
- 'id' => 'body_font_family',
- 'label' => __( 'Body & Captions', 'material-design' ),
+ $default_fonts = [
+ 'display' => 'Roboto',
+ 'headline' => 'Roboto',
+ 'title' => 'Roboto Medium',
+ 'label' => 'Roboto Medium',
+ 'body' => 'Roboto Medium',
+ ];
+
+ $controls = [];
+ foreach ( $default_fonts as $base_key => $default_font ) {
+ $controls[] = [
+ 'id' => sprintf( '%s_font_family', $base_key ),
+ 'label' => ucfirst( $base_key ),
'css_vars' => [
'family' => [
- '--mdc-typography-font-family',
- '--mdc-typography-body1-font-family',
- '--mdc-typography-body2-font-family',
- '--mdc-typography-caption-font-family',
- '--mdc-typography-button-font-family',
- '--mdc-typography-overline-font-family',
+ sprintf( '--md-sys-typescale-%s-large-font', $base_key ),
+ sprintf( '--md-sys-typescale-%s-medium-font', $base_key ),
+ sprintf( '--md-sys-typescale-%s-small-font', $base_key ),
],
],
- 'choices' => $this->get_typography_extra_controls( false ),
- ],
- ];
+ 'choices' => $this->get_typography_extra_controls( $base_key ),
+ ];
+ }
+
+ return $controls;
}
/**
@@ -1364,7 +1290,7 @@ public function get_corner_styles_controls() {
'label' => __( 'Buttons', 'material-design' ),
'min' => 0,
'max' => 20,
- 'initial_value' => 4,
+ 'initial_value' => 36,
'css_var' => '--mdc-button-radius',
'blocks' => [
'material/button',
@@ -1375,7 +1301,7 @@ public function get_corner_styles_controls() {
'label' => __( 'Card', 'material-design' ),
'min' => 0,
'max' => 24,
- 'initial_value' => 0,
+ 'initial_value' => 12,
'css_var' => '--mdc-card-radius',
'blocks' => [
'material/card',
@@ -1388,7 +1314,7 @@ public function get_corner_styles_controls() {
'label' => __( 'Chip', 'material-design' ),
'min' => 0,
'max' => 16,
- 'initial_value' => 0,
+ 'initial_value' => 8,
'css_var' => '--mdc-chip-radius',
],
[
@@ -1396,7 +1322,7 @@ public function get_corner_styles_controls() {
'label' => __( 'Data table', 'material-design' ),
'min' => 0,
'max' => 36,
- 'initial_value' => 0,
+ 'initial_value' => 24,
'css_var' => '--mdc-data-table-radius',
'blocks' => [
'material/data-table',
@@ -1407,7 +1333,7 @@ public function get_corner_styles_controls() {
'label' => __( 'Image List', 'material-design' ),
'min' => 0,
'max' => 24,
- 'initial_value' => 0,
+ 'initial_value' => 12,
'css_var' => '--mdc-image-list-radius',
'blocks' => [
'material/image-list',
@@ -1426,7 +1352,7 @@ public function get_corner_styles_controls() {
'label' => __( 'Text Field', 'material-design' ),
'min' => 0,
'max' => 20,
- 'initial_value' => 0,
+ 'initial_value' => 4,
'css_var' => '--mdc-text-field-radius',
],
];
@@ -1640,143 +1566,213 @@ public function get_typography_size_controls( $args ) {
return $args;
}
+ /**
+ * Get tracking controls.
+ *
+ * @param mixed $args Customized values.
+ *
+ * @return array Values to use in control.
+ */
+ public function get_tracking_controls( $args ) {
+ $args = wp_parse_args(
+ $args,
+ [
+ 'label' => __( 'Tracking (Letter spacing)', 'material-design' ),
+ 'type' => 'number',
+ 'min' => -5,
+ 'default' => 0,
+ 'max' => 100,
+ ]
+ );
+
+ return $args;
+ }
+
+ /**
+ * Get tracking controls.
+ *
+ * @param mixed $args Customized values.
+ *
+ * @return array Values to use in control.
+ */
+ public function get_line_height_controls( $args ) {
+ $args = wp_parse_args(
+ $args,
+ [
+ 'label' => __( 'Line height', 'material-design' ),
+ 'type' => 'number',
+ 'min' => 0,
+ 'default' => 0,
+ 'max' => 64,
+ ]
+ );
+
+ return $args;
+ }
+
/**
* Build typography size and weight controls.
*
- * @param bool $headlines Whether or not this are headlines.
+ * @param string $token Token name like Display, Headline, Title etc..
*
* @return array Values for controllers.
*/
- public function get_typography_extra_controls( $headlines = true ) {
+ public function get_typography_extra_controls( $token ) {
$controls = [];
- if ( $headlines ) {
- $default_sizes = [ 96, 60, 48, 34, 24, 20 ];
- $default_weights = [
- '100',
- '100',
- 'regular',
- 'regular',
- 'regular',
- '500',
- ];
+ $default_fonts_size = [
+ 'display' => [
+ 'large' => 120,
+ 'medium' => 110,
+ 'small' => 96,
+ ],
+ 'headline' => [
+ 'large' => 60,
+ 'medium' => 48,
+ 'small' => 34,
+ ],
+ 'title' => [
+ 'large' => 24,
+ 'medium' => 20,
+ 'small' => 16,
+ ],
+ 'label' => [
+ 'large' => 16,
+ 'medium' => 14,
+ 'small' => 11,
+ ],
+ 'body' => [
+ 'large' => 16,
+ 'medium' => 14,
+ 'small' => 12,
+ ],
+ ];
- for ( $i = 1; $i < 7; $i ++ ) {
- $id = sprintf( 'headline_%s', $i );
- $controls[] = [
- 'id' => $id,
- 'setting' => $this->prepare_option_name( $id ),
- 'css_vars' => [
- 'size' => sprintf( '--mdc-typography-headline%s-font-size', $i ),
- 'weight' => sprintf( '--mdc-typography-headline%s-font-weight', $i ),
- 'style' => sprintf( '--mdc-typography-headline%s-font-style', $i ),
- ],
- 'value' => $this->get_option( $id ),
- 'label' => sprintf(
- /* translators: Number of heading to display */
- esc_html__( 'Headline %s', 'material-design' ),
- $i
- ),
- 'size' => $this->get_typography_size_controls(
- [
- 'default' => intval( $default_sizes[ $i - 1 ] ),
- 'max' => 96,
- ]
- ),
- 'weight' => $this->get_typography_weight_controls(
- [
- 'default' => $default_weights[ $i - 1 ],
- ]
- ),
- ];
- }
+ $default_tracking = [
+ 'display' => [
+ 'large' => -1.5,
+ 'medium' => -1.5,
+ 'small' => -1.5,
+ ],
+ 'headline' => [
+ 'large' => -0.5,
+ 'small' => 0.25,
+ ],
+ 'title' => [
+ 'medium' => 0.15,
+ 'small' => 0.1,
+ ],
+ 'label' => [
+ 'large' => 0.15,
+ 'medium' => 0.1,
+ 'small' => 0.1,
+ ],
+ 'body' => [
+ 'large' => 0.25,
+ 'medium' => 0.4,
+ 'small' => 0.4,
+ ],
+ ];
- $default_sizes = [ 16, 14 ];
- $default_weights = [
- 'regular',
- '500',
- ];
+ $default_weight = [
+ 'display' => [
+ 'large' => 300,
+ 'medium' => 300,
+ 'small' => 300,
+ ],
+ 'headline' => [
+ 'large' => 300,
+ 'medium' => 400,
+ 'small' => 400,
+ ],
+ 'title' => [
+ 'large' => 400,
+ 'medium' => 500,
+ 'small' => 500,
+ ],
+ 'label' => [
+ 'large' => 400,
+ 'medium' => 500,
+ 'small' => 500,
+ ],
+ 'body' => [
+ 'large' => 400,
+ 'medium' => 400,
+ 'small' => 400,
+ ],
+ ];
- for ( $i = 1; $i < 3; $i ++ ) {
- $id = sprintf( 'subtitle_%s', $i );
- $controls[] = [
- 'id' => $id,
- 'setting' => $this->prepare_option_name( $id ),
- 'css_vars' => [
- 'size' => sprintf( '--mdc-typography-subtitle%s-font-size', $i ),
- 'weight' => sprintf( '--mdc-typography-subtitle%s-font-weight', $i ),
- 'style' => sprintf( '--mdc-typography-subtitle%s-font-style', $i ),
- ],
- 'value' => $this->get_option( $id ),
- 'label' => sprintf(
- /* translators: Number of heading to display */
- esc_html__( 'Subtitle %s', 'material-design' ),
- $i
- ),
- 'size' => $this->get_typography_size_controls(
- [
- 'default' => intval( $default_sizes[ $i - 1 ] ),
- ]
- ),
- 'weight' => $this->get_typography_weight_controls(
- [
- 'default' => $default_weights[ $i - 1 ],
- ]
- ),
- ];
- }
- } else {
- $keys = [
- 'body1' => [
- 'label' => __( 'Body 1', 'material-design' ),
- 'size' => 16,
- 'weight' => 'regular',
- ],
- 'body2' => [
- 'label' => __( 'Body 2', 'material-design' ),
- 'size' => 14,
- 'weight' => 'regular',
- ],
- 'button' => [
- 'label' => __( 'Button', 'material-design' ),
- 'size' => 14,
- 'weight' => '500',
- ],
- 'caption' => [
- 'label' => __( 'Caption', 'material-design' ),
- 'size' => 12,
- 'weight' => 'regular',
- ],
- 'overline' => [
- 'label' => __( 'Overline', 'material-design' ),
- 'size' => 10,
- 'weight' => 'regular',
+ $default_line_height = [
+ 'display' => [
+ 'large' => 6,
+ 'medium' => 6,
+ 'small' => 6,
+ ],
+ 'headline' => [
+ 'large' => 3.75,
+ 'medium' => 3.125,
+ 'small' => 2.5,
+ ],
+ 'title' => [
+ 'large' => 1.33,
+ 'medium' => 1.75,
+ 'small' => 1.57,
+ ],
+ 'label' => [
+ 'large' => 1.75,
+ 'medium' => 1.375,
+ 'small' => 1.125,
+ ],
+ 'body' => [
+ 'large' => 1.5,
+ 'medium' => 1.25,
+ 'small' => 1.25,
+ ],
+ ];
+
+ $sub_tokens = [ 'large', 'medium', 'small' ];
+
+ foreach ( $sub_tokens as $sub_t ) {
+ $id = sprintf( '%s_%s', $token, $sub_t );
+ $controls[] = [
+ 'id' => $id,
+ 'setting' => $this->prepare_option_name( $id ),
+ 'css_vars' => [
+ 'lineHeight' => sprintf( '--md-sys-typescale-%s-%s-line-height', $token, $sub_t ),
+ 'size' => sprintf( '--md-sys-typescale-%s-%s-size', $token, $sub_t ),
+ 'tracking' => sprintf( '--md-sys-typescale-%s-%s-tracking', $token, $sub_t ),
+ 'weight' => sprintf( '--md-sys-typescale-%s-%s-weight', $token, $sub_t ),
+ 'style' => sprintf( '--md-sys-typescale-%s-%s-style', $token, $sub_t ),
],
+ 'value' => $this->get_option( $id ),
+ 'label' => sprintf(
+ /* translators: %1$s Token and %2$s Sub-token name. */
+ esc_html__( '%1$s %2$s', 'material-design' ),
+ ucfirst( $token ),
+ $sub_t
+ ),
+ 'size' => $this->get_typography_size_controls(
+ [
+ 'default' => $default_fonts_size[ $token ][ $sub_t ],
+ 'max' => 140,
+ ]
+ ),
+ 'weight' => $this->get_typography_weight_controls(
+ [
+ 'default' => $default_weight[ $token ][ $sub_t ],
+ ]
+ ),
+ 'lineHeight' => $this->get_line_height_controls(
+ [
+ 'default' => $default_line_height[ $token ][ $sub_t ],
+ ]
+ ),
+ 'tracking' => $this->get_tracking_controls(
+ [
+ 'default' => isset( $default_tracking[ $token ][ $sub_t ] ) ? $default_tracking[ $token ][ $sub_t ] : 0,
+ ]
+ ),
];
-
- foreach ( $keys as $key => $settings ) {
- $controls[] = [
- 'id' => esc_html( $key ),
- 'setting' => $this->prepare_option_name( $key ),
- 'label' => esc_html( $settings['label'] ),
- 'css_vars' => [
- 'size' => sprintf( '--mdc-typography-%s-font-size', $key ),
- 'weight' => sprintf( '--mdc-typography-%s-font-weight', $key ),
- 'style' => sprintf( '--mdc-typography-%s-font-style', $key ),
- ],
- 'value' => $this->get_option( $key ),
- 'size' => $this->get_typography_size_controls(
- [
- 'default' => intval( $settings['size'] ),
- ]
- ),
- 'weight' => $this->get_typography_weight_controls(
- [
- 'default' => $settings['weight'],
- ]
- ),
- ];
- }
}
return $controls;
@@ -1824,43 +1820,9 @@ public function filter_style_section( $args, $id ) {
);
}
- if ( 'material_design_dark_colors' === $id || 'material_design_contrast_colors' === $id ) {
- $args['type'] = 'dark_mode';
- }
-
return $args;
}
- /**
- * Get array of existing default choices.
- *
- * @return array Existing choices.
- */
- public function get_style_choices() {
- return [
- 'baseline' => [
- 'label' => __( 'Baseline', 'material-design' ),
- 'url' => $this->plugin->asset_url( 'assets/images/baseline.svg' ),
- ],
- 'crane' => [
- 'label' => __( 'Crane', 'material-design' ),
- 'url' => $this->plugin->asset_url( 'assets/images/crane.svg' ),
- ],
- 'fortnightly' => [
- 'label' => __( 'Fortnightly', 'material-design' ),
- 'url' => $this->plugin->asset_url( 'assets/images/fortnightly.svg' ),
- ],
- 'blossom' => [
- 'label' => __( 'Blossom', 'material-design' ),
- 'url' => $this->plugin->asset_url( 'assets/images/blossom.svg' ),
- ],
- 'custom' => [
- 'label' => __( 'Custom', 'material-design' ),
- 'url' => $this->plugin->asset_url( 'assets/images/custom.svg' ),
- ],
- ];
- }
-
/**
* Override control arguments for dark mode variants.
*
@@ -1910,6 +1872,15 @@ public function get_dark_mode_status() {
return $style_settings[ $selected_style ]['dark'];
}
+ /**
+ * Retrieve source color.
+ *
+ * @return string hex source color.
+ */
+ public function get_source_color() {
+ return $this->get_option( 'primary_color' );
+ }
+
/**
* Select sanitization callback.
*
@@ -1949,10 +1920,11 @@ public function get_global_style_controls() {
'id' => 'card_style',
'label' => esc_html__( 'Cards', 'material-design' ),
'type' => 'radio',
- 'default' => 'elevated',
+ 'default' => 'filled',
'choices' => [
'elevated' => esc_html__( 'Elevated', 'material-design' ),
'outlined' => esc_html__( 'Outlined', 'material-design' ),
+ 'filled' => esc_html__( 'Filled', 'material-design' ),
],
],
];
@@ -2000,4 +1972,31 @@ public function add_global_style_control() {
$this->add_settings( $settings );
$this->add_controls( $controls );
}
+
+ /**
+ * Generate color variables based on current palette.
+ *
+ * @param array $color_palette Current color palette.
+ *
+ * @return array Array of variables.
+ */
+ public function generate_theme_variables( $color_palette ) {
+ $variables = [];
+
+ if ( empty( $color_palette ) ) {
+ return [];
+ }
+
+ foreach ( $color_palette as $key => $value ) {
+ $token = '--md-sys-color-' . strtolower( preg_replace( '/([a-z])([A-Z])/', '$1-$2', $key ) );
+ $color = Helpers::rgb_to_hex( $value );
+
+ // RGB in csv format `0,0,0` - used in rgba function.
+ $variables[ $token . '-rgb' ] = sprintf( '%1$s:%2$s;', $token . '-rgb', Helpers::rgb_to_rgb_string( $value ) );
+
+ $variables[ $token ] = sprintf( '%1$s:%2$s;', $token, $color );
+ }
+
+ return $variables;
+ }
}
diff --git a/plugin/php/customizer/class-material-color-palette-section.php b/plugin/php/customizer/class-material-color-palette-section.php
index 01d0a41fc..6f335be0a 100644
--- a/plugin/php/customizer/class-material-color-palette-section.php
+++ b/plugin/php/customizer/class-material-color-palette-section.php
@@ -78,38 +78,6 @@ public function __construct( $manager, $id, $args = [], $plugin = null ) {
$this->plugin = $plugin;
}
- /**
- * Render a JS template for the Material color palette tabs.
- *
- * @return void
- */
- public static function tabs_template() {
- ?>
-
-
-
- plugin = $plugin;
}
- /**
- * Get section parameters for JS.
- *
- * @since 4.9.0
- * @return array Exported parameters.
- */
- public function json() {
- $options = get_option( 'material_design' );
- $exported = parent::json();
- $exported['style'] = ucfirst( $options['style'] );
-
- return $exported;
- }
-
/**
* An Underscore (JS) template for rendering this panel's container.
*
diff --git a/plugin/php/customizer/class-material-styles-section.php b/plugin/php/customizer/class-material-styles-section.php
index f61bc0642..c8a0592e6 100644
--- a/plugin/php/customizer/class-material-styles-section.php
+++ b/plugin/php/customizer/class-material-styles-section.php
@@ -78,21 +78,6 @@ public function __construct( $manager, $id, $args = [], $plugin = null ) {
$this->plugin = $plugin;
}
- /**
- * Get section parameters for JS.
- *
- * @since 4.9.0
- * @return array Exported parameters.
- */
- public function json() {
- $options = get_option( 'material_design' );
- $exported = parent::json();
- $exported['style'] = ucfirst( $options['style'] );
- $exported['preview'] = $this->plugin->asset_url( 'assets/images/' . $options['style'] . '.svg' );
-
- return $exported;
- }
-
/**
* An Underscore (JS) template for rendering this panel's container.
*
diff --git a/plugin/php/rest/class-reset-card-style-rest-controller.php b/plugin/php/rest/class-reset-card-style-rest-controller.php
index 08a2a1db2..7c379a1bf 100644
--- a/plugin/php/rest/class-reset-card-style-rest-controller.php
+++ b/plugin/php/rest/class-reset-card-style-rest-controller.php
@@ -97,12 +97,17 @@ public function migrate_posts( \WP_REST_Request $request ) {
[
'"cardStyle":"outlined"',
'"cardStyle":"elevated"',
+ '"cardStyle":"filled"',
],
'"cardStyle":"global"',
$post->post_content
);
$post->post_content = str_replace(
- ' mdc-card--outlined',
+ [
+ ' mdc-card--outlined',
+ ' mdc-card--elevated',
+ ' mdc-card--filled',
+ ],
'',
$post->post_content
);
diff --git a/plugin/php/template-parts/blocks/card-query.php b/plugin/php/template-parts/blocks/card-query.php
index c17a081b4..c690fc969 100644
--- a/plugin/php/template-parts/blocks/card-query.php
+++ b/plugin/php/template-parts/blocks/card-query.php
@@ -38,9 +38,7 @@
$card_style = $attributes['cardStyle'];
$content_length = isset( $attributes['postContentLength'] ) ? $attributes['postContentLength'] : 20;
$global_card_style = $material_design_plugin->block_types->get_global_styles( 'card_style' );
-$classes = $card_style === 'outlined'
- ||
- ( $card_style === 'global' && $global_card_style === 'outlined' ) ? 'mdc-card--outlined' : '';
+$classes = sprintf( 'mdc-card--%s', $card_style === 'global' ? $global_card_style : $card_style );
if ( empty( $block ) || ! isset( $block->context['postId'] ) ) {
return '';
@@ -63,7 +61,7 @@
-
+
@@ -86,13 +84,13 @@ class="post-card__title mdc-typography mdc-typography--headline6"
