Define and establish best-practice CE naming pattern

Created on 30 March 2023, about 2 years ago
Updated 10 September 2024, 7 months ago

Problem/Motivation

We want to enable people to nicely organize the frontend code. We aid that be providing well-defined naming pattern by default.

Proposed resolution

Improve defaults in custom-elements 3.x to follow the following pattern:

* For rendering content entities, we do not add a drupal- prefix. We apply the following pattern: `{ENTITY_TYPE}-{BUNDLE}-{VIEW_MODE}` or when the entity does not use bundles `{ENTITY_TYPE}-{VIEW_MODE}`. The view-mode suffix should be optional.
* For rendering any other special element like forms or views, we use a drupal- prefix.
* Additionally, we append form-IDs and view-names to those special blocks, to ease customizing them + improve the nuxt setup to make that easy.

This will result in the following custom-elements / vue components:
drupal-markup
drupal-layout
drupal-form-[...]
drupal-form-user-form
drupal-view-[...]
drupal-view-frontpage
node-[...]
node-article-full
node-article-teaser
node-page-full
node-page-teaser
node-page-search
media-[...]
media-image-thumbnail
paragraph-[...]
paragraph-text
paragraph-image
block-content-markup
block-content-custom
...

The [...] view component lookup logic is something we can work into our renderCustomElements() nuxt function and follows the known pattern of the nuxt page router where [...] acts as a fallback. It should take the full component name, and if no match is found, remove "-[a-z]+" suffixes until one is found. This gives the flexibility to have one component for all view modes or not.

There is some risk of conflict with this naming pattern, e.g. content types "article", "article_teaser" and view modes, "teaser", "teaser_full" - I think this is rather rare, so acceptable and can be worked around by renaming things or using a different pattern in conflicting cases. I don't think it's worth complicating the pattern to 100% avoid conflicts.

📌 Task
Status

Fixed

Version

1.0

Component

Code

Created by

🇦🇹Austria fago Vienna

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

Comments & Activities

Production build 0.71.5 2024