DrupalX

Extension
Framework

Paragraph-only layout

There are many ways to create a website with Drupal due to the many great modules that are available (Panels, Paragraphs, etc.). DrupalX has some features which only make sense when you build your website a certain way. Some of those ideas are probably quite unique to DrupalX and may certainly be a bit "unsual" at first - compared to how you are used to do things.

You can, however, still build a website with any method you like and still get a lot of use out of DrupalX. But you should, nevertheless, be aware of DrupalX's underlying ideas on how to build sites to understand some aspects better.

Basic idea

DrupalX supports the use of the "paragraphs" modules to build your websites. OK, you might already know that module. Not revolutionary, you might think. But: DrupalX makes it very easy to build your website with paragraphs - and paragraphs only. That means: No more regions, no more blocks. Use paragraphs for everything on your site, because - when you think about it - paragraphs incorporate all the features that regions and blocks provide. And they are very flexible: They are fieldable, they can contain content, they can be nested. The only problem might be that they are not very handy in some situations: For example, with standard Drupal, it's quite difficult to reuse content that resides in paragraphs on other pages etc. That's why blocks exist. DruapalX, however, makes it quite easy to use paragraphs for everything that's on your page. Your whole page becomes just a bunch of Russian dolls, one inside the other.

The huge advantage is that you, as a developer, and all content editors will only ever have to deal with one single unified concept and not with many different incompatible ones. When everything on your page is a paragraph - many flexible layout solutions suddenly become very easy to realize just by arranging or nesting paragraphs properly.

Hierarchical site structure

The next ingredient for DruaplX's site building recipe: A main menu. OK, this is easy. Most sites have that. It can be seen as a tree that starts with the root level (home page) and then branches out to a 2nd and 3rd level and so forth. The home page sometimes isn't actually part of the menu - DrupalX always considers the home page to be at the imaginary "root" level of the menu, however.

With the concept just described, each page obviously has a parent page in that menu and a grand parent page and so forth. You can follow a page's "ancestry" up to the root level. Probably you also have some pages that are not part of the main menu - either because they are part of some other menu or because they are not in any menu at all. We ignore them for a moment.

Now, DrupalX provides a very easy way to access content from your template that is further up that ancestry tree as we will see below.

A first template

DrupalX extends Twig so you can use "$" to render fields and "#" to get the raw value of a field. We can, for example, create a content type "page". (Actually we recommend you only ever create one single content type for your pages - not many different ones. DrupalX allows so much flexibility anyway that you probably won't actually need totally different page templates.) With that content type "page", you now add two paragraph fields "main" and "right" (they represent the "regions" of your page but are actually paragraphs as you can see). Additionally, you create a first paragraph called "teaser" with a single text field "body". Obviously, you can now create pages where you can add many different teasers. Some in the main area, some in right sidebar.

You can now, for example, create a template in your theme "page--page.html.twig" like so:

<h1>{{$title}}</h1>
{{$main}}
{{$right}}

You can easily style the paragraphs in $right to be at the right-hand side next of the main content. Your basic layout is now ready.

Inheritance

With the preparations just described, we can now create a first page based on the "page" content type for our home page and fill it with some content. We can add some teasers in main, some in the right sidebar, and write one or two lines of sample text. This is the one and only 1st level page (see the section about the hierarchical site structure above).

When we now create a second page which resides on the 2nd level, we can also fill it with teasers like we are used to. No big surprise here. However, you probably already have some teasers in the sidebar of your homepage and you probably don't want to replicate them on every page again and again. It would be nice, if we could tell Drupal to just get the paragraphs of the root page, if our own page doesnt define any teasers for the sidebar. With DrupalX, this is extremly easy. Actually it's just one additional character. You can achieve this effect just by duplicating the prefix:

<h1>{{$title}}</h1>
{{$main}}
{{$$right}}

Notice, that only "right" now has a double prefix. We obviously don't want to inherit any main content from the start page. Only the teaser boxes of the right sidebar. And only when our current page doesnt provide own paragraphs. See the chapter about field access operators for more information on whats going on here.