PW 3.0.187 – New Repeater + Repeater Matrix features

[ryan]

This week we have some very useful new additions to both the core Repeater Fieldtype and the ProFields Repeater Matrix Fieldtype. This post covers all the details along with a couple of brief demonstration videos— 

https://processwire.com/blog/posts/new-repeater-and-repeater-matrix-features/

[ryan]

RepeaterMatrix v7 is now posted in the ProFields download thread. If you grab a copy, please consider it a dev/beta version (test thoroughly before using in production) and note that it also requires the current dev core version (3.0.187). 

[Jonathan Lahijani]

Hi Ryan,

Just gave 3.0.187 a whirl along with the new version of Matrix and it's looking really great.

I wanted to get your thoughts about a potential optimization to repeaters (which would also apply to matrix).

Right now, if you add a repeater field (let's call it 'my_repeater') to a template, then create a new page (let's call it 'p1'), ProcessWire will create a "for-field" page and "for-page" page in the following fashion:

• /admin/repeaters/for-field-123/
  title = my_repeater
• /admin/repeaters/for-field-123/for-page-456/
  title = p1

That's all good, but when utilizing RepeaterMatrix as a page builder in the way that I do, it can get a little insane with how many 'for-page' pages get automatically created, even if a repeater field is not being used for a particular matrix-type.  In my advanced setup, if I apply a single matrix type to a page, then as a result of having 6 different repeaters as part of my overall matrix field, 6 'for-page' pages will get created behind-the-scenes no matter what.  Now imagine a page with 20 instances of various matrix-types used, that means there will be at least 20*6 pages that have been utilized behind-the-scenes which can lead to performance issues (deleting a page like that takes some time). I could demonstrate this with a video, but I think you know what I mean.

So in short, is it possible to somehow improve repeaters so it's more efficient with the creation of 'for-page' pages?

[Ivan Gretsky]

Great additions! Have not tried'em yet, but my next week will be full of fun) Thanx, @ryan!

I was amazed to see my name in the blog post, but I need to say that all the credits for those images should go to @David Karichas they were taken from his fundamental video. By the way, everybody caring about the future of PW and its infrastructure please ??? donate to David as a creator, who shapes the things we use (and dream of), so he feels even more motivation to keep doing his thing. He asked for the support.

And of course, go get your copy of ProFields if you have not already, as that is one of the coolest ? things you can get for your PW site and supports PW development as a whole.

Sorry for the emojis, but it is late friday night here where I am at and I feel exited)))

[ryan]

@Jonathan Lahijani If I understand what you are asking for correctly, I think it's actually the next item in the class to-do's here -- does this sound like the same thing you are talking about? If so, I've actually reached the next step on that one along with some other updates, and may have it committed this week, so it's definitely on the way.

[Jonathan Lahijani]

3 minutes ago, ryan said:

@Jonathan Lahijani If I understand what you are asking for correctly, I think it's actually the next item in the class to-do's here -- does this sound like the same thing you are talking about? If so, I've actually reached the next step on that one along with some other updates, and may have it committed this week, so it's definitely on the way.

Perfect. Yes that's it.

[Jonathan Lahijani]

@ryan

Can matrix preview images also support .jpg in addition to .png?

Also, this is more of a stretch, but what are your thoughts on the ability to have a "Preview" option that renders a repeater item's frontend output in the backend?  There is a plugin in WordPress for Advanced Custom Fields that does this which I think could be a great addition in ProcessWire:
https://www.acf-extended.com/

That page has an embedded WordPress admin interactive demo right there in the hero section.

This is similar to the spirit of PageTableExtended module: https://processwire.com/modules/fieldtype-page-table-extended/

[ryan]

@Jonathan Lahijani The png is just an example and it supports any common image extension: gif, png, jpg, svg. 

I'm cool with a preview option, but just didn't want to mix preview with editor. But a preview that appears above or in a modal or something has potential. We may be able to provide an option for developers to provide their own preview render files, like we do for the preview images. The acf examples look interesting, but admittedly I'm lost in them like a nuclear power plant control room, likely because I'm not so familiar with the wordpress tools.

