Problem/Motivation
Single directory components (SDC) is a new way to theme Drupal. Instead of scattering related files around your theme, they're contained to one directory. The primary issue for SDC is at #3313520: Single directory components in core.
The Demo Umami team has decided that their theme can depend on an experimental module like SDC. This allows us to have the work in this ticket merged even when #3352256: [META] Move code from the experimental SDC module to core is not committed.
Disclaimer component
The disclaimer is a custom block type and content block that appears after the footer. It displays content from two text fields: disclaimer and copyright.
As part of SDC's roadmap (see #3345922: Single Directory Components module roadmap: the path to beta and stable), we want to convert Umami components to use SDC. For this task I'm choosing the Disclaimer component, which includes markup and CSS.
This component is a good fit because: it is a simple introduction to creating a SDC that replaces nested CSS selectors with BEM syntax and preserves block field display configuration.
This component involves the following Twig templates, CSS, assets, and libraries:
- disclaimer.css
- disclaimer.twig
- block--bundle--disclaimer-block.html.twig
Testing instructions
- Set up site with Umami profile.
- View page and see that disclaimer and copyright are visible below footer.
- Inspect markup with twig debug enabled and verify that component is being used.
- Modify the disclaimer block settings and verify that the component works with the different settings, such as hiding the copyright, enabling the disclaimer field label, etc.