From 10eb1740906f799bfa5d33c51d15330f5141f54f Mon Sep 17 00:00:00 2001 From: Alquen Sarmiento Date: Thu, 6 Nov 2025 10:51:55 +0800 Subject: [PATCH 1/3] feat: add header and footer patterns --- parts/footer.html | 61 +---------------- parts/header.html | 8 +-- patterns/footer-centered.php | 37 +++++++++++ patterns/footer-minimal.php | 19 ++++++ patterns/footer-no-title.php | 43 ++++++++++++ patterns/footer.php | 70 ++++++++++++++++++++ patterns/header-centered.php | 17 +++++ patterns/header-with-buttons.php | 25 +++++++ patterns/header-with-vertical-navigation.php | 19 ++++++ patterns/header.php | 17 +++++ templates/single.html | 2 +- 11 files changed, 250 insertions(+), 68 deletions(-) create mode 100644 patterns/footer-centered.php create mode 100644 patterns/footer-minimal.php create mode 100644 patterns/footer-no-title.php create mode 100644 patterns/footer.php create mode 100644 patterns/header-centered.php create mode 100644 patterns/header-with-buttons.php create mode 100644 patterns/header-with-vertical-navigation.php create mode 100644 patterns/header.php diff --git a/parts/footer.html b/parts/footer.html index 00cbb97..3506c13 100644 --- a/parts/footer.html +++ b/parts/footer.html @@ -1,60 +1 @@ - -
-
-
-
- - - - -
    - - - - - -
-
- - - -
-
-
-
-
-

Resources

- - -
- - - -
-

About

- - -
-
-
-
-
-
- - - - - - - -
-

© 2025 · Start Stackable Theme

- - - -

- Designed with WordPress

-
-
-
- \ No newline at end of file + diff --git a/parts/header.html b/parts/header.html index dd0d2cd..47f5551 100644 --- a/parts/header.html +++ b/parts/header.html @@ -1,7 +1 @@ - -
-
- -
-
- \ No newline at end of file + diff --git a/patterns/footer-centered.php b/patterns/footer-centered.php new file mode 100644 index 0000000..438b8b4 --- /dev/null +++ b/patterns/footer-centered.php @@ -0,0 +1,37 @@ + + + +
+
+ + + + +
    + + + + + +
+ + + +
+

© 2025 · Start Stackable Theme

+ + + +

Built with WordPress

+
+
+
+ \ No newline at end of file diff --git a/patterns/footer-minimal.php b/patterns/footer-minimal.php new file mode 100644 index 0000000..52a07bc --- /dev/null +++ b/patterns/footer-minimal.php @@ -0,0 +1,19 @@ + + + +
+
+ + +

© 2025 · Start Stackable Theme

+
+
+ \ No newline at end of file diff --git a/patterns/footer-no-title.php b/patterns/footer-no-title.php new file mode 100644 index 0000000..df617c9 --- /dev/null +++ b/patterns/footer-no-title.php @@ -0,0 +1,43 @@ + + + +
+
+
+
+
+

Resources

+ + +
+
+ + + +
+
+

About

+ + +
+
+
+ + + + + + + +

© 2025 · Start Stackable Theme

+
+
+ \ No newline at end of file diff --git a/patterns/footer.php b/patterns/footer.php new file mode 100644 index 0000000..6591585 --- /dev/null +++ b/patterns/footer.php @@ -0,0 +1,70 @@ + + + +
+
+
+
+ + + + +
    + + + + + +
+
+ + + +
+
+
+
+
+

Resources

+ + +
+ + + +
+

About

+ + +
+
+
+
+
+
+ + + + + + + +
+

© 2025 · Start Stackable Theme

+ + + +

+ Built with WordPress

+
+
+
+ \ No newline at end of file diff --git a/patterns/header-centered.php b/patterns/header-centered.php new file mode 100644 index 0000000..321d4d8 --- /dev/null +++ b/patterns/header-centered.php @@ -0,0 +1,17 @@ + + + +
+
+ +
+
+ \ No newline at end of file diff --git a/patterns/header-with-buttons.php b/patterns/header-with-buttons.php new file mode 100644 index 0000000..7a2654d --- /dev/null +++ b/patterns/header-with-buttons.php @@ -0,0 +1,25 @@ + + + +
+
+ + +
+
Login
+ + + +
Get Started
+
+
+
+ \ No newline at end of file diff --git a/patterns/header-with-vertical-navigation.php b/patterns/header-with-vertical-navigation.php new file mode 100644 index 0000000..cdcebff --- /dev/null +++ b/patterns/header-with-vertical-navigation.php @@ -0,0 +1,19 @@ + + + +
+
+ + +
+
+
+ \ No newline at end of file diff --git a/patterns/header.php b/patterns/header.php new file mode 100644 index 0000000..f5cdb4e --- /dev/null +++ b/patterns/header.php @@ -0,0 +1,17 @@ + + + +
+
+ +
+
+ \ No newline at end of file diff --git a/templates/single.html b/templates/single.html index 7869bc3..ca88582 100644 --- a/templates/single.html +++ b/templates/single.html @@ -6,7 +6,7 @@ -
+