By the way, the option we talked about earlier (repeaters with fewer pages) is now committed in the dev branch and you can enable it by opening the "Repeaters storage" fieldset that appears on the Details tab when editing a Repeater or Matrix field. 

[teppo]

3 hours ago, Jonathan Lahijani said:

Also, this is more of a stretch, but what are your thoughts on the ability to have a "Preview" option that renders a repeater item's frontend output in the backend?

This is also more or less what Gutenberg does by default, in two slightly different ways: hovering the block before selecting it brings up a live-rendered preview (based on placeholder data provided by the block), and once the block has been added to the page you can switch it between edit/preview mode (assuming that said block has not enforced a specific mode).

Preview-on-hover was something I had planned to experiment on based on the newly added hook(s), but preview mode (similar to PTE or ACFE) would be neat too ?

[Jonathan Lahijani]

1 hour ago, ryan said:

@Jonathan Lahijani The png is just an example and it supports any common image extension: gif, png, jpg, svg. 

I'm cool with a preview option, but just didn't want to mix preview with editor. But a preview that appears above or in a modal or something has potential. We may be able to provide an option for developers to provide their own preview render files, like we do for the preview images. The acf examples look interesting, but admittedly I'm lost in them like a nuclear power plant control room, likely because I'm not so familiar with the wordpress tools.

By the way, the option we talked about earlier (repeaters with fewer pages) is now committed in the dev branch and you can enable it by opening the "Repeaters storage" fieldset that appears on the Details tab when editing a Repeater or Matrix field. 

I just tested the repeater storage option and it's working nicely.  This behind-the-scenes tweak was really important in terms of efficiency, so thanks for implementing it.

As for the ACF example, what you're seeing on that page is basically the equivalent of a matrix field with 3 matrix-types already added ("Header", "Hero" and "Cards") in a "preview" state (remember, this is inside the WordPress admin area, not frontend).  (Note: ignore those 8 vertical tabs on the left, that's just marketing material) If you click on the rendered content of one of the matrix-types there, it will switch to "editor" mode and allow you to edit the content.  Once done editing, you can click the "Close" button to go back to preview mode.

If you click "Add Row" at the bottom, it's the equivalent of the newly created images approach to selecting a matrix-type.

Hopefully that clears it up.

[Ivan Gretsky]

1 hour ago, ryan said:

The acf examples look interesting, but admittedly I'm lost in them like a nuclear power plant control room...

I was too, but @Jonathan Lahijani's explanation cleared things up. We only have to look at the thing inside a screen mockup (see my screenshot). We can interact with it create new blocks and toggle the edit/render state of the blocks.

This thing can be a better UI for a RM-based content builder, but when dealing with a lot of blocks it can get in the way taking too much space.

Anyway, I think there is a rather not-so-hard way to implement it not changing everything in PW admin (not rewriting it as a SPA) - using something like htmx (see example in the end of the linked page). Htmx is getting a lot of attention in Django and Flask communities lately. Maybe we could use it for these kind of things.

[Ivan Gretsky]

I think I remember @ryandid write about implementing something like ProDrafts' live preview in the core everywhere, so we can change a page in one part of the screen and see it dynamically update in the other. I think this might be another way of doing UI for this, maybe even a better one (or complimentary to the one mentioned before), as we can see the changes not in some pseudo-markup, but in a real one. And do not have to create this pseudo-markup and styling in the 1st place. By the way, I can see how htmx can help here too.

[Jonathan Lahijani]

1 minute ago, Ivan Gretsky said:

I think I remember @ryandid write about implementing something like ProDrafts' live preview in the core everywhere, so we can change a page in one part of the screen and see it dynamically update in the other. I think this might be another way of doing UI for this, maybe even a better one (or complimentary to the one mentioned before), as we can see the changes not in some pseudo-markup, but in a real one. And do not have to create this pseudo-markup and styling in the 1st place. By the way, I can see how htmx can help here too.

