Merge branch 'main' into relocate-source-assets

newfold-labs · Aug 22, 2024 · b722c95 · b722c95
2 parents 6a0acb6 + 7443e38
commit b722c95
Show file tree

Hide file tree

Showing 14 changed files with 177 additions and 149 deletions.
diff --git a/README.md b/README.md
@@ -136,7 +136,7 @@ Ensure that these files are committed to the repository, as they are essential c
 
 5. Confirm that `<new_version>` exists on both [GitHub Tags](https://github.com/newfold-labs/wp-module-patterns/tags) and [Satis](https://newfold-labs.github.io/satis/#patterns).
 
-## More on NewFold WordPress Modules
+## More on Newfold WordPress Modules
 
 - <a href="https://github.com/newfold-labs/wp-module-loader#endurance-wordpress-modules">What are modules?</a>
 - <a href="https://github.com/newfold-labs/wp-module-loader#creating--registering-a-module">Creating/registering

diff --git a/includes/Admin/CTA.php b/includes/Admin/CTA.php
@@ -27,7 +27,7 @@ public function add_cta_to_add_new_button() {
 		$cta_text = sprintf(
 			// Translators: %1$s is the opening anchor tag, %2$s is the closing anchor tag.
 			__( 'Create pages fast with the %1$sWonderBlocks Library%2$s.', 'nfd-wonder-blocks' ),
-			'<a href=\"' . \esc_url( \admin_url( 'post-new.php?post_type=page&wonder-blocks-library=templates' ) ) . '\">',
+			'<a href=\"' . \esc_url( \admin_url( 'post-new.php?post_type=page&wb-library=templates' ) ) . '\">',
 			'</a>'
 		);
 

diff --git a/includes/BlockStyles.php b/includes/BlockStyles.php
@@ -0,0 +1,49 @@
+<?php
+
+namespace NewfoldLabs\WP\Module\Patterns;
+
+class BlockStyles {
+
+	/**
+	 * Constructor to hook into WordPress.
+	 */
+	public function __construct() {
+		add_action( 'init', [ $this, 'register_block_styles' ] );
+	}
+
+	/**
+	 * Register custom block styles for the core/group block.
+	 */
+	public function register_block_styles() {
+
+		$styles = [
+			[
+				'name'  => 'nfd-theme-white',
+				'label' => __( 'White', 'nfd-wonder-blocks' ),
+			],
+			[
+				'name'  => 'nfd-theme-light',
+				'label' => __( 'Light', 'nfd-wonder-blocks' ),
+			],
+			[
+				'name'  => 'nfd-theme-dark',
+				'label' => __( 'Dark', 'nfd-wonder-blocks' ),
+			],
+			[
+				'name'  => 'nfd-theme-darker',
+				'label' => __( 'Darker', 'nfd-wonder-blocks' ),
+			],
+			[
+				'name'  => 'nfd-theme-primary',
+				'label' => __( 'Primary', 'nfd-wonder-blocks' ),
+			],
+		];
+
+		foreach ( $styles as $style ) {
+			register_block_style(
+				'core/group',
+				$style
+			);
+		}
+	}
+}
diff --git a/includes/CSSUtilities.php b/includes/CSSUtilities.php
@@ -49,6 +49,7 @@ private function get_inline_css() {
                 /* Colors */
                 --wndb--color--primary: var(--wp--preset--color--primary);
                 --wndb--color--secondary: var(--wp--preset--color--secondary);
+				--wndb--color--body: var(--wp--preset--color--base);
                 
 				--wndb--p: var(--wp--preset--spacing--40);
                 

diff --git a/includes/Patterns.php b/includes/Patterns.php
@@ -7,6 +7,7 @@
 use NewfoldLabs\WP\Module\Patterns\Library\Admin as PatternsLibrary;
 use NewfoldLabs\WP\Module\Patterns\Api\RestApi;
 use NewfoldLabs\WP\Module\Patterns\Admin\CTA;
+use NewfoldLabs\WP\Module\Patterns\BlockStyles;
 
 /**
  * Patterns module.
@@ -36,5 +37,6 @@ public function __construct( Container $container ) {
 
 		new CSSUtilities();
 		new RestApi();
+		new BlockStyles();
 	}
 }
diff --git a/includes/PostFiltersHandler.php b/includes/PostFiltersHandler.php
diff --git a/source/css-utilities/parts/colors/colors.css b/source/css-utilities/parts/colors/colors.css
@@ -48,6 +48,7 @@
 	--wndb--color--borders-strong: var(--wndb--color--text--faded);
 	--wndb--color--subtle: var(--wndb-gray-200);
 	--wndb--color--links: var(--wndb--color--primary);
+	--wndb--color--body: var(--wndb--color--surface);
 }
 
 /*
@@ -57,8 +58,8 @@
  *  - By default, the `light` theme is applied. 
  *  - Nested themes are supported.
  */
-
-.nfd-theme-white {
+.is-style-nfd-theme-white,
+.nfd-theme-white:not([class*="is-style-nfd-theme"]) {
 	--wndb--color--borders: var(--wndb-gray-150);
 	--wndb--color--borders-light: var(--wndb-gray-100);
 	--wndb--color--links: var(--wndb--color--primary);
@@ -69,7 +70,8 @@
 	--wndb--color--text: var(--wndb-gray-800);
 }
 
-.nfd-theme-light {
+.is-style-nfd-theme-light,
+.nfd-theme-light:not([class*="is-style-nfd-theme"]) {
 	--wndb--color--borders: var(--wndb-gray-150);
 	--wndb--color--borders-light: var(--wndb-gray-150);
 	--wndb--color--links: var(--wndb--color--primary);
@@ -80,7 +82,8 @@
 	--wndb--color--text: var(--wndb-gray-800);
 }
 
-.nfd-theme-dark {
+.is-style-nfd-theme-dark,
+.nfd-theme-dark:not([class*="is-style-nfd-theme"]) {
 	--wndb--color--borders: var(--wndb-white-100);
 	--wndb--color--borders-light: var(--wndb--color--borders);
 	--wndb--color--subtle: var(--wndb-white-200);
@@ -93,7 +96,8 @@
 	--wndb-mask-color: rgba(255, 255, 255, 0.12);
 }
 
-.nfd-theme-darker {
+.is-style-nfd-theme-darker,
+.nfd-theme-darker:not([class*="is-style-nfd-theme"]) {
 	--wndb--color--borders: var(--wndb-white-100);
 	--wndb--color--borders-light: var(--wndb--color--borders);
 	--wndb--color--subtle: var(--wndb-white-200);
@@ -106,7 +110,8 @@
 	--wndb-mask-color: rgba(255, 255, 255, 0.12);
 }
 
-.nfd-theme-primary {
+.is-style-nfd-theme-primary,
+.nfd-theme-primary:not([class*="is-style-nfd-theme"]) {
 	--wndb--color--borders: var(--wndb-white-100);
 	--wndb--color--borders-light: var(--wndb--color--borders);
 	--wndb--color--subtle: var(--wndb-white-200);
@@ -121,11 +126,13 @@
 
 /* --------------------------------- Surface -------------------------------- */
 /* Background */
+[class*="is-style-nfd-theme"]:not(.has-background),
 .nfd-bg-surface:not(.has-background) {
 	background-color: var(--wndb--color--surface);
 }
 
 /* Text color */
+[class*="is-style-nfd-theme"]:not(.has-text-color),
 .nfd-bg-surface:not(.has-text-color) {
 	color: var(--wndb--color--text);
 }
@@ -154,15 +161,23 @@ p.nfd-text-faded:not(.has-text-color):not(.has-link-color):not(.has-background),
 .nfd-bg-surface:not([class*="border-color"]):not([style*="border-top-color"]):not([style*="border-right-color"]):not([style*="border-bottom-color"]):not([style*="border-left-color"]):not(.has-border-color):not(.nfd-border-strong),
 .nfd-bg-surface [style*='border']:not([class*="border-color"]):not([style*="border-top-color"]):not([style*="border-right-color"]):not([style*="border-bottom-color"]):not([style*="border-left-color"]):not(.nfd-border-strong),
 .nfd-bg-surface [style*='border']:not([class*="border-color"]):not([style*="border-top-color"]):not([style*="border-right-color"]):not([style*="border-bottom-color"]):not([style*="border-left-color"]) > img:not(.has-border-color):not([class*="border-color"]):not([style*="border-top-color"]):not([style*="border-right-color"]):not([style*="border-bottom-color"]):not([style*="border-left-color"]),
-.nfd-bg-surface [style*='border']:not([class*="border-color"]):not([style*="border-top-color"]):not([style*="border-right-color"]):not([style*="border-bottom-color"]):not([style*="border-left-color"]) > img:not(.has-border-color):not([class*="border-color"]):not([style*="border-top-color"]):not([style*="border-right-color"]):not([style*="border-bottom-color"]):not([style*="border-left-color"]) > .components-resizable-box__container > img:not([class*="border-color"]):not([style*="border-top-color"]):not([style*="border-right-color"]):not([style*="border-bottom-color"]):not([style*="border-left-color"]){
+.nfd-bg-surface [style*='border']:not([class*="border-color"]):not([style*="border-top-color"]):not([style*="border-right-color"]):not([style*="border-bottom-color"]):not([style*="border-left-color"]) > img:not(.has-border-color):not([class*="border-color"]):not([style*="border-top-color"]):not([style*="border-right-color"]):not([style*="border-bottom-color"]):not([style*="border-left-color"]) > .components-resizable-box__container > img:not([class*="border-color"]):not([style*="border-top-color"]):not([style*="border-right-color"]):not([style*="border-bottom-color"]):not([style*="border-left-color"]),
+[class*="is-style-nfd-theme"]:not([class*="border-color"]):not([style*="border-top-color"]):not([style*="border-right-color"]):not([style*="border-bottom-color"]):not([style*="border-left-color"]):not(.has-border-color):not(.nfd-border-strong),
+[class*="is-style-nfd-theme"] [style*='border']:not([class*="border-color"]):not([style*="border-top-color"]):not([style*="border-right-color"]):not([style*="border-bottom-color"]):not([style*="border-left-color"]):not(.nfd-border-strong),
+[class*="is-style-nfd-theme"] [style*='border']:not([class*="border-color"]):not([style*="border-top-color"]):not([style*="border-right-color"]):not([style*="border-bottom-color"]):not([style*="border-left-color"]) > img:not(.has-border-color):not([class*="border-color"]):not([style*="border-top-color"]):not([style*="border-right-color"]):not([style*="border-bottom-color"]):not([style*="border-left-color"]),
+[class*="is-style-nfd-theme"] [style*='border']:not([class*="border-color"]):not([style*="border-top-color"]):not([style*="border-right-color"]):not([style*="border-bottom-color"]):not([style*="border-left-color"]) > img:not(.has-border-color):not([class*="border-color"]):not([style*="border-top-color"]):not([style*="border-right-color"]):not([style*="border-bottom-color"]):not([style*="border-left-color"]) > .components-resizable-box__container > img:not([class*="border-color"]):not([style*="border-top-color"]):not([style*="border-right-color"]):not([style*="border-bottom-color"]):not([style*="border-left-color"]){
 	border-color: var(--wndb--color--borders);
 }
 
 /* Separator block */
-.nfd-bg-surface .wp-block-separator:not(.has-background):not(.has-text-color):not(.nfd-border-strong) {
+[class*="is-style-nfd-theme"]
+	.wp-block-separator:not(.has-background):not(.has-text-color):not(.nfd-border-strong)
+	.nfd-bg-surface
+	.wp-block-separator:not(.has-background):not(.has-text-color):not(.nfd-border-strong) {
 	border-bottom-color: var(--wndb--color--borders);
 }
 
+[class*="is-style-nfd-theme"] .wp-block-separator:not(.has-background):not(.has-text-color):not(.nfd-border-2),
 .nfd-bg-surface .wp-block-separator:not(.has-background):not(.has-text-color):not(.nfd-border-2) {
 	border-bottom-width: 1px;
 }
@@ -245,6 +260,10 @@ p.nfd-text-faded:not(.has-text-color):not(.has-link-color):not(.has-background),
 	fill: var(--wndb--color--text);
 }
 
+.nfd-container.is-position-sticky:not([class*="nfd-bg-surface"]):not([class*="is-style-nfd-"]):not(.has-background) {
+	background-color: var(--wndb--color--body);
+}
+
 /* ------------------------- Backward compatibility ------------------------- */
 .nfd-bg-gray-100:not(.has-background),
 .nfd-bg-gray-800:not(.has-background) {

diff --git a/src/blocks/inspector-control.js b/src/blocks/inspector-control.js
@@ -1,6 +1,7 @@
 import { InspectorControls } from "@wordpress/block-editor";
 import {
 	Button,
+	Notice,
 	PanelBody,
 	SelectControl,
 	// eslint-disable-next-line @wordpress/no-unsafe-wp-apis
@@ -11,11 +12,9 @@ import { useSelect } from "@wordpress/data";
 import { useMemo } from "@wordpress/element";
 import { addFilter } from "@wordpress/hooks";
 import { __ } from "@wordpress/i18n";
-import { Icon } from "@wordpress/icons";
 
 import classnames from "classnames";
 
-import { rectangleGroup } from "../components/Icons";
 import TitleWithLogo from "../components/TitleWithLogo";
 
 // These block types do not support custom attributes.
@@ -358,16 +357,24 @@ const withInspectorControls = createHigherOrderComponent((BlockEdit) => {
 						>
 							<div className="block-editor-block-styles">
 								<div className="block-editor-block-styles__variants">
+									<Notice
+										className="nfd-wba-mt-2 nfd-wba-mb-1"
+										status="warning"
+										isDismissible={false}
+									>
+										{__(
+											"This feature is now located in the Block Styles section.",
+											"nfd-wonder-blocks"
+										)}
+									</Notice>
 									{customThemeStyles.map((style) => {
 										const buttonText = style.isDefault
 											? __("Default", "nfd-wonder-blocks")
 											: style.label || style.name;
 
 										return (
 											<Button
-												className={classnames("block-editor-block-styles__item", {
-													"is-active": selectedGroupTheme === style.name,
-												})}
+												className={classnames("nfd-wba-w-[calc(50%-4px)] nfd-wba-inline-block")}
 												key={style.name}
 												variant="secondary"
 												label={buttonText}
@@ -376,6 +383,7 @@ const withInspectorControls = createHigherOrderComponent((BlockEdit) => {
 														nfdGroupTheme: style.name,
 													});
 												}}
+												disabled
 												aria-current={selectedGroupTheme === style.name}
 											>
 												<Truncate
@@ -485,9 +493,6 @@ function addSaveProps(saveElementProps, blockType, attributes) {
 		...(attributes?.nfdAnimationDelay && attributes?.nfdAnimation
 			? [attributes.nfdAnimationDelay]
 			: []),
-		...(attributes?.nfdGroupTheme
-			? ["nfd-bg-surface", `nfd-theme-${attributes.nfdGroupTheme}`]
-			: []),
 		...(attributes?.nfdGroupEffect ? [`nfd-bg-effect-${attributes.nfdGroupEffect}`] : []),
 	];
 
@@ -507,6 +512,7 @@ function addSaveProps(saveElementProps, blockType, attributes) {
 				return [];
 		}
 	};
+
 	const classesCombined = new Set([
 		...normalizeAsArray(additionalClasses),
 		...normalizeAsArray(generatedClasses),