Helpful Tips for Markup Regions and IDs

[Jonathan Lahijani]

With markup regions, you can assign an HTML-based ID (which gets rendered in final output) or PW's specific 'pw-id' attribute (which does not get rendered in final output) to your tag.  For example:

<div pw-id='foo'>...</div>

Tip #1: Markup Regions do NOT need to be unique!

In HTML, IDs should be unique to the page (otherwise it's considered invalid html).  However when defining markup regions in PW using the above region method, it does NOT actually have to be unique.  The cool part about this is if you apply actions to regions (append/prepend/replace/etc) with that pw-id, it will apply the action to all of them.  This is incredibly good.

Tip #2: You can assign multiple regions to a tag and run actions on any of of them!

I just discovered that you can assign multiple IDs to a region like this:

<div pw-id='foo' pw-id='bar'>...</div>

If you run an action on the first, the second, or both, it will work!  This is also incredibly neat and opens up a lot of possibilities.

None of this is mentioned in the documentation on Markup Regions:
https://processwire.com/docs/front-end/output/markup-regions/

Enjoy.

[Jonathan Lahijani]

An example of how I'm using this in my super module would be like this...

My module has different sections (repeatermatrix), and each of those sections contain different blocks like gallery, body copy, etc (typical page-builder stuff).

Section A has "body copy" + "gallery"
Section B has "headline" + "gallery"

A big part of my super module is programmatic control for developers (at the expense of 100% flexibility like with page layout builders... Elementor, Gutenberg, YooTheme Pro).  Therefore, a developer would be able to "hook" into any sections that were applied to a page via regions.

The gallery block would be peppered with different region IDs like this:

<div pw-id="block-gallery" pw-id="section-a-block-gallery">...</div>

This essentially provides a developer the ability to run region actions on galleries on the site, --or-- all galleries that were within the context of Section A.

[gornycreative]

This is really interesting, does this work like nesting markup regions inside each other? Does this sortof daisychain the region content into the _main region?

Oh never mind I see - so you can assign multiple markup region areas to a single region defined in _main. What happens if you happen to define both regions in your template file? I'm guessing the last one created takes precedence unless you do an append/prepend or something?