<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet href="pretty-atom-feed.xsl" type="text/xsl"?>
<feed xmlns="http://www.w3.org/2005/Atom" xml:lang="en">
  <title>aleksip.net</title>
  <subtitle></subtitle>
  <link href="https://www.aleksip.net/feed/feed.xml" rel="self" />
  <link href="https://www.aleksip.net/" />
  <updated>2022-03-30T00:00:00Z</updated>
  <id>https://www.aleksip.net/</id>
  <author>
    <name>Aleksi Peebles</name>
  </author>
  <entry>
    <title>Have you heard of Drupal Components?</title>
    <link href="https://www.aleksip.net/posts/have-you-heard-of-drupal-components/" />
    <updated>2022-03-30T00:00:00Z</updated>
    <id>https://www.aleksip.net/posts/have-you-heard-of-drupal-components/</id>
    <content type="html">&lt;p&gt;“&lt;a href=&quot;https://www.slideshare.net/webchickenator/drupal-8-a-story-of-growing-up-and-getting-off-the-island&quot;&gt;Getting off the island&lt;/a&gt;” was the motto when Drupal 8 was being developed. And indeed many things “proudly found elsewhere” were brought to Drupal. (&lt;em&gt;Too&lt;/em&gt; many for the folks who either have decided to &lt;a href=&quot;https://www.drupal.org/psa-2022-02-23&quot;&gt;stay on Drupal 7&lt;/a&gt; or have switched to &lt;a href=&quot;https://backdropcms.org/&quot;&gt;Backdrop&lt;/a&gt;.)&lt;/p&gt;
&lt;p&gt;However, the traffic on the bridges connecting Drupal island to the rest of the PHP world has been mostly one way.&lt;/p&gt;
&lt;p&gt;Drupal users have no doubt helped to improve and develop the off-island code now used in Drupal. But, to my knowledge at least, the official Drupal project is still very much a monolith.&lt;/p&gt;
&lt;p&gt;There was a plan, though: &lt;a href=&quot;https://www.drupal.org/docs/core-modules-and-themes/basic-structure-of-drupal#s-drupal-components&quot;&gt;Drupal Components&lt;/a&gt; do exist. Unfortunately the &lt;a href=&quot;https://www.drupal.org/project/drupal/issues/1826054&quot;&gt;issue to expose Drupal components outside of Drupal&lt;/a&gt; is dangerously close to being 10 years old.&lt;/p&gt;
&lt;p&gt;How can interest in Drupal Components exist if they are not properly exposed and practically no-one knows about them? Looking on Drupal.org, there are links to “&lt;a href=&quot;https://www.drupal.org/try-drupal&quot;&gt;Try Drupal&lt;/a&gt;” and “&lt;a href=&quot;https://www.drupal.org/download&quot;&gt;Download Drupal&lt;/a&gt;”, but no links to try or download Drupal Components. Drupal Components are not even mentioned on the &lt;a href=&quot;https://www.drupal.org/docs&quot;&gt;main documentation page&lt;/a&gt;.&lt;/p&gt;
&lt;p&gt;Why should we care about Drupal Components? Aren&#39;t they just a maintenance burden? I have long thought that Drupal Components should be considered as strategically important to the future of Drupal. I believe there are good reasons for this:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Abstracting code into independent components improves the code quality and architecture of the whole project.&lt;/li&gt;
&lt;li&gt;Useful, well publicised independent components give more exposure to Drupal. It is easier to choose the full CMS if you are already using parts of it.&lt;/li&gt;
&lt;li&gt;Popular components should eventually bring contributions from developers who do not use the full CMS, expanding the developer base.&lt;/li&gt;
&lt;li&gt;To fully “get off the island” it would be nice to provide more than just the full monolith. It is critical to the future of Drupal to keep the PHP ecosystem vibrant.&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;In addition to exposing and publicising the current components, in my vision there is an active intention to refactor existing Drupal core code into Drupal Components. I think it would need a &lt;a href=&quot;https://www.drupal.org/about/core/strategic-initiatives&quot;&gt;strategic initiative&lt;/a&gt; for all this to happen. What do you think, Dries? ;)&lt;/p&gt;
</content>
  </entry>
  <entry>
    <title>Drupal themes and component libraries</title>
    <link href="https://www.aleksip.net/posts/drupal-themes-and-component-libraries/" />
    <updated>2019-11-17T00:00:00Z</updated>
    <id>https://www.aleksip.net/posts/drupal-themes-and-component-libraries/</id>
    <content type="html">&lt;p&gt;In the past four years that I have been building component-based themes for Drupal projects I have never created a separate component library. And I have never used the same component templates anywhere else than in the Drupal theme that they were originally developed for.&lt;/p&gt;
&lt;p&gt;The projects I have worked on have been small, at least in the sense that in most them I have been the only developer. My clients have never required building a design system, style guide, pattern library or a component-based theme.&lt;/p&gt;
&lt;p&gt;So, despite all this, why have I wanted to use a component-based approach?&lt;/p&gt;
&lt;h2&gt;Prototyping and developing a Drupal theme without Drupal&lt;/h2&gt;
&lt;p&gt;The single most compelling reason for me to develop component-based themes has been the ability to prototype and develop most of the theme independently of Drupal, right from the beginning of a project.&lt;/p&gt;
&lt;p&gt;Clients often do not have a clear idea of what they actually want, and static wireframes or Photoshop comps, even with variations for mobile and desktop, leave too much to the imagination. Prototyping and presenting designs in real browsers, in different viewport sizes, can be really helpful in understanding possibilities, limitations and requirements.&lt;/p&gt;
&lt;p&gt;Using actual theme templates for prototyping means that a lot, if not most, of the work from this stage is usable for the final implementation.&lt;/p&gt;
&lt;p&gt;I have also found that client requirements can change a lot at this stage, and that these changes can affect the back-end implementation. The ability to discuss and quickly modify a real web page prototype even before installing Drupal can save a lot of work on the back-end as well.&lt;/p&gt;
&lt;h2&gt;A shared way of thinking&lt;/h2&gt;
&lt;p&gt;Building something from components is essentially a very simple idea. Practically everyone knows Lego bricks and how you can build larger structures from different kinds of smaller bricks. Using Pattern Lab or similar tools it is possible to show theme component templates in isolation, something that is not trivial to do in Drupal itself. When components are identified, named and discussed together with the client, designing and building layouts for pages can become much easier.&lt;/p&gt;
&lt;p&gt;Also, while it is not something that can be easily measured and compared, I do believe that starting from a more generic, component-based mindset instead of a Drupal-specific one can bring better results.&lt;/p&gt;
&lt;h2&gt;So what about all the extra work?&lt;/h2&gt;
&lt;p&gt;When the initial work has already been done in a component-based starter theme, there is very little work required to start prototyping component templates and full web pages in a tool like Pattern Lab.&lt;/p&gt;
&lt;p&gt;Component-based Drupal themes are not so different from vanilla Drupal themes. The main difference is that currently in most, if not all, component-based themes regular Drupal templates contain a Twig include statement to include a namespaced component template, which is organized in a separate folder structure. I would say that this is more of an organizational difference, both mentally and in the file system, than anything else.&lt;/p&gt;
&lt;p&gt;I have found that most of the extra effort in component-based theming comes from creating demo data for an external tool like Pattern Lab. However, compared with the effort required to arrive at a shared vision based on iterations of static files, or prototyping with something else than the theme templates, creating demo data could actually take a lot less work.&lt;/p&gt;
&lt;p&gt;A thing worth noting is that component-based theming and the use of external tools and demo data are not an all-or-nothing approach. It is possible to use both vanilla Drupal templates and component templates in the same theme, and create as much or little demo data as required.&lt;/p&gt;
&lt;h2&gt;Separate components and component libraries&lt;/h2&gt;
&lt;p&gt;Theme components can also be developed, packaged, distributed and installed separately from a Drupal theme, either individually or as a component library. Doing so opens up a lot of possibilities that might be especially interesting to large organizations and projects, and even more so if the components use only vanilla Twig.&lt;/p&gt;
&lt;p&gt;Unfortunately common best practices for such technical implementations and related workflows do not yet exist. If you only need to build one specific component-based Drupal theme, separate components and component libraries are unlikely to be worth the extra effort.&lt;/p&gt;
</content>
  </entry>
  <entry>
    <title>Decoupling the front-end without APIs and JavaScript</title>
    <link href="https://www.aleksip.net/posts/decoupling-the-front-end-without-apis-and-javascript/" />
    <updated>2019-10-20T00:00:00Z</updated>
    <id>https://www.aleksip.net/posts/decoupling-the-front-end-without-apis-and-javascript/</id>
    <content type="html">&lt;p&gt;There has been amazing progress with Drupal’s &lt;a href=&quot;https://www.drupal.org/about/strategic-initiatives/api-first&quot;&gt;API-First Initiative&lt;/a&gt; in the past few years. A major milestone was when JSON:API was added to core as a stable module in Drupal 8.7.&lt;/p&gt;
