Skip to content

Add Block Text Color option to Block Design settings#788

Open
jjroelofs wants to merge 5 commits into
8.xfrom
jur/8.x/786-add-block-text-color
Open

Add Block Text Color option to Block Design settings#788
jjroelofs wants to merge 5 commits into
8.xfrom
jur/8.x/786-add-block-text-color

Conversation

@jjroelofs

Copy link
Copy Markdown
Collaborator

Summary

  • Adds a "Block Text Color" color picker (select + custom text field) to Block Design settings, following the same pattern as the existing Block Background option.
  • Registers block_text_color as a CSS variable in the theme settings CSS pipeline.
  • Adds --dxt-setting-block-text-color: inherit default in variables.scss and applies color: var(--dxt-setting-block-text-color) to .region-block-design .block in layout.scss.

Fixes: #786

Test plan

  • Navigate to Appearance > DXPR Theme > Settings > Block Design > Customize Design > Block Element
  • Verify the "Block Text Color" select field appears after "Block Background"
  • Select a predefined color and confirm block text color changes in selected regions
  • Select "Custom" and enter a hex value; confirm the custom color input appears and the text color updates
  • Verify blocks with card/bg-/dxpr-theme-util-background classes are not affected (excluded by the :not() selector)

@jjroelofs jjroelofs force-pushed the jur/8.x/786-add-block-text-color branch from ad5ec43 to 7c5e5ad Compare April 4, 2026 07:22
@jjroelofs

Copy link
Copy Markdown
Collaborator Author

I reviewed this change and found two follow-ups:

  • [P2] scss/base/layout.scss:154-157 Block text color won't reach links and headings inside the block. This only sets color on the block wrapper, so it affects descendants that inherit color. The theme's global typography rules still assign explicit colors to anchors and headings (scss/base/typography.scss:114-155), which means a dark custom block background will still render common block content like menu links and headings in the default dark theme colors. In practice the new setting only changes plain body copy, not much of the content users expect it to control.

  • [P2] features/sooper-block-design/block-design-theme-settings.inc:100-115 Theme-settings preview was not wired up for the new color field. The PHP form adds block_text_color, but the admin preview logic still doesn't recognize that setting: both js/dist/settings-admin/field-handler.js and the shipped js/minified/dxpr-theme-settings-admin.bundle.min.js only handle header_block_text_color. Since admin.themesettings loads the minified bundle from dxpr_theme.libraries.yml, the sidebar preview will treat palette values like text as raw CSS colors and this control won't preview correctly until after save.

…view

- Apply block text color to links, headings, and .btn-link inside
  blocks so the color overrides typography rules that set explicit
  colors on these elements
- Add block_text_color to field-handler.js color case list so the
  admin preview resolves palette values correctly
- Rebuild compiled CSS and JS bundle
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Add block text color option to Block Design settings

1 participant