Markup Region's pw-append-id / pw-prepend-id does not work as described

[szabeszg]

Short description of the issue

In the blogpost of "ProcessWire 3.0.49" where Markup Regions were introduced, pw-append-id / pw-prepend-id were explained too. According to the "Quick reference" found in the blog post:
Inserting new elements

<div class='pw-append-yo foo'>Appends this div.foo to #yo</div>
<div class='pw-prepend-yo bar'>Prepends this div.bar to #yo</div>

The div tag with all its extra classes and attributes should be inserted into the markup, but this is not the case, only its 'innerHTML" ie. "Appends this div.foo to #yo" is injected, the tag and its attributes are not.

Expected behavior

The tag and its attributes should be added too.
Earlier in that blog post, another example implied that the tag should also be inserted:
<img class='pw-append-sidebar' src='<?=$page->image->url?>'>
This example does not insert anything into the markup, since and image element has no "innerHTML".

Actual behavior

When using pw-append-id / pw-prepend-id, tag and its attributes are not inserted, only the innerHTML (if any).

Steps to reproduce the issue

Test the examples provided in the blog post and check the output in the browser.

Workaround

These ones work:

<x class='pw-prepend-sidebar test-class'><p>A workaround for using class='pw-prepend-sidebar'</p></x>
<x class='pw-append-sidebar'><p>A workaround for using using class='pw-append-sidebar'</p></x>

Additional notes

In the blog post threse are typos:

• Question mark is missing, it shoult be image->url?>
• Single/double quote characters are missing from examples (Quick reference section).
• Since the support for recursive regios have been removed, the blog post should be changed too to indicate this.

Setup/Environment

ProcessWire: 3.0.59
PHP: 5.6.28
Apache: Apache
MySQL: 5.6.34

[ryancramerdesign]

The markup regions have continued to evolve since they were first introduced, and we've changed a few things along the way. The full standard isn't set until we merge dev to master. The class attributes of the type you mentioned aren't staying, as it seemed like everyone preferred attribute support instead. Here's how you can use that:

<img pw-append='sidebar' src='<?=$page->image->url?>'>

The pw-append attribute can also be data-pw-append if you prefer it. And the append can be any one of: prepend, append, replace, before or after. In cases where you only want the innerHTML, specify the id of the region as its own attribute (id, pw-id or data-pw-id) and use pw-append as a boolean attribute:

<div id='content' pw-append>
  <p>This paragraph appended to #content</p>
</div>

The <div> tag can be anything, it doesn't matter, doesn't have to match the source tag. You can use <region> or <pw-region> if you prefer it too.

[szabeszg]

Thank you for the clarification Ryan! Does it mean that the complete support for adding the "instructions" to classes will be removed? Meaning only pw-instruction and data-pw-instruction attributes will be supported?

[ryancramerdesign]

I'm not sure I understand the question. What is pw-instruction?

[szabeszg]

I was just trying to come up with a placeholder for pw-append, pw-prepend, etc... meaning all the Markup Region attributes.