Problem/Motivation

When using the Cygnet theme without shadow DOM enabled, the Properties buttons are misplaced. They should appear horizontally in line with their section headings, but they are appearing below their headings.

Steps to reproduce

  1. Install a Drupal 9 site with standard install profile.
  2. Enable modules: patternkit_example and layout_builder.
  3. Enable CKEditor wysiwyg integration for Patternkit
    • Go to /admin/config/user-interface/patternkit/json
    • Un-tick Use the Shadow DOM
    • Select cygnet in field Select the JSON Editor Theme/
    • Save
  4. Configure a content type to use Layout Builder.
  5. Create a node of that content type, then go to its Layout tab.
  6. Add the block of type "[Patternkit] Example"
  7. Notice that the Properties button is not horizontally aligned with its headings.

Screenshot of problem:
Screenshot showing Properties button not aligned correctly

Proposed resolution

Since the buttons are aligned correctly when using Cygnet with shadow DOM, investigate which styles seem to be missing when shadow DOM is disabled. If found, restore those styles to Cygnet when shadow DOM is disabled.

Goal for how Properties buttons should look:
Screenshot showing Properties button correctly aligned

Remaining tasks

None

Release notes snippet

Restored some missing core JSON Editor styles to Cygnet theme when shadow DOM is disabled.

Issue fork patternkit-3264322

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

Comments

krisahil created an issue. See original summary.

krisahil’s picture

Assigned: krisahil » mariohernandez
Issue summary: View changes
Status: Active » Needs review
mariohernandez’s picture

Status: Needs review » Reviewed & tested by the community

Successfully tested fix for misplaced buttons. Thank you, @krisahil

mariohernandez’s picture

mariohernandez’s picture

Status: Reviewed & tested by the community » Fixed

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.

mariohernandez’s picture