Yea, preview can be done either in the ProDrafts Live Preview way, or the ACF Extended way.  I haven't given it much thought but with the ACF Extended way, you save a lot of horizontal space in the page editor, which is especially important if you have a lot of configuration options for each matrix-type.  With the ProDrafts Live Preview way, it gets squished (although resizable).  ProDraft's Live Preview way does however provide a more realistic (not chopped up) live preview.  Pros and cons.  Would be nice if everyone had an ultrawide monitor. ?

HTMX is freaking awesome and I'm currently using it heavily on a site for filtering and such.  It's made me 100x more productive for the repetitive fancy JS type things while still being able to use regular HTML (no JSON and brittle SPA nonsense).  If that could be leveraged in some way it would save a lot of headache, although Ryan seems very comfortable with jQuery.  @ryan I think looking into HTMX is worthwhile.  It's going to stay around for a long time if I were to make a prediction.

[Ivan Gretsky]

24 minutes ago, Jonathan Lahijani said:

although Ryan seems very comfortable with jQuery.

I do not think they are mutually exclusive. And htmx is adding only 11kb

 

24 minutes ago, Jonathan Lahijani said:

I haven't given it much thought but with the ACF Extended way, you save a lot of horizontal space in the page editor, which is especially important if you have a lot of configuration options for each matrix-type.

True. Another way to deal with this could be using front-end editing. So RM blocks would get a border on hover with an edit button somewhere. All the configs could go in the popup with the repeater item fields showing on click. This could be probably done with htmx even without changing the Repeater Matrix core. But this is also not a solution for everyone, as it is not in admin.

 

