Override Layout Builder off-canvas panel size for all instances of it opening to be appropriate for the navigation and other content rendered inside of it.

Motivation

Layout Builder Edit Panel too narrow when editing a pattern

Expected behavior

In general, if the sidebar try includes the form for editing a pattern (JsonEditor), it should be opened to a wider width (900px). Otherwise, the width should remain unchanged and open to the default width (300px).

There are several instances where you see the off-canvas panel:

  • adding a section to a layout (300px)
  • configuring a section (300px)
  • selecting a pattern/block to add (300px)
  • adding a non-Patternkit block (300px)
  • configuring a non-Patternkit block (300px)
  • adding a Patternkit block (900px)
  • configuring a Patternkit block (900px)
  • removing a block (300px)
  • moving a block (300px)

Issue fork patternkit-3285496

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

mariohernandez created an issue. See original summary.

slucero’s picture

slucero’s picture

bladwin’s picture

Right now, only the following Block Admin options are available to be easily overridden without preprocessing multiple $links arrays:

  • Block Configure (patch applies 900px width)
  • Block Move/Remove (patch applies 400px width)
slucero’s picture

Assigned: bladwin » Unassigned
Status: Active » Needs review
slucero’s picture

I'm adding this to the Beta 7 release plan to include the patch attached above.

slucero’s picture

Status: Needs review » Needs work
Parent issue: #3285496: Update Layout Builder panel size »

For now I'm actually removing this from the Beta 7 release out of concern for an inconsistent user experience that may be confusing. As it works now, the edit form for blocks is greatly improved since the off-canvas tray is made wider by default, but the flow for adding a new block still uses the narrow tray for the form. I worry the inconsistency of this experience will be confusing to editors.

When used with the patch from #2951547: Modify Layout Builder's use of the off-canvas tray to improve UX of larger block forms, the experience is more consistent since the add form becomes wider as well.

Until that issue is resolved and merged in, we may need to explore an alternative solution where the remaining links could be altered and the experience would be more uniformly improved.

slucero’s picture

slucero’s picture

Category: Bug report » Feature request

The new MR I've uploaded alters links for adding and editing Patternkit blocks within Layout Builder. When selecting a Patternkit pattern from the add block list or clicking the "Configure" contextual link on a block within Layout Builder, the edit form within the off-canvas tray should display at a 900 pixel width instead of the default 300. The same links for other blocks should not be affected.

Filtering down to only affect Patternkit blocks for the edit links is still a work in progress.

slucero’s picture

Status: Needs work » Needs review
Parent issue: » #3506209: Patternkit 9.1.2 Release Plan

This is now ready for review and testing.

slucero credited minsharm.

slucero’s picture

Issue summary: View changes

I've updated the summary and clarified the expected behaviors:

In general, if the sidebar try includes the form for editing a pattern (JsonEditor), it should be opened to a wider width (900px). Otherwise, the width should remain unchanged and open to the default width (300px).

There are several instances where you see the off-canvas panel:

  • adding a section to a layout (300px)
  • configuring a section (300px)
  • selecting a pattern/block to add (300px)
  • adding a non-Patternkit block (300px)
  • configuring a non-Patternkit block (300px)
  • adding a Patternkit block (900px)
  • configuring a Patternkit block (900px)
  • removing a block (300px)
  • moving a block (300px)
minsharm’s picture

StatusFileSize
new1.66 MB

I have tested it and result looks good to me on both D10 and D11.

  • adding a section (300px)
  • configuring a section (300px)
  • choosing a pattern/block (300px)
  • adding a Patternkit block (900px)
  • configuring a Patternkit block (900px)
  • adding a non-Patternkit block (300px)
  • configuring a non-Patternkit block (300px)
  • removing a block (300px)
  • moving a block (300px)
slucero’s picture

Issue summary: View changes
slucero’s picture

Status: Needs review » Reviewed & tested by the community

Tested and ready to merge into 9.1.2 release.

  • slucero committed e0d684a9 on 9.1.x
    Issue #3285496 by slucero, bladwin, minsharm: Update Layout Builder...
slucero’s picture

Status: Reviewed & tested by the community » Fixed

Merged for inclusion in the 9.1.2 release.

Status: Fixed » Closed (fixed)

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