Skip to content

Instantly share code, notes, and snippets.

@kspurgin

kspurgin/typed_id_twig_html.adoc

Last active April 16, 2021 19:30
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save kspurgin/a8ee2c1f834530a4de373183de40a7c1 to your computer and use it in GitHub Desktop.
Save kspurgin/a8ee2c1f834530a4de373183de40a7c1 to your computer and use it in GitHub Desktop.
Download ZIP
Exploring Twig templating output for Typed identifier Paragraph type
Raw
typed_id_twig_html.adoc

This is what I am getting. It really wants to style the Paragraph output like it’s an entity reference, since under the hood it literally is.

<!-- BEGIN OUTPUT from 'themes/contrib/at_theme/at_core/templates/field/field.html.twig' -->

<div data-quickedit-field-id="node/17/field_typed_identifier/en/full" class="field field-node--field-typed-identifier field-formatter-entity-reference-revisions-entity-view field-name-field-typed-identifier field-type-entity-reference-revisions field-label-above has-single"><h3 class="field__label">Identifier</h3><div class="field__items"><div class="field__item">

<!-- THEME DEBUG -->
<!-- THEME HOOK: 'paragraph' -->
<!-- FILE NAME SUGGESTIONS:
   * paragraph--typed-identifier--default.html.twig
   * paragraph--typed-identifier.html.twig
   * paragraph--default.html.twig
   * paragraph.html.twig
-->
<!-- BEGIN OUTPUT from 'themes/custom/lyrasis_theme/templates/paragraphs/paragraph--typed_identifier--default.html.twig' -->

<div data-quickedit-entity-id="paragraph/4" class="paragraph--typed-identifier paragraph--typed-identifier-type--array">
    <span class="paragraph--typed-identifier-type">ISBN</span>: <span class="paragraph--typed-identifier-value">978123456789X</span>
  </div>

<!-- END OUTPUT from 'themes/custom/lyrasis_theme/templates/paragraphs/paragraph--typed_identifier--default.html.twig' -->

</div></div>
</div>

This is what I want (taking the debug stuff out for brevity). Basically I think I should be able to interpolate the value of the typed-identifier-type field (ISBN) into the class name on data-quickedit-entity-id="paragraph/4", so that the actual structure/meaning of the data is in the structure of the HTML:

<div data-quickedit-field-id="node/17/field_typed_identifier/en/full" class="field field-node--field-typed-identifier"><h3 class="field__label">Identifier</h3><div class="field__items"><div class="field__item">
<div data-quickedit-entity-id="paragraph/4" class="paragraph--typed-identifier paragraph--typed-identifier-type--ISBN">
    <span class="paragraph--typed-identifier-type">ISBN</span>: <span class="paragraph--typed-identifier-value">978123456789X</span>
  </div>
</div></div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment