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

CommentFileSizeAuthor
#6 radix-3482516-6.patch4.42 KBckng
#4 radix-3482516-4.patch4.1 KBckng
#3 radix-3482516-3.patch3.75 KBckng

Issue fork radix-3482516

Command icon 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:

About issue forks

Comments

ckng created an issue. See original summary.

ckng opened merge request !111

ckng’s picture

ckng
Primary language English
commented
Status: Active » Needs work
StatusFileSize
new radix-3482516-3.patch3.75 KB

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
ckng’s picture

ckng
Primary language English
commented
StatusFileSize
new radix-3482516-4.patch4.1 KB
ckng’s picture

ckng
Primary language English
commented

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

ckng’s picture

ckng
Primary language English
commented
StatusFileSize
new radix-3482516-6.patch4.42 KB

- restored image functionality when passing src directly

pdureau’s picture

pdureau commented

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, which is confusing and may lead to other issues.

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

For example (not tested, just a proposal), 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

doxigo made their first commit to this issue’s fork.

  • doxigo committed ae826d7d on 6.0.x authored by ckng 
    Issue #3482516: Inconsistent `attributes` handling
doxigo’s picture

doxigo commented
Status: Needs work » Fixed

Thanks a lot ckng, merged.
Pierre I'll check and see what we can do.

Status: Fixed » Closed (fixed)

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