Inconsistent `attributes` handling

Created on 22 October 2024, 2 months ago

Problem/Motivation

Some components initialize its own attributes, no ways to pass the `attributes`. Eg. card

Other inherits parent component/container `attributes`, e.g. Image component:
When image component is used inside a component or a container with `attributes`, the `attributes` being consumed by the image component due to components/image/image.twig:35

{% set image_attributes = fallback_attributes.merge(attributes ?: []) %}

Steps to reproduce

  • Have a parent component or template (e.g. paragraph) that contains `attributes`.
  • Include an image component.
  • Image component uses the `attributes` not meant for it.

Proposed resolution

Standardize all components implementation, use a unique `COMPONENT_attributes`, which can be passed `attributes` as needed.

Remaining tasks

-

User interface changes

-

API changes

-

Data model changes

🐛 Bug report
Status

Active

Version

6.0

Component

Code

Created by

🇲🇾Malaysia ckng

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

Merge Requests

Comments & Activities

  • Issue created by @ckng
  • Pipeline finished with Failed
    2 months ago
    Total: 42s
    #317373
  • 🇲🇾Malaysia ckng

    These are initial fixes. Note that haven't gone through all the components yet.
    Unsure items, not used or will break backward compatibility, ie. subtheme needs to be updated:

    • comment
    • field
    • field-comment
    • fieldset
    • nav
    • node
  • Pipeline finished with Failed
    2 months ago
    Total: 44s
    #317447
  • 🇲🇾Malaysia ckng

    Backward incompatible tracking for subtheme:
    - templates/field/image.html.twig

  • Pipeline finished with Failed
    2 months ago
    Total: 44s
    #317465
  • 🇲🇾Malaysia ckng

    - restored image functionality when passing src directly

  • 🇫🇷France pdureau Paris

    Standardize all components implementation, use a unique `COMPONENT_attributes`, which can be passed `attributes` as needed.

    If you do that, you will have both COMPONENT_attributes and attributes in your template.

    It seems you have another problem to fix, probably in the way your are calling the components.

    For example, instead of doing that:

    {%
      include 'radix:image' with {
        image_attributes: attributes,
        responsive: true,
      }

    You may need to use the only keyword:

    {%
      include 'radix:image' with {
        attributes: attributes,
        responsive: true,
      } only
  • Pipeline finished with Skipped
    about 1 month ago
    #345561
  • First commit to issue fork.
  • Thanks a lot ckng, merged.
    Pierre I'll check and see what we can do.

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

Production build 0.71.5 2024