Problem/Motivation
Blocks filter in layout builder is shown fully white so the placeholder doesn't show.
Steps to reproduce
- Open any page with layout builder with dark theme.
- Choose add block in the layout builder.
- Notice that the filter bellow add a custom block doesn't show a placeholder
Before the fix:

Proposed resolution
- Add
&::placeholderwith style to all input form elements in#drupal-off-canvasor#layout-builder-modal - Switch to use
var(--input-fg-color--placeholder)Claro's CSS3 variable.
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-10.0.3, varbase_layout_builder-10.1.4, varbase-9.1.7, varbase_layout_builder-10.0.57
Varbase update type
- ✅ No Update
- ➖ Optional Update
- ➖ Forced Update
- ➖ Forced Update if Unchanged
User interface changes
After the fix:

API changes
- N/A
Data model changes
- N/A
Release notes snippet
| Comment | File | Size | Author |
|---|---|---|---|
| #9 | Edit-layout-for-Test-v10x1-10-20-2024_07_21_PM--after-the-fix.png | 189.2 KB | rajab natshah |
| #9 | Edit-layout-for-Test-v10x1-10-20-2024_07_21_PM--before-the-fix.png | 192.62 KB | rajab natshah |
Issue fork varbase_layout_builder-3480375
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
Comment #3
oways23 commentedSubmit for review.
Comment #7
alshami commentedI've updated the MR, As we shouldn't exclude one by one all the fields, we may just change the placeholder color. and I'm sure that this is the better approach here.
Comment #8
rajab natshahComment #9
rajab natshahComment #10
rajab natshahComment #13
rajab natshahSwitch to use
var(--input-fg-color--placeholder)Claro's CSS3 variable.Comment #16
rajab natshahComment #17
rajab natshahComment #18
rajab natshah✅ Released varbase_layout_builder-10.0.57
Comment #19
rajab natshah✅ Released varbase_layout_builder-10.1.4
Comment #21
rajab natshah✅ Released varbase-9.1.7
Comment #22
rajab natshah✅ Released varbase-10.0.3
Comment #23
rajab natshah