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.

Deprecated:

• memberlite_enqueue_block_assets deprecated in favor of editor-styles to enqueue the editor.css and font awesome stylesheets.

Fonts:

• Enabled Font Awesome to be visible in the block editor and updated the sass to reference a $font-family-awesome variable. This makes it easier to reference what Font Awesome we're using without having to remember a version. I've updated all instances calling the font by name in our Sass files.

Block Styles:

• List block: Horizontal Left - Horizontally left aligned lists. No bullets.
• List block: Horizontal Center - Horizontally centered lists. No bullets.
• Buttons block:
  • Pill: Pill shaped
  • Sharp: No border radius
  • Arrow Fill: A regular button with an arrow to the right of the button text
  • Arrow Plain: Looks like a text link with an arrow to the right of it instead of a button style
• Separator block: Faded Edges, Double, Wave, Diamond, Arrow, Tripe Diamond, Circle Diamond (See screenshot)
• Search block: Filled Pill, Filled Sharp, Icon Round, Icon Square (See screenshot)
  • Works with or without the label, with the icon or text version of the button.
  • Does not work when the button position is set to "Button Only." That is intentional.
• Cover block: Added a Slant: Bottom Right, Slant: Bottom Left, and Wavy Bottom style that can be used to give the bottom edge of the cover block a slant or wave. It's a CSS only effect. Works with videos in cover blocks too.
• Loginout block: Added a "Button" style

Accent colors:

We've also changed the accent colors for the Midnight Violet, Cocoa Ash, and Gotham color schemes. Accent colors aren't automatically applied anywhere from our CSS but is available for use in the color palette and may be used in some of our header/footer patterns. These 3 color schemes were also the only color schemes that did not have a unique accent (action) color.

Memberlite gradients:

Custom gradients have been added to the color palette. They 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.

Theme.json:

• Custom gradients have been enabled for the button and group block.
• You can now set a link color on paragraph blocks, not just text color.
• Drop Cap has been enabled for typography.

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.