Meanwhile @Robin S recently released a module that changes the RM UI kind of in the ACF Extended direction. It adds colors to the RM types chrome (that is only part of this module's functionality). If we could change the items chrome in some easy way out of the box (like adding color + icons + per type labels) that would already bring us forward a lot. Just a possible 1st step))

[kongondo]

Just came here for the htmx ?.

[kongondo]

<ot>

A few months ago, a Google search for htmx "whatever" would invariably throw up 'Did you mean: html "whatever"?'. Those have since reduced. Even the Google AI is getting better acquainted with this new technology ?. 

</ot>

[ryan]

Quote

Hopefully that clears it up.

@Jonathan Lahijani Thanks, yes your description explains it perfectly. I understand how it works now. 

Where does one define the preview view? The preview seems like it is prepared for the admin, and presumably is something different than what appears on the front-end. If that's the case, this approach would also work for Repeater Matrix (like with custom preview render files like I mentioned in my previous message). It seems like a lot of work for a developer to set up, but if it's what sometime wants then maybe they don't mind. How does ACF work in this respect? It looks to me like developer-defined admin previews, but I don't know for sure.

Then there's the potential where the preview is the literal front-end view of the element (and surrounding document), like you guys mentioned. Since front-end output in PW is entirely up to the developer, I'm not sure how much Repeater Matrix can do here. This would be more of a separate "live preview" option for the entire page rather than something specific to repeaters. PW just renders the whole page, though maybe the developer can implement their own method to selectively render one component or another (alongside the mentioned htmx), but that might be asking a lot of the site developer to implement it. This also requires that the preview be in a separate window or frame, since the full document has to be rendered, at least initially. A tool like htmx is cool and might save time relative to jQuery'ing it. But like ProDrafts preview, the underlying issue of having to render the full document remains. Htmx does have the hx-select to facilitate this, which would likely be better than the homegrown method ProDrafts uses for inline replacement. Though ProDrafts inline replacement at least doesn't require one to code for it, but I'm guessing htmx is more consistent/reliable across a much broader diversity of situations. 

[cst989]

Wow its funny you added this... I created something just a few months ago using CSS to achieve this... wish I'd waited!

Mine...

[vangeeson]

18 hours ago, ryan said:

(repeaters with fewer pages) is now committed in the dev branch and you can enable it by opening the "Repeaters storage" fieldset that appears on the Details tab when editing a Repeater or Matrix field.

Im relatively new to proccesswire, but my current and first project is very fast in development thanks to this project. Im in love with ProFields and Repeater Matrix, completely rebuilding an outdated CMS my customers used before.

What i wanted to ask: I have 3.0.187 installed and cant find this option in the Details tab. Am i missing something? Couldn't find a dev repo for PW, too.

[kongondo]

5 minutes ago, vangeeson said:

Couldn't find a dev repo for PW, too.

https://github.com/processwire/processwire/tree/dev 

Welcome, @vangeesonto ProcessWire and the forums ?.

[vangeeson]

3 minutes ago, kongondo said:

https://github.com/processwire/processwire/tree/dev 

Welcome, @vangeesonto ProcessWire and the forums ?.

Thank you very much, i have to correct: i didn't searched very well. This was too obvious.. 

[kongondo]

6 minutes ago, vangeeson said:

I have 3.0.187 installed and cant find this option in the Details tab.

The feature was committed some 20 hours ago. Maybe you downloaded your version earlier than that?

[vangeeson]

4 minutes ago, kongondo said:

The feature was committed some 20 hours ago. Maybe you downloaded your version earlier than that?

I checked out the current dev tree and now the feature is available for me, too. The commit from 20 hours ago didn't incremented the version number, so this was a little misleading.

[kongondo]

2 hours ago, vangeeson said:

The commit from 20 hours ago didn't incremented the version number, so this was a little misleading.

I get you. Commit's don't always increment the version though ?. When Ryan bumps the version he'll clearly state that in the commit.

[Jonathan Lahijani]

5 hours ago, ryan said:

@Jonathan Lahijani Thanks, yes your description explains it perfectly. I understand how it works now. 

Where does one define the preview view? The preview seems like it is prepared for the admin, and presumably is something different than what appears on the front-end. If that's the case, this approach would also work for Repeater Matrix (like with custom preview render files like I mentioned in my previous message). It seems like a lot of work for a developer to set up, but if it's what sometime wants then maybe they don't mind. How does ACF work in this respect? It looks to me like developer-defined admin previews, but I don't know for sure.

@ryan

I'm not sure how ACF Extended is doing previews, but let's just assume it's rendering frontend code in the backend (iframe).

The specific matrix-item previews would have to be from frontend code (so as a result, inside an iframe) so it utilizes the frontend css and js.  I experimented with a concept a couple years ago (go to around 2:48 in this video -- notice the preview iframe changing there as the dropdown changes).

With that being said, when switching from editor mode to preview mode, it would have to save the content in the repeater item so that the preview shows the up-to-date data.  Perhaps this could benefit from the new snapshots feature that you've been developing separately?

Regarding your concern about it being a lot of developer work, I think leaving the intricacies up to the developer is fine as long as ProcessWire provides some basic guidelines and makes it easy to pipe it all together.  Because page builders can get ridiculously complex (I've gone DEEP down this rabbit-hole) and ProcessWire doesn't force a specific frontend approach (good), I believe providing the minimal foundation for letting developers decide how they want to go about it is the best approach.  There are a lot of developers on here trying to twist RepeaterMatrix to work a certain way, but with a few more adjustments I believe it will be in a perfect spot.

To recap the last few years of "page building" with regards to ProcessWire, here's what really drove it forward:

1. the Repeater Matrix fieldtype
2. nesting repeaters inside repeaters
3. repeater depth
4. family friendly option (being able to drag a "parent" item and it takes the children with it)
5. Mystique fieldtype (for being able to define option type fields that don't warrant the use of "real" ProcessWire fields since it would get unwieldy -- I love this module)
6. new methods by which a matrix-type can be chosen (developed this week)
7. repeater lazy parents (developed this week; big efficiency gains)
8. --> matrix-type previews (or some sort of preview system) ?  ?  ?
9. THE END. ?

There is a client of mine where one of the editors (a marketing person with a good eye for design) has been using my advanced RepeaterMatrix setup with great success.  The pages he's created are outstanding and he doesn't require any of my help (I'll demo this later this year).  While the page building experience won't match an "inline" type page builder (WP Block Editor and the million other ones out there), I've found that this approach is "good enough" and the pages made will be very consistent.