New block styles!

[RachelRVasquez]

All Submissions:

• Have you followed the Contributing guidelines?
• Does your code follow the WordPress' coding standards?
• Have you checked to ensure there aren't other open Pull Requests for the same update/change?

Changes proposed in this Pull Request:

This PR expands Memberlite’s block-editor design options by adding multiple block style variations (with matching editor/front-end styling), enabling drop caps and gradients, and moving editor-only styles to load inside the editor iframe to avoid front-end bleed.

Gradients are based on the Memberlite color scheme/color pickers and get added to the theme.json dynamically the same way we add in our color palette.

How to test the changes in this Pull Request:

Will set this up on our demo site for easier testing...

Other information:

• Have you added an explanation of what your changes do and why you'd like us to include them?
• Have you successfully run tests with your changes locally?

Changelog entry

Register new block styles for core blocks (list, button, separator, search, loginout, cover). Add/extend front-end SCSS and editor-only CSS to implement the new style variations. Enable drop caps and generate a dynamic gradient palette based on the active Memberlite color scheme; switch editor styling to add_editor_style() and load Font Awesome in the editor.

[flintfromthebasement]

PR: #301 — Block styles variations
RachieVee → dev | 6 files, +1023 -43 lines
#301

Summary
Substantial feature PR adding block style variations (list, button, separator, search, loginout, cover) plus a dynamic gradient palette. Generally clean, well-structured approach using a data-driven loop for style registration. Three issues need attention before merge.

Issues

Major css/editor.css:139, src/scss/blocks/_blocks.scss:755 — CSS variable mismatch between editor and frontend for all separator styles. editor.css uses var(--wp--preset--color--borders) (WordPress preset token) throughout; _blocks.scss uses var(--memberlite-color-borders) (theme custom property). Affects dots, wave, double, and all four flourish styles. If these two tokens don't resolve to the same value, separator colors will differ between editor preview and the rendered frontend. Pick one and make them consistent — likely --memberlite-color-borders to match the rest of the theme's convention.

Major src/scss/blocks/_blocks.scss:1123 — width: max-content applied on the base .wp-block-loginout selector, not scoped to .is-style-loginout-button. This changes layout behavior for every loginout block on existing sites regardless of style. Move it inside the &.is-style-loginout-button rule.

Major src/scss/blocks/_blocks.scss:116-118 — Removed the &:where(:not(.is-style-wide, .is-style-dots)) { max-width: 100px; } rule. This was the default narrow separator width. Removing it widens all default separators site-wide on existing installs. If intentional (to avoid conflicting with new styles), document it in the PR description so reviewers can sign off on the behavior change.

Minor src/scss/blocks/_blocks.scss:948, css/editor.css:347 — height: 50px on icon-round/icon-square search buttons is present in the SCSS source but commented out in editor.css. Editor preview will differ from frontend rendering for these styles.

Minor functions.php:492 — Font Awesome enqueued with version 7.2.0, but the icon CSS uses font-family: 'Font Awesome 5 Free'. FA6+ changed the font-family name to 'Font Awesome 6 Free'. Verify the bundled file version and align the font-family declaration to match, or the arrow icons will silently fail to render in the editor preview.

Minor theme.json:1217 — dropCap changed from false to true. Unrelated to block styles. Confirm this is intentional; it enables the drop cap UI for all paragraph blocks.

Looks Good

The refactor in inc/block-styles.php from 23 lines of repeated register_block_style() calls to a data-driven loop is exactly the right pattern — easy to add new styles without boilerplate. Gradient palette generation in functions.php:517-560 is clean and correctly derives variants from the active customizer colors.

Questions

1. Is Font Awesome already enqueued on the frontend by another path? If not, the arrow button styles will silently render without the icon since enqueue_block_editor_assets is editor-only.
2. Was the enqueue_block_assets → enqueue_block_editor_assets change for editor.css intentional? The compiled SCSS handles frontend coverage, but existing installs that relied on editor.css loading on the frontend will see different behavior.

[Copilot]

Pull request overview

This PR expands Memberlite’s block-editor design options by adding multiple block style variations (with matching editor/front-end styling), enabling drop caps and gradients, and moving editor-only styles to load inside the editor iframe to avoid front-end bleed.

Changes:

• Register new block styles for core blocks (list, button, separator, search, loginout, cover).
• Add/extend front-end SCSS and editor-only CSS to implement the new style variations.
• Enable drop caps and generate a dynamic gradient palette based on the active Memberlite color scheme; switch editor styling to add_editor_style() and load Font Awesome in the editor.

Reviewed changes

Copilot reviewed 7 out of 7 changed files in this pull request and generated 8 comments.

Show a summary per file

File	Description
theme.json	Enables additional block/editor capabilities (drop caps, per-block gradient/link settings).
functions.php	Loads editor styles via add_editor_style() and dynamically injects gradient presets into theme.json data.
inc/block-styles.php	Registers the new block style variations via register_block_style().
src/scss/blocks/_blocks.scss	Adds front-end implementations for the new block styles (list/separator/search/button/loginout/cover).
css/editor.css	Adds editor-only styling for the same block style variations (and editor UI tweaks).
inc/colors.php	Updates selected scheme accent/action colors (impacts generated gradients and UI accents).
inc/deprecated.php	Adds a deprecation stub for the removed memberlite_enqueue_block_assets() behavior.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.