Jump to content
Jonathan Lahijani

Helpful Tips for Markup Regions and IDs

Recommended Posts

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.

  • Like 4

Share this post


Link to post
Share on other sites

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.

  • Like 2

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...