·

From e583b6325e25813500f19ee6627e95f95d9fed07 Mon Sep 17 00:00:00 2001 From: Alquen Sarmiento Date: Tue, 11 Nov 2025 11:36:00 +0800 Subject: [PATCH 2/3] feat: native works with design system, compatibility with block style inheritance --- function.php | 13 ---------- functions.php | 39 ++++++++++++++++++++++++++++ theme.json | 72 ++++++++++++++++++++++++++++++++------------------- 3 files changed, 85 insertions(+), 39 deletions(-) delete mode 100644 function.php create mode 100644 functions.php diff --git a/function.php b/function.php deleted file mode 100644 index 1e2eadf..0000000 --- a/function.php +++ /dev/null @@ -1,13 +0,0 @@ -get_data(); + $data['styles']['blocks'] = []; + + // Return a new WP_Theme_JSON instance with the modified data + return new WP_Theme_JSON( $data, 'theme' ); + } + + add_filter( 'wp_theme_json_data_theme', 'start_stackable_modify_theme_json' ); +} + diff --git a/theme.json b/theme.json index 7a0f3a7..1b0437d 100644 --- a/theme.json +++ b/theme.json @@ -166,49 +166,69 @@ "useRootPaddingAwareAlignments": true }, "styles": { - "css": ":root :where(.is-layout-constrained) > * { margin-block-start: 0; margin-block-end: 24px; }", + "css": ":root :where(.is-layout-constrained) > * { margin-block-start: 0; margin-block-end: var(--stk-block-margin-bottom, 24px); }", "typography": { "fontFamily": "var:preset|font-family|sans-serif", "fontSize": "var:preset|font-size|medium" }, "color": { - "background": "var:preset|color|base", - "text": "var:preset|color|contrast" - }, - "spacing": { - "blockGap": "24px" + "background": "var(--stk-background-color, var(--wp--preset--color--base))", + "text": "var(--stk-text-color, var(--wp--preset--color--contrast))" }, "blocks": { "core/button": { "spacing": { - "margin": { - "top": "0px", - "bottom": "24px" - } + "padding": "var(--stk-button-padding)" + }, + "color": { + "text": "var(--stk-button-text-color)", + "background": "var(--stk-button-background-color)" }, + "border": { + "radius": "var(--stk-button-border-radius)", + "width": "var(--stk-button-border-width)", + "color": "var(--stk-button-border-color)", + "style": "var(--stk-button-border-style)" + }, + "shadow": "var(--stk-button-box-shadow)" + }, + "core/heading": { + "color": { + "text": "var(--stk-heading-color)" + } + }, + "core/paragraph": { + "color": { + "text": "var(--stk-text-color)" + } + }, + "core/image": { "border": { - "radius": "0" + "radius": "var(--stk-image-border-radius)" + }, + "shadow": "var(--stk-image-drop-shadow)" + } + }, + "elements": { + "button": { + "spacing": { + "padding": "var:preset|spacing|medium" }, "color": { "text": "var:preset|color|base", "background": "var:preset|color|primary" }, - "variations": { - "outline": { - "border": { - "color": "var:preset|color|primary", - "radius": "0", - "width": "2px" - }, - "color": { - "text": "var:preset|color|primary", - "background": "var:preset|color|base" - } - } + "border": { + "width": "0px", + "radius": "0px", + "style": "none" } - } - }, - "elements": { + }, + "heading": { + "color": { + "text": "var:preset|color|contrast" + } + }, "h1": { "typography": { "fontSize": "var:preset|font-size|xx-large" From 225163bed5c1bf31efb1001d2f95cbff23f35fe5 Mon Sep 17 00:00:00 2001 From: Alquen Sarmiento Date: Mon, 1 Dec 2025 10:39:49 +0800 Subject: [PATCH 3/3] fix: directly set design system to native blocks --- assets/css/design-system.css | 60 ++++++++++++++++++++++++++++++++++++ functions.php | 26 +++++----------- theme.json | 40 ++---------------------- 3 files changed, 71 insertions(+), 55 deletions(-) create mode 100644 assets/css/design-system.css diff --git a/assets/css/design-system.css b/assets/css/design-system.css new file mode 100644 index 0000000..7a270ca --- /dev/null +++ b/assets/css/design-system.css @@ -0,0 +1,60 @@ +:is([class*='stk--background-scheme'], + [class*='stk--container-scheme'], + .stk--has-base-scheme, + .stk--has-background-scheme .stk-block-background, + .stk--has-container-scheme .stk-container:not(.stk--no-background)) p { + color: var(--stk-text-color); +} + +:is([class*='stk--background-scheme'], + [class*='stk--container-scheme'], + .stk--has-base-scheme, + .stk--has-background-scheme .stk-block-background, + .stk--has-container-scheme .stk-container:not(.stk--no-background)) .wp-block-heading { + color: var(--stk-heading-color); +} + +:is([class*='stk--background-scheme'], + [class*='stk--container-scheme'], + .stk--has-base-scheme, + .stk--has-background-scheme .stk-block-background, + .stk--has-container-scheme .stk-container:not(.stk--no-background)) a { + color: var(--stk-link-color, var(--theme-link-initial-color, unset)); +} + +:is([class*='stk--background-scheme'], + [class*='stk--container-scheme'], + .stk--has-base-scheme, + .stk--has-background-scheme .stk-block-background, + .stk--has-container-scheme .stk-container:not(.stk--no-background)) a:hover { + color: var(--stk-link-color-hover, var(--stk-link-color, var(--theme-link-hover-color, unset))); +} + +:is([class*='stk--background-scheme'], + [class*='stk--container-scheme'], + .stk--has-base-scheme, + .stk--has-background-scheme .stk-block-background, + .stk--has-container-scheme .stk-container:not(.stk--no-background)) .wp-element-button { + background: var(--stk-button-background-color); + color: var(--stk-button-text-color); + padding: var(--stk-button-padding); +} + +:is([class*='stk--background-scheme'], + [class*='stk--container-scheme'], + .stk--has-base-scheme, + .stk--has-background-scheme .stk-block-background, + .stk--has-container-scheme .stk-container:not(.stk--no-background)) .wp-element-button:hover { + background: var(--stk-button-background-color-hover, var(--stk-button-background-color)); + color: var(--stk-button-text-color-hover, var(--stk-button-text-color)); +} + +:is([class*='stk--background-scheme'], + [class*='stk--container-scheme'], + .stk--has-base-scheme, + .stk--has-background-scheme .stk-block-background, + .stk--has-container-scheme .stk-container:not(.stk--no-background)) .is-style-outline .wp-element-button { + background:transparent; + color: var(--stk-button-background-color); + border-color: var(--stk-button-background-color); +} diff --git a/functions.php b/functions.php index 5c0a004..ed12b05 100644 --- a/functions.php +++ b/functions.php @@ -15,25 +15,15 @@ function start_stackable_setup() { add_action( 'after_setup_theme', 'start_stackable_setup' ); } +function start_stackable_enqueue_styles() { + $style_path = get_template_directory_uri() . '/assets/css/design-system.css'; -if ( ! function_exists( 'start_stackable_modify_theme_json' ) ) { - function start_stackable_modify_theme_json( $theme_json ) { - // If Stackable Block Style Inheritance is enabled, return the original theme.json. - // This allows Stackable Block style Inheritance to get styles from the "elements" section - // for Stackable blocks, while still allowing Stackable Design System to apply styles - // to core blocks through the "blocks" section. - if ( ! get_option( 'stackable_disable_block_style_inheritance' )) { - return $theme_json; - } + // Frontend + wp_enqueue_style('start-stackable-block-styles', $style_path, [], wp_get_theme()->get('Version')); - // If disabled, remove the "blocks" styles from theme.json to prevent conflicts. - $data = $theme_json->get_data(); - $data['styles']['blocks'] = []; - - // Return a new WP_Theme_JSON instance with the modified data - return new WP_Theme_JSON( $data, 'theme' ); - } - - add_filter( 'wp_theme_json_data_theme', 'start_stackable_modify_theme_json' ); + // Editor + wp_enqueue_style('start-stackable-styles-editor', $style_path, [], wp_get_theme()->get('Version')); } +add_action('wp_enqueue_scripts', 'start_stackable_enqueue_styles'); +add_action('enqueue_block_editor_assets', 'start_stackable_enqueue_styles'); diff --git a/theme.json b/theme.json index 1b0437d..3f1203b 100644 --- a/theme.json +++ b/theme.json @@ -172,47 +172,13 @@ "fontSize": "var:preset|font-size|medium" }, "color": { - "background": "var(--stk-background-color, var(--wp--preset--color--base))", - "text": "var(--stk-text-color, var(--wp--preset--color--contrast))" - }, - "blocks": { - "core/button": { - "spacing": { - "padding": "var(--stk-button-padding)" - }, - "color": { - "text": "var(--stk-button-text-color)", - "background": "var(--stk-button-background-color)" - }, - "border": { - "radius": "var(--stk-button-border-radius)", - "width": "var(--stk-button-border-width)", - "color": "var(--stk-button-border-color)", - "style": "var(--stk-button-border-style)" - }, - "shadow": "var(--stk-button-box-shadow)" - }, - "core/heading": { - "color": { - "text": "var(--stk-heading-color)" - } - }, - "core/paragraph": { - "color": { - "text": "var(--stk-text-color)" - } - }, - "core/image": { - "border": { - "radius": "var(--stk-image-border-radius)" - }, - "shadow": "var(--stk-image-drop-shadow)" - } + "background": "var:preset|color|base", + "text": "var:preset|color|contrast" }, "elements": { "button": { "spacing": { - "padding": "var:preset|spacing|medium" + "padding": "12px 16px" }, "color": { "text": "var:preset|color|base",