Contrib.social

Fix not intractable Add block and Update element action buttons for layout builder modal

Open on Drupal.org →
Created on 6 January 2025, 3 months ago

Problem/Motivation

When updating to Drupal 10.4.0 with new styles from Claro or Gin
This issue was captured by the "Automated Functional Acceptance Testing group - 04 content structure"
with screens with a small heights like ( Ultrawide and wide 15" or 17" ) 1600x1200x24

Steps to reproduce

Scenario: Check if a site admin can create a landing page and add sections to it with different container types
Given I am a logged in user with the "Site admin" user
When I go to "/node/add/landing_page_lb"
And I wait
Then I should see "Create Landing page (Layout Builder)"
When I fill in "Test Landing page (Layout Builder) by Site Admin" for "Title"
And I fill in "Test Landing page (Layout Builder) description" for "Page description"
And I select "published" from "Save as"
And I press the "Save" button
And I wait
Then I should see "Landing page (Layout Builder) Test Landing page (Layout Builder) by Site Admin has been created"
And I should see "This layout builder tool allows you to configure the layout of the main content area."
When I scroll to the bottom of the page
And I wait 1s
Then I should see "Add section at end of layout"
When I add a basic "2 Cols" section at the end of layout
And I select the "Boxed" container type with a "Medium" width
And I select the "md" "33% 67%" section breakpoint
And I add section gutters
Then I should not see "Keep gutters between columns"
And I wait for AJAX to finish
And I select the "Light" section background color
And I uncheck the Edge to Edge Background
And I select the "Dark" section text color
And I set the alignment to "End"
And I scroll to bottom of "#drupal-off-canvas"
And I save the section
And I wait for AJAX to finish
Then I should see "Add block in Section 2, Col 1 region"
When I scroll to the bottom of the page
And I wait 2s
Then I should see "Add section at end of layout"
When I click "Add block in Section 2, Col 1 region"
And I wait for AJAX to finish
And I click "Create content block"
And I wait for AJAX to finish
And I click "Rich text"
And I wait for AJAX to finish
And I check the box "Display title"
And I fill in "Test Rich text in 2 cols section, col 1" for "Title"
And I fill in the rich text editor field "Body" with "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer aliquet diam nunc, ac dictum velit tincidunt quis. Integer ut imperdiet dui, sit amet tempus est. Curabitur molestie sem non purus dignissim pulvinar. Pellentesque id sapien consequat"
And I scroll to the bottom of the page
And I wait 1s
And I press the "Add block" button

      element not interactable
        (Session info: chrome=131.0.6778.204)
      Build info: version: '4.4.0', revision: 'e5c75ed026a'
      System info: host: '06eaf5d338da', ip: '10.89.1.3', os.name: 'Linux', os.arch: 'amd64', os.version: '6.8.0-1020-aws', java.version: '11.0.25'
      Driver info: driver.version: unknown (WebDriver\Exception\ElementNotInteractable)

https://app.circleci.com/pipelines/github/Vardot/varbase/1016/workflows/...

Before the fix Varbase 9
→

Before the fix Varbase 10
→

Proposed resolution

  • Move the Scroll overflow for the BLB to from the layout-builder-modal to the blb tab-content, ensure that only the tab content area scrolls, leaving the rest of the layout static.
  • Make the "Add Block" and "Update" buttons always visible.

Remaining tasks

  • ✅ File an issue about this project
  • ❌ Addition/Change/Update/Fix to this project
  • ❌ Testing to ensure no regression
  • ➖ Automated unit/functional testing coverage
  • ➖ Developer Documentation support on feature change/addition
  • ➖ User Guide Documentation support on feature change/addition
  • ➖ UX/UI designer responsibilities
  • ➖ Accessibility and Readability
  • ❌ Code review from 1 Varbase core team member
  • ❌ Full testing and approval
  • ❌ Credit contributors
  • ❌ Review with the product owner
  • ❌ Update Release Notes and Update Helper on new feature change/addition
  • ❌ Release

Varbase update type

  • ✅ No Update
  • ➖ Optional Update
  • ➖ Forced Update
  • ➖ Forced Update if Unchanged

User interface changes

After the fix: Varbase 9
→

After the fix: Varbase 10
→

API changes

  • N/A

Data model changes

  • N/A

Release notes snippet

  • N/A
🐛 Bug report
Status

Active

Version

9.0

Component

Code

Created by

🇯🇴Jordan Rajab Natshah Jordan

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024