Problem/Motivation
From #2959493: Allow Layout Builder live previews to be toggled to allow easier drag-and-drop item 5
When live preview mode is disable in the Layout Builder UI, the placeholder labels are added via Javascript. When live preview mode is re-enabled, the labels are removed from the DOM by javascript. It would be simpler for maintainers and other developers if these labels were always present and conditionally visible based on a parent class.
Proposed resolution
Figure out a way to add the labels to Layout Builder blocks inside the UI that have a structure consistent enough to facilitate visibility based on only CSS rules. Currently, the content of .layout-builder-block .content is not consistent enough to safely target with CSS, and sometimes includes child elements that are not wrapped in tags.
This will be made much easier if the placeholder labels are siblings of .layout-builder-block .content instead of children.
The current placeholder logic is in JS and BlockComponentRenderArray::onBuildRender.
Remaining tasks
Determine the best approach to add a consistently structured content-preview-disabled placeholder label in Layout Builder blocks. Make these conditionally visible based on the the presence of .layout-builder--content-preview-disabled wrapping the Layout Builder UI Implement, then remove the JS and other code responsible for adding/removing the labels previously.
User interface changes
UI will remain the same
API changes
N/A
Data model changes
N/A
Release notes snippet
N/A
