Field block for empty image field with no default image rendering empty div in Layout Builder

Created on 31 October 2023, about 1 year ago
Updated 26 March 2024, 8 months ago

Problem/Motivation

If an image field is configured to be displayed as a field block in Layout Builder, and the image field has no value and no default image set, the field block is still rendered as div wrappers around empty content.

This occurs because of a combination of changes introduced in #3119786: Default values are not displayed for image fields placed in Layout Builder β†’ and πŸ› Allow field blocks to display the configuration label when set in Layout Builder Fixed . The logic that checks whether an image field has no default image is in Drupal\layout_builder\Plugin\Block\FieldBlock::blockAccess():

if ($field->getFieldDefinition()->getType() === 'image' && $field->getFieldDefinition()->getSetting('default_image')) {

However, the value of the default_image array when there is no default image set is:

[
  'uuid' => '',
  'alt' => '',
  'title' => '',
  'width' => NULL,
  'height' => NULL,
]

Whether a default image is actually set does not affect the evaluation of the condition.

In addition, the render array for a field block returned by build() now has an additional layer of nesting ( https://www.drupal.org/node/3367821 β†’ ), so the Element::isEmpty($content) check in Drupal\layout_builder\EventSubscriber\BlockComponentRenderArray::onBuildRender() returns FALSE. Previous to this change, while the access check returned the wrong value, the isEmpty check would prevent any markup from being rendered for the field block.

With the resulting field block content not being empty, template or preprocess display logic that checks for the presence of the image field block needs might need to be reworked.

Steps to reproduce

  1. Install standard profile
  2. Enable layout builder
  3. Use Layout Builder on Article content type default display
  4. Create new Article: enter title and body text, leave image field empty, and save
  5. Inspect node content in browser (or view source)
  6. Confirm there is an element like this:
          <div class="block block-layout-builder block-field-blocknodearticlefield-image">
            <div class="block__content"></div>
          </div>
        

Proposed resolution

In Drupal\layout_builder\Plugin\Block\FieldBlock::blockAccess(), change this:

if ($field->getFieldDefinition()->getType() === 'image' && $field->getFieldDefinition()->getSetting('default_image')) {

to

if ($field->getFieldDefinition()->getType() === 'image' && !empty($field->getFieldDefinition()->getSetting('default_image')['uuid'])) {

Remaining tasks

User interface changes

API changes

Data model changes

Release notes snippet

πŸ› Bug report
Status

Fixed

Version

10.2 ✨

Component
Layout builderΒ  β†’

Last updated about 15 hours ago

Created by

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

Merge Requests

Comments & Activities

Production build 0.71.5 2024