&lt;p&gt;An API-first Drupal enables many things, but probably the best known use case of APIs is a decoupled front-end. Numerous blog posts and at least one &lt;a href=&quot;https://www.apress.com/gp/book/9781484240717&quot;&gt;book&lt;/a&gt; have been been written about decoupled Drupal. There have been many conference sessions on the topic, and there is an entire &lt;a href=&quot;https://decoupleddays.com/&quot;&gt;conference&lt;/a&gt; focused only on decoupled CMS architectures.&lt;/p&gt;
&lt;p&gt;These exciting developments ensure that Drupal stays relevant, and that it is a first-class choice for building &lt;a href=&quot;https://dri.es/drupal-is-for-ambitious-digital-experiences&quot;&gt;ambitious digital experiences&lt;/a&gt; in the modern web development landscape, where component-based JavaScript front-end libraries and frameworks like React and Vue are so popular.&lt;/p&gt;
&lt;p&gt;A lot of the activity around decoupled Drupal originates from developers and other employees of Drupal agencies working on projects for large enterprises and organizations. These projects might require a content service not just for for app-like websites, but also for other publishing channels like native mobile apps and digital kiosks.&lt;/p&gt;
&lt;p&gt;However, from a practical requirements and resources point of view, the vast majority of website owners just need a traditional website. And for someone like me, who often works as the only developer on (non-ambitious?) traditional website projects, JavaScript-based decoupled front-ends are interesting, but not required.&lt;/p&gt;
&lt;h2&gt;There are other ways&lt;/h2&gt;
&lt;p&gt;When so much attention is focused on APIs and JavaScript, it is possible to miss or forget the fact that &lt;a href=&quot;https://en.wikipedia.org/wiki/Loose_coupling&quot;&gt;loose coupling&lt;/a&gt; and &lt;a href=&quot;https://en.wikipedia.org/wiki/Component-based_software_engineering#Component_Definition&quot;&gt;components&lt;/a&gt; are general architectural principles that can be implemented in many different ways. A different approach can be used to get many of the benefits of a decoupled, component-based front-end.&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;https://github.com/aleksip/component-based-theming&quot;&gt;Component-based theming&lt;/a&gt; is a commonly used name for a specific way to develop and organize Twig templates and related assets in Drupal themes. I am not sure how well known it is that component-based theming is actually a way to decouple most of the front-end from Drupal.&lt;/p&gt;
&lt;p&gt;The best known benefit of this decoupling approach is the possibility to develop most of the theme layer independently of Drupal, with the help of a tool like &lt;a href=&quot;https://patternlab.io/&quot;&gt;Pattern Lab&lt;/a&gt;. But while there are already some very interesting &lt;a href=&quot;https://drupal.kuoni-congress.info/2019/program/abstract/195&quot;&gt;examples&lt;/a&gt; out there, I believe that the full potential of decoupled Twig components is yet to be realized. By this I mean Twig component libraries that can be used with minimal integration effort in both Drupal and WordPress, for example. I believe that agencies offering services for both platforms could benefit a lot from this.&lt;/p&gt;
&lt;h2&gt;For ‘small Drupal’ too&lt;/h2&gt;
&lt;p&gt;Since it is often associated with style guides and design systems, it is possible to get the impression that component-based theming is only useful for large teams working on projects for large clients. However, I know from my own experience that even single-developer projects can benefit from it.&lt;/p&gt;
&lt;p&gt;Component-based theming adds very little overhead to regular Drupal theming. Thinking in components can improve the quality of your work in many ways, and most importantly, building anything from blocks is &lt;a href=&quot;https://www.lego.com/&quot;&gt;fun&lt;/a&gt;!&lt;/p&gt;
&lt;p&gt;There is no requirement to develop a style guide – although you might find that you end up with the beginnings of one as a happy side result.&lt;/p&gt;
&lt;p&gt;A decoupled front-end means that work on the theme can be started even before Drupal is installed, and clients can be shown the design in a real browser much sooner.&lt;/p&gt;
&lt;p&gt;So unless you are working on a project that requires a JavaScript-based front-end, I can warmly recommend component-based theming to teams and projects of all sizes.&lt;/p&gt;
</content>
  </entry>
  <entry>
    <title>Component-based theming with Layout Builder</title>
    <link href="https://www.aleksip.net/posts/component-based-theming-with-layout-builder/" />
    <updated>2019-08-25T00:00:00Z</updated>
    <id>https://www.aleksip.net/posts/component-based-theming-with-layout-builder/</id>
    <content type="html">&lt;p&gt;I have previously written about &lt;a href=&quot;https://www.aleksip.net/posts/using-drupals-definition-files-in-component-based-theming&quot;&gt;using Drupal’s definition files in component-based theming&lt;/a&gt; and how it is possible to have component-specific layout and asset library definition files. Now that Layout Builder is stable it is time to have a look at how it can be used with theme components.&lt;/p&gt;
&lt;h2&gt;Two schools&lt;/h2&gt;
&lt;p&gt;There are two main approaches to integrating independent theme components with Drupal. They could be described as the ‘Twig developer’ approach and the ‘site builder’ approach.&lt;/p&gt;
&lt;p&gt;In the Twig developer approach integration is done entirely in Twig ‘presenter’ templates. A significant benefit of this straightforward approach is that no contrib modules are required (although &lt;a href=&quot;https://www.drupal.org/project/components&quot;&gt;Component Libraries&lt;/a&gt; is usually used). There is also no need for endless pointing and clicking in the admin UI, and dealing with related configuration. The downside is that in most cases this approach leaves the admin UI disconnected from the components. This means that a site builder not familiar with Twig or with no access to the Twig templates has no way of affecting the appearance of the integrated components.&lt;/p&gt;
&lt;p&gt;In the site builder approach integration is done using the admin UI. Until now this has required sophisticated contrib modules like &lt;a href=&quot;https://www.drupal.org/project/ds&quot;&gt;Display Suite&lt;/a&gt; and &lt;a href=&quot;https://www.drupal.org/project/ui_patterns&quot;&gt;UI Patterns&lt;/a&gt;, with their own ecosystems of related modules. These are great modules, but ideally it should be possible to use just Drupal core for the site builder approach. With Layout Builder in core we are a huge leap closer to that goal.&lt;/p&gt;
&lt;h2&gt;Revisiting an old example&lt;/h2&gt;
&lt;p&gt;Back in January 2017 I wrote a blog post on &lt;a href=&quot;https://www.aleksip.net/posts/using-ui-patterns-module-in-a-component-based-drupal-8-theme&quot;&gt;how to use UI Patterns to integrate a simple Code component&lt;/a&gt;. I will now use the same component in an example of how to use Layout Builder for the same task.&lt;/p&gt;
&lt;h3&gt;Step 1: Create layout and asset library definitions&lt;/h3&gt;
&lt;p&gt;Starting from where we ended up in that old blog post, we need to provide information about the component’s variables and assets to Drupal in some other way than a &lt;code&gt;.ui_patterns.yml&lt;/code&gt; file. This can now be easily done using Drupal core’s definition files.&lt;/p&gt;
&lt;p&gt;Drupal core only supports theme (or module) specific definition files, but the &lt;a href=&quot;https://www.drupal.org/project/multiple_definition_files&quot;&gt;Multiple Definition Files&lt;/a&gt; module can be used to add support for component-specific files. The results are identical in both approaches, so using Multiple Definition Files is completely optional.&lt;/p&gt;
&lt;p&gt;Multiple Definition Files does add one useful feature though. Drupal places layout regions in &lt;code&gt;content&lt;/code&gt;, so for example a &lt;code&gt;code&lt;/code&gt; region would be accessed in Twig as &lt;code&gt;content.code&lt;/code&gt;.  To remove this Drupalism, Multiple Definition Files makes layout regions accessible in the Twig root context, so a &lt;code&gt;code&lt;/code&gt; region is accessible in Twig as just &lt;code&gt;code&lt;/code&gt;.&lt;/p&gt;
&lt;p&gt;The definitions in this example are in component-specific files. If you want to use Multiple Definition Files, be sure to enable the module at this point.&lt;/p&gt;
&lt;p&gt;The layout definition, &lt;code&gt;shila-code.layouts.yml&lt;/code&gt;:&lt;/p&gt;
&lt;pre class=&quot;language-yaml&quot; tabindex=&quot;0&quot;&gt;&lt;code class=&quot;language-yaml&quot;&gt;&lt;span class=&quot;token key atrule&quot;&gt;shila_code&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt;
  &lt;span class=&quot;token key atrule&quot;&gt;label&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&#39;Code&#39;&lt;/span&gt;
  &lt;span class=&quot;token key atrule&quot;&gt;category&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&#39;Shila&#39;&lt;/span&gt;
  &lt;span class=&quot;token key atrule&quot;&gt;template&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; source/_patterns/01&lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt;molecules/content/shila&lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt;code/shila&lt;span class=&quot;token punctuation&quot;&gt;-&lt;/span&gt;code
  &lt;span class=&quot;token key atrule&quot;&gt;library&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; shila_theme/shila_code
  &lt;span class=&quot;token key atrule&quot;&gt;regions&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt;
    &lt;span class=&quot;token key atrule&quot;&gt;language&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt;
      &lt;span class=&quot;token key atrule&quot;&gt;label&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&#39;Language&#39;&lt;/span&gt;
    &lt;span class=&quot;token key atrule&quot;&gt;code&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt;
      &lt;span class=&quot;token key atrule&quot;&gt;label&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&#39;Code&#39;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;and the library definition, &lt;code&gt;shila-code.libraries.yml&lt;/code&gt;:&lt;/p&gt;
&lt;pre class=&quot;language-yaml&quot; tabindex=&quot;0&quot;&gt;&lt;code class=&quot;language-yaml&quot;&gt;&lt;span class=&quot;token key atrule&quot;&gt;shila_code&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt;
  &lt;span class=&quot;token key atrule&quot;&gt;css&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt;
    &lt;span class=&quot;token key atrule&quot;&gt;theme&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt;
      &lt;span class=&quot;token key atrule&quot;&gt;source/_patterns/01-molecules/content/shila-code/prism.css&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;
  &lt;span class=&quot;token key atrule&quot;&gt;js&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt;
    &lt;span class=&quot;token key atrule&quot;&gt;source/_patterns/01-molecules/content/shila-code/prism.js&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token punctuation&quot;&gt;{&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;}&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;Note the &lt;code&gt;library&lt;/code&gt; reference in &lt;code&gt;shila-code.layouts.yml&lt;/code&gt;, linking the two definitions. Be sure to clear caches after adding the new definitions.&lt;/p&gt;
&lt;p&gt;(As a side note, the &lt;a href=&quot;https://www.drupal.org/project/ui_patterns_from_layouts&quot;&gt;UI Patterns From Layouts&lt;/a&gt; module makes it possible to use Drupal’s definition files with UI Patterns as well.)&lt;/p&gt;
&lt;h3&gt;Step 2: Enable Layout Builder&lt;/h3&gt;
&lt;p&gt;After enabling the Layout Builder module, Layout Builder has to be enabled for our Code paragraphs type’s display.&lt;/p&gt;
&lt;p&gt;If you are moving away from a Display Suite layout, be sure to select &lt;code&gt;- None -&lt;/code&gt; for the layout and save the settings before enabling Layout Builder. It seems that if you do not do this, Display Suite is still active and &lt;a href=&quot;https://www.drupal.org/project/ds/issues/3054607&quot;&gt;Layout Builder won’t work as expected&lt;/a&gt;.&lt;/p&gt;
&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://www.aleksip.net/posts/component-based-theming-with-layout-builder/Sh1WGa-dtZ-2048.avif 2048w&quot;&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://www.aleksip.net/posts/component-based-theming-with-layout-builder/Sh1WGa-dtZ-2048.webp 2048w&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://www.aleksip.net/posts/component-based-theming-with-layout-builder/Sh1WGa-dtZ-2048.png&quot; alt=&quot;Manage display&quot; width=&quot;2048&quot; height=&quot;993&quot;&gt;&lt;/picture&gt;
&lt;h3&gt;Step 3: Integrate the component using Layout builder&lt;/h3&gt;
&lt;p&gt;Clicking on the ‘Manage layout’ button takes us to Layout Builder. Display Suite and UI Patterns show a textual representation of a layout, but Layout Builder is different as it displays the layout visually.&lt;/p&gt;
&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://www.aleksip.net/posts/component-based-theming-with-layout-builder/sRMlJwgFGu-2018.avif 2018w&quot;&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://www.aleksip.net/posts/component-based-theming-with-layout-builder/sRMlJwgFGu-2018.webp 2018w&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://www.aleksip.net/posts/component-based-theming-with-layout-builder/sRMlJwgFGu-2018.png&quot; alt=&quot;Layout Builder&quot; width=&quot;2018&quot; height=&quot;1739&quot;&gt;&lt;/picture&gt;
&lt;p&gt;First we remove the default section, then we add a new section and choose the ‘Code’ layout for it.&lt;/p&gt;
&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://www.aleksip.net/posts/component-based-theming-with-layout-builder/IL0QO0gKrY-2018.avif 2018w&quot;&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://www.aleksip.net/posts/component-based-theming-with-layout-builder/IL0QO0gKrY-2018.webp 2018w&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://www.aleksip.net/posts/component-based-theming-with-layout-builder/IL0QO0gKrY-2018.png&quot; alt=&quot;Choose layout&quot; width=&quot;2018&quot; height=&quot;929&quot;&gt;&lt;/picture&gt;
&lt;p&gt;As a reminder, this is what our extremely simple &lt;code&gt;shila-code.html.twig&lt;/code&gt; template looks like:&lt;/p&gt;
&lt;pre class=&quot;language-html&quot; tabindex=&quot;0&quot;&gt;&lt;code class=&quot;language-html&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;pre&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&amp;lt;code{% if language %} class=&quot;language-{{ language }}&quot;{% endif %}&gt;{{ code }}&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;code&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;pre&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;Layout Builder’s visual representation will not be a problem in many cases. However, components often use variables for non-visual purposes or have layouts with overlapping regions. Our Code component is a good example, since &lt;code&gt;language&lt;/code&gt; is used as a part of a CSS class name. Layout Builder does not expect layouts to be used in this way, and the result is a completely unusable UI.&lt;/p&gt;
&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://www.aleksip.net/posts/component-based-theming-with-layout-builder/qRDYDoTnEo-2018.avif 2018w&quot;&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://www.aleksip.net/posts/component-based-theming-with-layout-builder/qRDYDoTnEo-2018.webp 2018w&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://www.aleksip.net/posts/component-based-theming-with-layout-builder/qRDYDoTnEo-2018.png&quot; alt=&quot;Unusable UI&quot; width=&quot;2018&quot; height=&quot;1577&quot;&gt;&lt;/picture&gt;
&lt;p&gt;Oh no. What we need is a text based way to configure the layout. The good news is that due to accessibility reasons &lt;a href=&quot;https://www.drupal.org/project/drupal/issues/3019490&quot;&gt;a textual version of the Layout Builder UI is already in the works&lt;/a&gt;. So, let’s apply the patch from that issue, clear the caches, and see what happens.&lt;/p&gt;
&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://www.aleksip.net/posts/component-based-theming-with-layout-builder/jTugypMp6p-2018.avif 2018w&quot;&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://www.aleksip.net/posts/component-based-theming-with-layout-builder/jTugypMp6p-2018.webp 2018w&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://www.aleksip.net/posts/component-based-theming-with-layout-builder/jTugypMp6p-2018.png&quot; alt=&quot;Layout overview link&quot; width=&quot;2018&quot; height=&quot;805&quot;&gt;&lt;/picture&gt;
&lt;p&gt;A ‘Layout overview’ link has appeared! Let’s click on it.&lt;/p&gt;
&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://www.aleksip.net/posts/component-based-theming-with-layout-builder/lrN63eecaJ-2018.avif 2018w&quot;&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://www.aleksip.net/posts/component-based-theming-with-layout-builder/lrN63eecaJ-2018.webp 2018w&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://www.aleksip.net/posts/component-based-theming-with-layout-builder/lrN63eecaJ-2018.png&quot; alt=&quot;Layout overview&quot; width=&quot;2018&quot; height=&quot;1036&quot;&gt;&lt;/picture&gt;
&lt;p&gt;This is looking good! We can now add the right paragraph fields to the respective regions in the Code layout and then click on the ‘Save layout’ button. Let’s have a look at a page that contains a Code paragraph.&lt;/p&gt;
&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://www.aleksip.net/posts/component-based-theming-with-layout-builder/fZwpNUzTs0-1905.avif 1905w&quot;&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://www.aleksip.net/posts/component-based-theming-with-layout-builder/fZwpNUzTs0-1905.webp 1905w&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://www.aleksip.net/posts/component-based-theming-with-layout-builder/fZwpNUzTs0-1905.png&quot; alt=&quot;Broken component&quot; width=&quot;1905&quot; height=&quot;1584&quot;&gt;&lt;/picture&gt;
&lt;p&gt;Something is obviously going wrong here. Let’s have a look at the HTML source.&lt;/p&gt;
&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://www.aleksip.net/posts/component-based-theming-with-layout-builder/uWZ8pe_8OK-2560.avif 2560w&quot;&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://www.aleksip.net/posts/component-based-theming-with-layout-builder/uWZ8pe_8OK-2560.webp 2560w&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://www.aleksip.net/posts/component-based-theming-with-layout-builder/uWZ8pe_8OK-2560.png&quot; alt=&quot;HTML source code showing markup from Drupal’s block and field templates.&quot; width=&quot;2560&quot; height=&quot;604&quot;&gt;&lt;/picture&gt;
&lt;p&gt;Since we have placed fields in Layout Builder blocks, there is unwanted HTML from the block and field templates. What we really need is just the contents of the fields, nothing else. This can be an issue with many independent theme components, since they often do not expect extra markup to be provided.&lt;/p&gt;
&lt;p&gt;Display Suite has a ‘Full Reset’ field formatter and UI Patterns has an ‘Only content’ option. But what can we do here? Creating specific Twig templates to remove the HTML is an option, but not an ideal one. What we want is an easy UI based way to deal with the problem.&lt;/p&gt;
&lt;h3&gt;Step 4: Install and enable the Full Reset module (if required)&lt;/h3&gt;
&lt;p&gt;After searching for existing solutions and not coming up with anything, I ended up writing a small module for this particular purpose. &lt;a href=&quot;https://www.drupal.org/project/full_reset&quot;&gt;Full Reset&lt;/a&gt; does two things: it provides a field formatter and adds a reset option to Layout Builder blocks. The name is a hat tip to the trusty Display Suite field formatter I have used so many times.&lt;/p&gt;
&lt;p&gt;A good way to &lt;a href=&quot;https://www.drupal.org/project/drupal/issues/3015152&quot;&gt;support third party settings for Layout Builder blocks&lt;/a&gt; is still being worked on, so a core patch must be applied for Full Reset to work.&lt;/p&gt;
&lt;p&gt;With the core patch applied and Full Reset installed and enabled, we can select the ‘Full Reset’ field formatter and tick the ‘Full Reset this block’ checkbox.&lt;/p&gt;
&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://www.aleksip.net/posts/component-based-theming-with-layout-builder/S79-cSSmZr-2048.avif 2048w&quot;&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://www.aleksip.net/posts/component-based-theming-with-layout-builder/S79-cSSmZr-2048.webp 2048w&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://www.aleksip.net/posts/component-based-theming-with-layout-builder/S79-cSSmZr-2048.png&quot; alt=&quot;Full Reset options&quot; width=&quot;2048&quot; height=&quot;1032&quot;&gt;&lt;/picture&gt;
&lt;p&gt;Now the block and field templates are not used at all, and the component works and looks like expected! It still does not work in Layout Builder’s visual preview though, because Layout Builder expects the content to be a valid DOM node and have a surrounding HTML tag. For this reason Full Reset does not remove block theming in the preview.&lt;/p&gt;
&lt;h2&gt;Conclusion&lt;/h2&gt;
&lt;p&gt;Layout Builder can be successfully used in component-based theming today. There might be some problems with specific components like the one in this example, but these problems can be circumvented by applying two patches and using the Full Reset module.&lt;/p&gt;
&lt;p&gt;For me this means that I can now stop using Display Suite, a module that I have used in almost all of my Drupal projects since 2011. Personally I find this change to be just as significant as it was when Field API and Views were added to core.&lt;/p&gt;
</content>
  </entry>
  <entry>
    <title>A new approach for a new Pattern Lab</title>
    <link href="https://www.aleksip.net/posts/a-new-approach-for-a-new-pattern-lab/" />
    <updated>2019-07-12T00:00:00Z</updated>
    <id>https://www.aleksip.net/posts/a-new-approach-for-a-new-pattern-lab/</id>
    <content type="html">&lt;p&gt;The PHP version of Pattern Lab has been a trusty tool for a long time, especially for many of us working with Twig and component-based theming for Drupal. However, ever since &lt;a href=&quot;https://github.com/pattern-lab/the-spec/issues/37&quot;&gt;a decision was made&lt;/a&gt; to focus development efforts on &lt;a href=&quot;https://github.com/pattern-lab/patternlab-node&quot;&gt;Pattern Lab Node&lt;/a&gt;, it has been clear that it would eventually become necessary to switch from using the PHP version to using the Node version.&lt;/p&gt;
&lt;p&gt;Twig developers do not need to worry about compatibility, since thanks to the efforts of &lt;a href=&quot;http://www.evanlovely.com/&quot;&gt;Evan Lovely&lt;/a&gt; and &lt;a href=&quot;https://twitter.com/salem_ghoweri&quot;&gt;Salem Ghoweri&lt;/a&gt;, Pattern Lab Node now uses a &lt;a href=&quot;https://github.com/basaltinc/twig-renderer&quot;&gt;PHP Twig renderer&lt;/a&gt; to render Twig templates. This means that templates are rendered using the official PHP implementation of Twig, and it is even possible to add PHP extensions to the Twig environment used by the renderer.&lt;/p&gt;
&lt;p&gt;Pattern Lab Node 3.0 is the future of Pattern Lab, with many improvements over the PHP version, especially in the UI.  However, it is still in beta and a bit rough around the edges. There have been issues with pseudo-patterns, and more work is needed to support plugins. With &lt;a href=&quot;https://github.com/aleksip/component-based-theming&quot;&gt;well-established development approaches&lt;/a&gt; based on the use of data files and plugins in Pattern Lab PHP, how can we make the switch to using the Node version?&lt;/p&gt;
&lt;h2&gt;A new approach&lt;/h2&gt;
&lt;p&gt;Limitations can often drive creativity. I do not know if that is the case here, but a great new development approach is being used by folks already using Pattern Lab Node. This approach was described by Evan Lovely in his excellent presentation &lt;a href=&quot;https://events.drupal.org/seattle2019/sessions/pattern-lab-definitive-how&quot;&gt;‘Pattern Lab: The Definitive How-to’&lt;/a&gt;, and is used by &lt;a href=&quot;http://a-fro.com/&quot;&gt;Aaron Froehlich&lt;/a&gt; and Jeff Amaral in &lt;a href=&quot;https://github.com/ilrWebServices/union&quot;&gt;Union&lt;/a&gt;, an inspiring project well worth checking out.&lt;/p&gt;
&lt;p&gt;The basic idea in this new approach is to use a new type of template in Pattern Lab. These new templates provide demo data for the actual component templates, making traditional Pattern Lab JSON/YAML data files mostly unnecessary.&lt;/p&gt;
&lt;p&gt;As an example, if we have a &lt;code&gt;_heading.twig&lt;/code&gt; template (note the leading underscore, which hides the pattern in Pattern Lab)&lt;/p&gt;
&lt;pre class=&quot;language-html&quot; tabindex=&quot;0&quot;&gt;&lt;code class=&quot;language-html&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;&lt;/span&gt;h1&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;{{ title }}&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token tag&quot;&gt;&lt;span class=&quot;token punctuation&quot;&gt;&amp;lt;/&lt;/span&gt;h1&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;&gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;instead of creating a &lt;code&gt;heading.yml&lt;/code&gt; data file&lt;/p&gt;
&lt;pre class=&quot;language-yaml&quot; tabindex=&quot;0&quot;&gt;&lt;code class=&quot;language-yaml&quot;&gt;&lt;span class=&quot;token key atrule&quot;&gt;title&lt;/span&gt;&lt;span class=&quot;token punctuation&quot;&gt;:&lt;/span&gt; &lt;span class=&quot;token string&quot;&gt;&#39;Hello&#39;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;we create a &lt;code&gt;heading-demo.twig&lt;/code&gt; template&lt;/p&gt;
&lt;pre class=&quot;language-html&quot; tabindex=&quot;0&quot;&gt;&lt;code class=&quot;language-html&quot;&gt;{% include &#39;_heading.twig&#39; with {&#39;title&#39;: &#39;Hello&#39;} only %}&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;These demo templates are very similar to ‘presenter’ templates used in component-based Drupal theming, as they only process and pass data to the actual component templates, and do not contain any markup.&lt;/p&gt;
&lt;h2&gt;Pros and possible cons&lt;/h2&gt;
&lt;p&gt;Even though plugins like &lt;a href=&quot;https://github.com/aleksip/plugin-data-transform&quot;&gt;Data Transform Plugin&lt;/a&gt; can make plain data files more powerful, using Twig to provide demo data opens up a whole new world of possibilities. For example, demo templates can use Twig extensions that might not be acceptable in plain Twig components. I am certain that there will be a lot of innovation within this approach and related best practices in the future.&lt;/p&gt;
&lt;p&gt;One possible drawback is that the Pattern Lab UI will display the Twig source of the demo template instead of the source of the actual component. However, it is only a possible drawback, as in many cases it might actually be useful to show how the component should be included from another template. And it is still possible to use a data file if it is important to show the source of the component itself.&lt;/p&gt;
&lt;h2&gt;A new version of Shila theme&lt;/h2&gt;
&lt;p&gt;I have been wanting to switch to using Pattern Lab Node for some time now, and this new approach has made it possible. I have refactored &lt;a href=&quot;https://github.com/aleksip/shila-drupal-theme&quot;&gt;Shila theme&lt;/a&gt;, which I use as a starting point for all my Drupal theme projects, to use demo templates. This change makes it possible to use Shila theme with both Pattern Lab PHP and Pattern Lab Node. If you are interested in seeing an example of a full implementation of this new approach, be sure to check out the new version of Shila theme.&lt;/p&gt;
</content>
  </entry>
  <entry>
    <title>Trying out the IndieWeb module</title>
    <link href="https://www.aleksip.net/posts/trying-out-the-indieweb-module/" />
    <updated>2018-12-05T00:00:00Z</updated>
    <id>https://www.aleksip.net/posts/trying-out-the-indieweb-module/</id>
    <content type="html">&lt;p&gt;I have been meaning to do this for months now, but finally got round to it after reading swentel&#39;s &lt;a href=&quot;https://realize.be/blog/send-me-webmention-drupal&quot; class=&quot;u-in-reply-to&quot;&gt;article&lt;/a&gt;.&lt;/p&gt;
&lt;p&gt;Thank you swentel for all your work on the &lt;a href=&quot;https://www.drupal.org/project/indieweb&quot;&gt;IndieWeb module&lt;/a&gt;!&lt;/p&gt;
</content>
  </entry>
  <entry>
    <title>Using Drupal’s definition files in component-based theming</title>
    <link href="https://www.aleksip.net/posts/using-drupals-definition-files-in-component-based-theming/" />
    <updated>2018-11-21T00:00:00Z</updated>
    <id>https://www.aleksip.net/posts/using-drupals-definition-files-in-component-based-theming/</id>
    <content type="html">&lt;p&gt;All the great work already done and to be released by the &lt;a href=&quot;https://www.drupal.org/about/strategic-initiatives/layout&quot;&gt;Layout Initiative&lt;/a&gt; has inspired me to think about how core’s definition files can be used in component-based theme development. As a result I am now happy to announce two Drupal modules and a Pattern Lab plugin which enable new ways of using core’s definition files.&lt;/p&gt;
&lt;h2&gt;Layout definitions have superpowers&lt;/h2&gt;
&lt;p&gt;&lt;a href=&quot;https://www.drupal.org/docs/8/api/layout-api/how-to-register-layouts&quot;&gt;Layout definition&lt;/a&gt; regions can be used for both blocks and fields, to create both page-level layouts and more intricate layouts for smaller pieces of content and components.&lt;/p&gt;
&lt;p&gt;Data mapped to layout regions can also be used in component template files to configure the component in some way, instead of just displaying the data as it is.&lt;/p&gt;
&lt;p&gt;The terms ‘layout’ and ‘region’ can be a bit misleading in that last use case. However, I am not aware of any reason why layouts should not be used in this way. Layout definitions have been successfully used as &lt;strong&gt;de facto component definitions&lt;/strong&gt; in component-based theming for quite a while now. There are no ugly hacks involved, and soon Drupal core will even have UI support for it.&lt;/p&gt;
&lt;p&gt;Layout definitions can also reference an &lt;a href=&quot;https://www.drupal.org/docs/8/theming/adding-stylesheets-css-and-javascript-js-to-a-drupal-8-theme&quot;&gt;asset library&lt;/a&gt;, which can be used to define all the assets of a component.&lt;/p&gt;
&lt;h2&gt;Introducing the Multiple Definition Files module&lt;/h2&gt;
&lt;p&gt;So, what could be done to improve component-based theming with these superpowers we already have in core?&lt;/p&gt;
&lt;p&gt;One of the general principles of component-based theming is that all files related to a particular component should be located in a component-specific folder. However, Drupal core currently only supports extension (theme) specific definition files for asset libraries and layouts. Wouldn’t it be nice to have &lt;a href=&quot;https://www.drupal.org/project/components/issues/2707849&quot;&gt;component-specific definition files&lt;/a&gt;?&lt;/p&gt;
&lt;p&gt;I decided to try an approach that uses existing definition file types, with no specific requirements as to where they should be located. The &lt;a href=&quot;https://www.drupal.org/project/multiple_definition_files&quot;&gt;Multiple Definition Files&lt;/a&gt; module recursively scans the default theme’s directories for &lt;code&gt;.libraries.yml&lt;/code&gt; and &lt;code&gt;.layouts.yml&lt;/code&gt; files and then merges all found definitions to the theme’s main definition files. I haven’t found any problems with this approach so far, and I think it would be great to have this type of functionality in core some day.&lt;/p&gt;
&lt;h2&gt;Introducing the UI Patterns From Layouts module&lt;/h2&gt;
&lt;p&gt;What about the great features provided by &lt;a href=&quot;https://www.drupal.org/project/ui_patterns&quot;&gt;UI Patterns&lt;/a&gt;? To use UI Patterns we still need to create &lt;code&gt;.ui_patterns.yml&lt;/code&gt; definitions, or &lt;a href=&quot;https://patternlab.io/&quot;&gt;Pattern Lab&lt;/a&gt; and &lt;a href=&quot;https://fractal.build/&quot;&gt;Fractal&lt;/a&gt; users can install an &lt;a href=&quot;https://www.drupal.org/project/ui_patterns_pattern_lab&quot;&gt;additional&lt;/a&gt; &lt;a href=&quot;https://github.com/pdureau/ui_patterns_fractal&quot;&gt;module&lt;/a&gt; that exposes their respective component definition files as patterns.&lt;/p&gt;
&lt;p&gt;UI Patterns includes the UI Patterns Layouts module that exposes patterns as layouts. But what if it was done the other way round? Could layouts be exposed as patterns?&lt;/p&gt;
&lt;p&gt;Thanks to another core layout definition superpower, support for &lt;a href=&quot;https://api.drupal.org/api/drupal/core!lib!Drupal!Core!Layout!LayoutDefinition.php/function/LayoutDefinition%3A%3Aset&quot;&gt;arbitrary properties&lt;/a&gt;, we can add the preview values expected by UI Patterns to the layout definition file. And thus was born the &lt;a href=&quot;https://www.drupal.org/project/ui_patterns_from_layouts&quot;&gt;UI Patterns From Layouts&lt;/a&gt; module!&lt;/p&gt;
&lt;h2&gt;Introducing the Drupal Definition Files plugin for Pattern Lab&lt;/h2&gt;
&lt;p&gt;Being a Pattern Lab user and contributor, I naturally turned my attention to Pattern Lab next. If Drupal core definition files could already be used for everything in Drupal, why not add support for them in Pattern Lab, removing the need to create Pattern Lab specific files?&lt;/p&gt;
&lt;p&gt;So, I wrote a Pattern Lab plugin that adds support for &lt;code&gt;.layouts.yml&lt;/code&gt; files and the arbitrary preview data section. The &lt;a href=&quot;https://github.com/aleksip/plugin-drupal-definitions&quot;&gt;Drupal Definition Files plugin&lt;/a&gt; also supports defining the data for the base pattern and all of its pseudo-patterns in just one file. This is a nice feature for projects that have many pseudo-patterns.&lt;/p&gt;
&lt;p&gt;&lt;a href=&quot;https://github.com/aleksip/plugin-data-transform&quot;&gt;Data Transform Plugin&lt;/a&gt; users need not worry, because all of its data transform features can be used in &lt;code&gt;.layouts.yml&lt;/code&gt; files too!&lt;/p&gt;
&lt;p&gt;Currently the plugin supports just layout definitions, but the plan is to add support for asset library definitions. &lt;a href=&quot;https://github.com/aleksip/plugin-drupal-definitions/issues/1&quot;&gt;Pull Requests are welcome!&lt;/a&gt;&lt;/p&gt;
&lt;h2&gt;Pick and mix&lt;/h2&gt;
&lt;p&gt;The modules and plugin introduced here can be used on their own or in any combination. The Pattern Lab plugin can be useful on its own just for the pseudo-pattern feature, even for non-Drupal projects.&lt;/p&gt;
&lt;p&gt;The modules and plugin can probably also be used for other things not described in this blog post. If so, I would be interested to learn about such use cases.&lt;/p&gt;
</content>
  </entry>
  <entry>
    <title>Drupal’s Layout Initiative and component-based theming</title>
    <link href="https://www.aleksip.net/posts/drupals-layout-initiative-and-component-based-theming/" />
    <updated>2018-11-17T00:00:00Z</updated>
    <id>https://www.aleksip.net/posts/drupals-layout-initiative-and-component-based-theming/</id>
    <content type="html">&lt;p&gt;A quick overview of some things happening with Drupal’s &lt;a href=&quot;https://www.drupal.org/about/strategic-initiatives/layout&quot;&gt;Layout Initiative&lt;/a&gt; from the perspective of component-based theming, a theme development approach that has been &lt;a href=&quot;https://github.com/aleksip/component-based-theming&quot;&gt;gaining popularity&lt;/a&gt; in the past few years.&lt;/p&gt;
&lt;h2&gt;Layouts in core&lt;/h2&gt;
&lt;p&gt;The &lt;a href=&quot;https://www.drupal.org/docs/8/api/layout-api&quot;&gt;Layout API&lt;/a&gt; and the Layout Discovery module were &lt;a href=&quot;https://www.drupal.org/node/2821240&quot;&gt;added in Drupal 8.3&lt;/a&gt; as an &lt;a href=&quot;https://www.drupal.org/core/experimental&quot;&gt;experimental&lt;/a&gt; subsystem, and they were stabilized in Drupal 8.4.&lt;/p&gt;
&lt;p&gt;Layouts have been an important tool in component-based theming as they can be used to map data to component templates. Layouts can be used with well-established contrib modules like &lt;a href=&quot;https://www.drupal.org/project/ds&quot;&gt;Display Suite&lt;/a&gt; and &lt;a href=&quot;https://www.drupal.org/project/panels&quot;&gt;Panels&lt;/a&gt;, and the &lt;a href=&quot;https://www.drupal.org/project/ui_patterns&quot;&gt;UI Patterns&lt;/a&gt; module can expose its patterns as layouts.&lt;/p&gt;
&lt;h2&gt;Field Layout&lt;/h2&gt;
&lt;p&gt;An experimental Field Layout module was also &lt;a href=&quot;https://www.drupal.org/node/2844297&quot;&gt;added in Drupal 8.3&lt;/a&gt;. Field Layout provides a simple UI for arranging rows of entity fields into regions of a single layout, in a very similar way to Display Suite. Field Layout was &lt;a href=&quot;https://dri.es/an-update-on-the-layout-initiative-for-drupal-8-4-8-5#4&quot;&gt;planned&lt;/a&gt; to be stabilized in Drupal 8.5, but it continues to be an experimental module.&lt;/p&gt;
&lt;h2&gt;Layout Builder&lt;/h2&gt;
&lt;p&gt;An experimental Layout Builder module was &lt;a href=&quot;https://www.drupal.org/node/2924128&quot;&gt;added in Drupal 8.5&lt;/a&gt;. Layout Builder provides a UI with a visual preview and it supports using multiple layouts together, placing blocks in layout regions and creating layouts for individual pieces of content. It is &lt;a href=&quot;https://dri.es/why-drupal-layout-builder-is-so-unique-and-powerful&quot;&gt;powerful and unique&lt;/a&gt; and a huge step forward in capabilities offered by core. Layout Builder is currently planned to be stabilized in Drupal 8.7.&lt;/p&gt;
&lt;h2&gt;Field Layout might be removed from core&lt;/h2&gt;
&lt;p&gt;Layout Builder has essentially deprecated much of what Field Layout provides, and uses a completely different technical approach. Layout Builder does not currently support form displays, however. As Field Layout is still experimental, it has been &lt;a href=&quot;https://www.drupal.org/project/drupal/issues/3007167&quot;&gt;proposed&lt;/a&gt; that Field Layout should be removed from core after moving its form display capabilities to core’s Field UI.&lt;/p&gt;
&lt;h2&gt;An alternative non-visual UI has been proposed for Layout Builder&lt;/h2&gt;
&lt;p&gt;Drupal’s values and principles include &lt;a href=&quot;https://www.drupal.org/about/values-and-principles#build-software-everyone-can-use&quot;&gt;building software that everyone can use&lt;/a&gt;. Core changes must pass through a series of ‘gates’ to ensure their quality is up to standards, and one of them is &lt;a href=&quot;https://www.drupal.org/core/gates#accessibility&quot;&gt;accessibility&lt;/a&gt;.&lt;/p&gt;
&lt;p&gt;Modern UIs can be challenging to build in an accessible way, as the WordPress community has sadly &lt;a href=&quot;https://rianrietveld.com/2018/10/09/i-have-resigned-the-wordpress-accessibility-team/&quot;&gt;discovered&lt;/a&gt; recently. Layout Builder is no exception, and it might prove difficult to pass Drupal’s accessibility gate in time to stabilize Layout Builder in Drupal 8.7.  Because of this it has been &lt;a href=&quot;https://www.drupal.org/project/drupal/issues/3007978#comment-12853731&quot;&gt;proposed&lt;/a&gt; that Layout Builder provide an alternative accessible UI without a visual preview, not unlike Field Layout or the block admin UI.&lt;/p&gt;
&lt;h2&gt;Component-based theming use cases&lt;/h2&gt;
&lt;p&gt;Both aforementioned types of UIs are useful from a component-based theming perspective. However, a simple non-visual UI can be a better option in many cases. Layout definitions for components might include regions for adding things that are not displayed, for example.&lt;/p&gt;
&lt;p&gt;Such a case can be found in my old &lt;a href=&quot;https://www.aleksip.net/posts/using-ui-patterns-module-in-a-component-based-drupal-8-theme&quot;&gt;blog post&lt;/a&gt; about using UI Patterns. The Code component described in that blog post defines a layout region for adding the code language. Instead of displaying the value, the component uses it as a part of a CSS class name.&lt;/p&gt;
&lt;p&gt;Another example might be a component that defines a layout region for an image and a region for text, which the component then displays over the image. Such visually overlapping regions would be unnecessarily hard to implement perfectly in a UI with a visual preview, when a simple non-visual UI could just as well be used.&lt;/p&gt;
&lt;h2&gt;Now is a good time to get involved in the discussion&lt;/h2&gt;
&lt;p&gt;Personally I think it would be really great to have an alternative simple UI without a visual preview for layouts in core. If you would like to express your opinion on this, or can think of further use cases for such a UI, now is a good time to get involved in the related issues on Drupal.org:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href=&quot;https://www.drupal.org/project/drupal/issues/3007167&quot;&gt;Remove Field Layout module from core after moving its essential features to other parts of core&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;https://www.drupal.org/project/drupal/issues/3007978&quot;&gt;Form a plan for coherent accessibility for Layout Builder&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;h2&gt;On experimental modules&lt;/h2&gt;
&lt;p&gt;This case is a good reminder that experimental core modules should only be used for experimentation, not in production. An experimental module might be removed instead of being stabilized.&lt;/p&gt;
&lt;h2&gt;Thank you&lt;/h2&gt;
&lt;p&gt;Finally, I want to thank everyone involved in the Layout and &lt;a href=&quot;https://www.drupal.org/about/strategic-initiatives/media&quot;&gt;Media&lt;/a&gt; Initiatives! Your work is very impressive and keeps making Drupal core better and more capable for component-based theming.&lt;/p&gt;
</content>
  </entry>
  <entry>
    <title>How popular is decoupled Drupal?</title>
    <link href="https://www.aleksip.net/posts/how-popular-is-decoupled-drupal/" />
    <updated>2018-04-24T00:00:00Z</updated>
    <id>https://www.aleksip.net/posts/how-popular-is-decoupled-drupal/</id>
    <content type="html">&lt;p&gt;Decoupled Drupal has been an increasingly visible topic at Drupal events and on the web for several years now. But what is the percentage of decoupled Drupal sites out of all Drupal sites?&lt;/p&gt;
&lt;p&gt;Unfortunately there is no way to get hard numbers at the moment. It also looks as if there have been no user surveys about decoupled Drupal usage so far.&lt;/p&gt;
&lt;p&gt;One way to estimate the number of decoupled sites is to look at the usage statistics of modules commonly used on decoupled sites. So I thought I would do that.&lt;/p&gt;
&lt;p&gt;(All figures are from 15 April 2018.)&lt;/p&gt;
&lt;p&gt;Number of &lt;a href=&quot;https://www.drupal.org/project/usage/drupal&quot;&gt;Drupal sites&lt;/a&gt;:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Drupal 8: 226,908 sites&lt;/li&gt;
&lt;li&gt;Drupal 7: 895,343 sites&lt;/li&gt;
&lt;li&gt;Drupal 8 and 7 total: 1,122,251 sites.&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;To get a better overall picture let’s first look at the the most popular modules:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href=&quot;https://www.drupal.org/project/project_module?f%5B0%5D=&amp;amp;f%5B1%5D=&amp;amp;f%5B2%5D=&amp;amp;f%5B3%5D=drupal_core:7234&amp;amp;f%5B4%5D=sm_field_project_type:full&amp;amp;f%5B5%5D=&amp;amp;text=&amp;amp;solrsort=iss_project_release_usage+desc&amp;amp;op=Search&quot;&gt;Drupal 8&lt;/a&gt;: &lt;a href=&quot;https://www.drupal.org/project/token&quot;&gt;Token&lt;/a&gt;, installed on &lt;a href=&quot;https://www.drupal.org/project/usage/token&quot;&gt;102,563 sites&lt;/a&gt; (&lt;strong&gt;45.2 %&lt;/strong&gt; of all Drupal 8 sites)&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;https://www.drupal.org/project/project_module?f%5B0%5D=&amp;amp;f%5B1%5D=&amp;amp;f%5B2%5D=&amp;amp;f%5B3%5D=drupal_core:103&amp;amp;f%5B4%5D=sm_field_project_type:full&amp;amp;f%5B5%5D=&amp;amp;text=&amp;amp;solrsort=iss_project_release_usage+desc&amp;amp;op=Search&quot;&gt;Drupal 7&lt;/a&gt;: &lt;a href=&quot;https://www.drupal.org/project/ctools&quot;&gt;Chaos tool suite (ctools)&lt;/a&gt;, installed on &lt;a href=&quot;https://www.drupal.org/project/usage/ctools&quot;&gt;795,261 sites&lt;/a&gt; (&lt;strong&gt;88.8 %&lt;/strong&gt; of all Drupal 7 sites).&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;The difference between the most popular module on Drupal 8 and Drupal 7 is huge! This is probably because Drupal 8 core provides much more functionality out of the box.&lt;/p&gt;
&lt;p&gt;Now let’s look at the modules used for decoupled Drupal. For Drupal 8 I have selected the &lt;a href=&quot;https://www.drupal.org/project/restui&quot;&gt;REST UI&lt;/a&gt; module and for Drupal 7 the &lt;a href=&quot;https://www.drupal.org/project/services&quot;&gt;Services&lt;/a&gt; module:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Drupal 8: REST UI, installed on &lt;a href=&quot;https://www.drupal.org/project/usage/restui&quot;&gt;8,404 sites&lt;/a&gt; (&lt;strong&gt;3.7 %&lt;/strong&gt; of all Drupal 8 sites)&lt;/li&gt;
&lt;li&gt;Drupal 7: Services, installed on &lt;a href=&quot;https://www.drupal.org/project/usage/services&quot;&gt;43,081 sites&lt;/a&gt; (&lt;strong&gt;4.8 %&lt;/strong&gt; of all Drupal 7 sites)&lt;/li&gt;
&lt;li&gt;Drupal 8 and 7: REST UI + Services, installed on 51,485 sites (&lt;strong&gt;4.6 %&lt;/strong&gt; of all Drupal 8 and 7 sites).&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;Finally let’s look at graphs of usage over time, starting with Services:&lt;/p&gt;
&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://www.aleksip.net/posts/how-popular-is-decoupled-drupal/ZtsPzVUN9G-1880.avif 1880w&quot;&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://www.aleksip.net/posts/how-popular-is-decoupled-drupal/ZtsPzVUN9G-1880.webp 1880w&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://www.aleksip.net/posts/how-popular-is-decoupled-drupal/ZtsPzVUN9G-1880.png&quot; alt=&quot;Usage statistics Services module&quot; width=&quot;1880&quot; height=&quot;400&quot;&gt;&lt;/picture&gt;
&lt;p&gt;We can see that usage grew steadily until early 2016, when it stabilised at the current level. Probably something to do with Drupal 8 being released at that time.&lt;/p&gt;
&lt;p&gt;And then the graph for REST UI:&lt;/p&gt;
&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://www.aleksip.net/posts/how-popular-is-decoupled-drupal/8StOMiGicI-1880.avif 1880w&quot;&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://www.aleksip.net/posts/how-popular-is-decoupled-drupal/8StOMiGicI-1880.webp 1880w&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://www.aleksip.net/posts/how-popular-is-decoupled-drupal/8StOMiGicI-1880.png&quot; alt=&quot;Usage statistics REST UI module&quot; width=&quot;1880&quot; height=&quot;400&quot;&gt;&lt;/picture&gt;
&lt;p&gt;We can see a steady and steep rise in usage right from the time Drupal 8 was released.&lt;/p&gt;
&lt;p&gt;These figures and graphs seem to confirm that decoupled Drupal is rapidly gaining popularity&lt;span style=&quot;text-decoration: line-through;&quot;&gt;, although Drupal 8 usage still has not reached Drupal 7 level&lt;/span&gt; (see update below). It will be interesting to see for how long this rate of increase in usage will continue.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;Update 26 April 2018:&lt;/strong&gt; It has been suggested that the &lt;a href=&quot;https://www.drupal.org/project/jsonapi&quot;&gt;JSON API&lt;/a&gt; module should be included in the figures for Drupal 8, and this is indeed a good suggestion. JSON API is used in decoupled Drupal distributions like &lt;a href=&quot;https://www.contentacms.org/&quot;&gt;Contenta&lt;/a&gt; and &lt;a href=&quot;https://github.com/acquia/reservoir&quot;&gt;Reservoir&lt;/a&gt;, and there should be very little overlap in REST UI and JSON API usage.&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Drupal 8: JSON API, installed on &lt;a href=&quot;https://www.drupal.org/project/usage/jsonapi&quot;&gt;6,341 sites&lt;/a&gt; (&lt;strong&gt;2.8 %&lt;/strong&gt; of all Drupal 8 sites)&lt;/li&gt;
&lt;li&gt;Drupal 8: REST UI + JSON API, installed on 14,745 sites (&lt;strong&gt;6.5 %&lt;/strong&gt; of all Drupal 8 sites)&lt;/li&gt;
&lt;li&gt;Drupal 8 and 7: REST UI + JSON API + Services, installed on 57,826 sites (&lt;strong&gt;5.2 %&lt;/strong&gt; of all Drupal 8 and 7 sites).&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;Usage graph for JSON API:&lt;/p&gt;
&lt;picture&gt;&lt;source type=&quot;image/avif&quot; srcset=&quot;https://www.aleksip.net/posts/how-popular-is-decoupled-drupal/W6QKsYPz_2-1880.avif 1880w&quot;&gt;&lt;source type=&quot;image/webp&quot; srcset=&quot;https://www.aleksip.net/posts/how-popular-is-decoupled-drupal/W6QKsYPz_2-1880.webp 1880w&quot;&gt;&lt;img loading=&quot;lazy&quot; decoding=&quot;async&quot; src=&quot;https://www.aleksip.net/posts/how-popular-is-decoupled-drupal/W6QKsYPz_2-1880.png&quot; alt=&quot;Usage statistics JSON API module&quot; width=&quot;1880&quot; height=&quot;400&quot;&gt;&lt;/picture&gt;
&lt;p&gt;This looks very similar to REST UI, with a steady and steep rise in usage.&lt;/p&gt;
</content>
  </entry>
  <entry>
    <title>Improving Drupal’s minor version upgrade experience</title>
    <link href="https://www.aleksip.net/posts/improving-drupals-minor-version-upgrade-experience/" />
    <updated>2018-02-25T00:00:00Z</updated>
    <id>https://www.aleksip.net/posts/improving-drupals-minor-version-upgrade-experience/</id>
    <content type="html">&lt;p&gt;Twice a year the new Drupal upgrade model makes me both excited about new features and worried about the possibility that the sites I maintain will break. I think there are some ways how the upgrade experience could be made better.&lt;/p&gt;
&lt;h2&gt;Things that could be improved&lt;/h2&gt;
&lt;p&gt;I have already written a couple of blog posts (&lt;a href=&quot;https://www.aleksip.net/posts/does-drupal-have-a-minor-upgrade-problem&quot;&gt;1&lt;/a&gt;, &lt;a href=&quot;https://www.aleksip.net/posts/more-thoughts-on-the-drupal-upgrade-model-and-drupal-8-4&quot;&gt;2&lt;/a&gt;) about the new upgrade model, detailing things that have caused and could continue to cause problems.&lt;/p&gt;
&lt;p&gt;The main points made in those posts are:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Security support is only provided for the latest minor version, and there are two minor version releases each year.&lt;/li&gt;
&lt;li&gt;It is a big challenge for contrib to keep up with changes, new features and new experimental modules in core.&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;As a consequence:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;A minor version upgrade can cause sites using contrib projects to break.&lt;/li&gt;
&lt;li&gt;Drupal 8 sites need more resources to maintain than previous major versions of Drupal.&lt;/li&gt;
&lt;li&gt;It is not clear if it is always possible to maintain a working site that is covered by security support.&lt;/li&gt;
&lt;li&gt;These issues make Drupal 8 less attractive for smaller site owners currently on a previous major version of Drupal.&lt;/li&gt;
&lt;/ul&gt;
&lt;h2&gt;Improvement idea 1: Extend security support to cover the previous minor version&lt;/h2&gt;
&lt;p&gt;Extending security support to cover the previous minor version would give contrib more time to fix possible issues. It would also make maintaining sites less resource intensive, increasing interest in adopting Drupal 8.&lt;/p&gt;
&lt;p&gt;This would of course mean more work for core committers and the security team, so I don’t know whether the idea is realistic or not. But Dries ‘liked’ the idea when I mentioned it on Twitter, so that makes me hopeful!&lt;/p&gt;
&lt;p&gt;I have opened an &lt;a href=&quot;https://www.drupal.org/node/2909665&quot;&gt;issue suggesting this on Drupal.org&lt;/a&gt; and would love to see discussion there.&lt;/p&gt;
&lt;h2&gt;Improvement idea 2: Provide a new way to find out how contrib projects are affected by a new core version&lt;/h2&gt;
&lt;p&gt;Currently there are two ways to find out if a new core version breaks your site. The best and only completely sure way is to test the new core version on the site. Another way is to browse through the issue queues of all contrib projects used on the site, looking for issues related to the new core version.&lt;/p&gt;
&lt;p&gt;It would be nice to be able to get a list of all contrib projects that have been found to either work or break on a new core version. I believe this functionality could also be useful in the &lt;a href=&quot;https://www.drupal.org/project/ideas/issues/2940731&quot;&gt;Automatic Updates initiative&lt;/a&gt;, to determine whether an update can be made or not.&lt;/p&gt;
&lt;p&gt;A lightweight implementation of this feature would be to tag issues in a commonly agreed way. If for example a contrib module was found to be broken by changes made in Drupal 8.6.0, an issue could be opened and tagged ‘&lt;code&gt;Breaks in 8.6.0&lt;/code&gt;’. That way all projects broken by changes in 8.6.0 could be easily found using the &lt;a href=&quot;https://www.drupal.org/project/issues/search&quot;&gt;‘Search issues for all projects’&lt;/a&gt; page.&lt;/p&gt;
&lt;p&gt;Being able to easily find out which contrib projects have been reported to break in the next minor release would possibly help getting issues fixed quicker. This data could also be used to gain insight on the ways contrib uses core that result in breakage. It would also provide interesting statistics on how common breakages are.&lt;/p&gt;
</content>
  </entry>
</feed>