Jonathan Lahijani

Can you elaborate on what you mean by more semantic oriented?

They are not synonyms and their loose definitions are sure to cause confusion. Here are my definitions: Site Builder (aka Full Site Editing / FSE): a no-code type tool that allows you to create a website, including global portions like header and footer. Good for basic websites and non-technical people. See brizy.cloud as an example. Layout Tool: something that allows you to create a section/container/grid/cell structure for a specific page in a visual, no-code way. Components: simple things like Headline, Text, Image to complex things like Table, Definition List, Video, Slideshow, Slider (ie, things that are basically repeating content). YOOtheme Pro: a mega-theme that turns a WordPress website into a Site Builder. YOOtheme Pro's Page Builder: it's the part of YOOtheme Pro that you encounter to build a page in WordPress, as shown in the video. It's a combination of what I'm calling Layout Tool + Components.

"Is there demand for that?" -- I would say this is a resounding yes. There are dozens of page builders out there, and many tied to WordPress: https://blog.hubspot.com/service/wordpress-page-builder Block Editor (Gutenberg) is more of an advanced version of TinyMCE/CKEditor, but it's quickly becoming more of a "page builder" in the next year or two.

Hotwire is an alternative approach to building an SPA without having to do the whole API-first approach, whereby a frontend in React would consume some JSON API. Instead you just build a site the classic, server rendered way, sprinkle in Hotwire, and it makes it work like an SPA. Behind the scenes, it's working with actual HTML instead of JSON, which is the key difference. It was born out of Hey.com, the new email service from the creators of Basecamp. I strongly recommend listening to this podcast episode with DHH. He and Adam Wathan (creator of Tailwind) get deep into it: https://fullstackradio.com/151 As they say in the episode, it fits my mental model. I don't think ProcessWire from the admin side of things needs to be an SPA. However Hotwire could be used on the frontend if a developer decided.

I often develop ProcessWire websites for large companies and organizations, where there are 20+ employees. In these scenarios, my point of contact is almost always someone with a marketing or managerial role. Here are the actual positions I just pulled from the email signatures of my go-to contacts of several of my clients... notice the similarities: SVP Marketing Marketing & Business Development Marketing Associate Director of Marketing Director of Marketing (again) Assistant Marketing Manager Marketing & Communications Coordinator Production Artist Office Manager These marketers are the ones who manage the day-to-day content needs of the site. They are not coders, but are generally technically savvy. They like ProcessWire, or at least the way I set it up. They oftentimes need to throw a page together that's not strictly defined by a template. They need some flexibility to express themselves. While this can be done with Matrix in its current state (say you made 20 different sections that they can choose from), it requires a lot of planning beforehand and can't handle edge-cases without developer involvement.

In this video, I demonstrate YOOtheme Pro's Builder (WordPress) and talk about its approach and benefits. I then demonstrate 3 different builder concepts in ProcessWire using Repeater/RepeaterMatrix, two of which are modeled after YOOtheme Pro's builder and their limitations along with some suggestions. ( @ryan ) (note: there are many more considerations when it comes to a page builder, but if there were some sort of css-framework agnostic layout tool, that would solve the biggest page builder problem) Please share your thoughts.

The decimal fieldtype is available and works well (I use it for an ecommerce site with large numbers, no problems): However it would be nice if this was in the core: https://github.com/processwire/processwire-requests/issues/126 FieldTypeTable supports decimals by the way.

@ryan I can collaborate with you on improving Repeater Matrix and giving you a really deep understanding of page builders, issues that would be faced and my thoughts on a direction ProcessWire can take. I've built a module internally that demonstrates a lot of these concepts.

Indeed. Alpine looks interesting and I'm considering rewriting the cart and checkout portion of my ecommerce site with it instead of Vue one day. I'm familiar with alpinetoolbox.com, and although the examples there look good, I prefer to have components that are more "official" and battle tested especially when using multiple components together. For example, if there were eventually a project that had ready to go components from a single source that covers most of UIkit's components, I'd strongly consider it. I believe there are some projects in the works for that, but nothing totally comprehensive yet.

Looks great. Random question: how does a piece of data like order notes get stored? Is it PW fields or custom Padloper tables?

For what it's worth, I have the following working without any issues: website on a fresh digital ocean ubuntu 20.04 droplet with lamp stack (installed using sudo tasksel install lamp-server) processwire 3.0.168 php 7.4.3 mysql 8.0.22 database on digital ocean database cluster -- set this up just now specs: 1 GB RAM / 1vCPU / 10 GB Disk / Primary only / SFO2 - MySQL 8 mysql 8.x (8.0.20 based on the logs) (connecting using the default 'doadmin' user account, which should be using caching_sha2_password, not mysql_native_password); no connection issues ... I'm clicking around going to various pages and it doesn't feel "fast". Not slow, but not fast. I then upgraded to the 4gb/2cpu database cluster and it's still pretty slow. I just switched back to the local mysql server and it's way faster. Keep in mind both my droplet and my db cluster were in the same region (SFO2). Looks like I won't be using Digital Ocean's database cluster at least until it's faster or I figure out how to make it faster (if it's possible). Not sure why it's so much slower. Related: https://bensmann.no/running-wordpress-with-digital-oceans-managed-mysql-databases/

I've come across a situation where I too need to apply markup regions via a hook (inside a module), but it's not applying with Page::render or TemplateFile::render. I tried various combinations of things. @Edison were you able to ever get it working properly? @elabx any other suggestions? Note: it works fine if I do it without hooks inside /site/templates/_init.php, if that provides any insight.

My journey with CSS frameworks has been: Bootstrap v2 → Zurb Foundation → Bootstrap 3 → UIkit 2 → Uikit 3. This is over the course of 9 years, with plain CSS for several years before that. All of the frameworks I mentioned come with pre-define components along with the JavaScript to do the usual things like accordions, tabs, modals, etc. I really fell in love with UIkit 3 because it goes very deep with JS components, giving you things like filters, lazy loading and slideshow. With Bootstrap, you have to use 3rd party libraries to get the same level of functionality, which in the past has lead to breaking packages for whatever reason, compatibility issues and a lack of cohesiveness. Maybe my workflow these days would alleviate some of those issues, but the fact remains UIkit solves like 95% of my use cases. I completely see the appeal of Tailwind having done CSS for a long time, but the lack of an official set of JS components is holding me back from giving it a try. I'm still waiting to see how UIkit 4 turns out and see how much further they go with utilities. Or I just may sit down and write a set of UIkit classes using Tailwind @apply that uikit.js expects so components looks correct (has anyone done this?). But, that feels a little hacky.

TailwindCSS 2.0 was just released: https://tailwindcss.com/

I created a custom role called "editor" and assigned a user to that role. The role has every permission assigned. I also assigned full capabilities to this role on the "home" template and made sure it inherits to the children. I did the same for the "admin" template. However when I log in as a user with this editor role, I don't see the "Admin" page in the page tree. If I go to the edit URL of it (id=2), I can edit it successfully however. Why can't I see the Admin page listed in the page tree when logged in as a user with that role?

Tip: Giving Folders Custom Display Names I created a workspace where I wanted to add the "site" folder from various ProcessWire sites that I'm working on to do some updates across all the projects, as opposed to opening each workspace independently, one after another. VSCode can handle this, however because the folder name is always "site", it's impossible to differentiate which "site" folder belongs to which project in the sidebar. But, there's a way to set up a custom name override which I thought was very useful. Simply edit the .code-workspace file and add a "name" property to each root folder, so it looks like this: { "folders": [ { "path": "." }, { "name": "website 1 /site/", "path": "../website-1.com/site/" }, { "name": "website 2 /site/", "path": "../website-2.com/site/" }, ... While I could have added "website-1.com" and "website-2.com" which would have resulted in unique folder names anyway, my specific use case was a bit more involved than what I demonstrated above, so hopefully you find this tip helpful! Link: https://github.com/Microsoft/vscode/issues/45227#issuecomment-371380617

You have some references to localhost:8888 for the favicons.

I did another test on Apple's website just now and it's actually not "perfect" either (maybe it was a few months ago). See screenshot.

I was listening to Full Stack Radio recently (hosted by Adam Wathan, the creator of Tailwind CSS) and his guest for this particular episode discussed proper usage of HTML elements. It's worth a listen, especially when touching upon accessibility (overall it's a great podcast for developers): https://fullstackradio.com/118 They got into the topic of heading outline hierarchy within pages and this is something I had to do a deep dive into a few months ago for a site I made, since the client had a 3rd party SEO company do some reports which highlighted the heading structure on various pages. While optimizing the site, I got headingsMap, a very helpful Chrome extension which outputs the heading hierarchy of a page: https://chrome.google.com/webstore/detail/headingsmap/flbjommegcjonpdmenkdiocclhjacmbi?hl=en I then went on a spree with this extension and tested various popular website home pages and based on at least 100 different sites, there's only one site that really does a pristine job with heading hierarchies, and that's apple.com. I'm kind of baffled that only Apple actually took the effort do it correctly. So I'm asking you all here: which sites have you found that do it correctly and don't sweep this under the proverbial rug? The headingsMap Chrome extension has made me think twice when marking up some headings on a site that I'm developing and the use of "screen reader only" / visually hidden classes (which hides the text without using display:none, as display:none removes it from the hierarchy). Since many of us here use UIkit, I asked them to create a native visually hidden type class: https://github.com/uikit/uikit/issues/3967#issuecomment-648920911 Right now, I use CSS Tricks' suggestion located in this article: https://css-tricks.com/places-its-tempting-to-use-display-none-but-dont/ Bootstrap already has the sr-only class which is the same. This has other implications as well, like when customizing a page builder with something like repeater matrix. While it affords clients/non technical people the ability to build a page, it's worth taking the headings generated by the matrix-type templates into consideration.

Thanks for your suggestions Teppo. To keep things simple, I went with just creating /var/cpanel/php/sessions/ea-php72 on my dev server (Ubuntu via WSL2), as well as ea-php73, ea-php71, ea-php70, ea-php80 just to be future proof. I removed the wrapping <If "%{HTTP_HOST} == 'www.my-production-domain.com'">...</If> conditional as well. It works perfectly. I had to make sure to give those directories the correct ownership (www-data:www-data in my case): sudo chown -R www-data:www-data /var/cpanel

I have a site where the webhost uses cPanel. Inside cPanel, I did the following: modified the settings of cPanel MultiPHP Manager to be PHP 7.2 (instead of an older 7.0). modified the settings of cPanel MultiPHP INI Editor to change some various PHP settings, like upload_max_size As a result, cPanel appends the following to ProcessWire's main .htaccess file: # php -- BEGIN cPanel-generated handler, do not edit # Set the “ea-php72” package as the default “PHP” programming language. <IfModule mime_module> AddHandler application/x-httpd-ea-php72 .php .php7 .phtml </IfModule> # php -- END cPanel-generated handler, do not edit # BEGIN cPanel-generated php ini directives, do not edit # Manual editing of this file may result in unexpected behavior. # To make changes to this file, use the cPanel MultiPHP INI Editor (Home >> Software >> MultiPHP INI Editor) # For more information, read our documentation (https://go.cpanel.net/EA4ModifyINI) <IfModule php7_module> php_flag display_errors Off php_value max_execution_time 120 php_value max_input_time 60 php_value max_input_vars 1000 php_value memory_limit 128M php_value post_max_size 64M php_value session.gc_maxlifetime 1440 php_value session.save_path "/var/cpanel/php/sessions/ea-php72" php_value upload_max_filesize 64M php_flag zlib.output_compression Off </IfModule> <IfModule lsapi_module> php_flag display_errors Off php_value max_execution_time 120 php_value max_input_time 60 php_value max_input_vars 1000 php_value memory_limit 128M php_value post_max_size 64M php_value session.gc_maxlifetime 1440 php_value session.save_path "/var/cpanel/php/sessions/ea-php72" php_value upload_max_filesize 64M php_flag zlib.output_compression Off </IfModule> # END cPanel-generated php ini directives, do not edit Now normally that wouldn't be a problem, but I like to have my development server .htaccess and production server .htaccess be the exact same and use conditionals so that some code is executed on development and some on production as needed. If I take that block and add it to my development .htaccess file, I cannot log into ProcessWire's admin ('request was forged' error). That's probably because of the session.save_path override. So I thought about wrapping that cPanel code block like this: <If "%{HTTP_HOST} == 'www.my-production-domain.com'"> # cpanel code from above goes here... </If> That works on both development and production. But a problem occurs when I make additional updates on the production server cPanel MultiPHP Manager or MultiPHP INI Editor. Instead of cPanel just changing the code between the <If></If> block, it will append it to the end of the file again (and remove the original code inside <If></If>, so the result would look like this: <If "%{HTTP_HOST} == 'www.my-production-domain.com'"> # this is now empty. :( </If> # BEGIN cPanel-generated php ini directives, do not edit # Manual editing of this file may result in unexpected behavior. # To make changes to this file, use the cPanel MultiPHP INI Editor (Home >> Software >> MultiPHP INI Editor) # For more information, read our documentation (https://go.cpanel.net/EA4ModifyINI) <IfModule php7_module> php_flag display_errors Off php_value max_execution_time 120 php_value max_input_time 60 php_value max_input_vars 1000 php_value memory_limit 128M php_value post_max_size 64M php_value session.gc_maxlifetime 1440 php_value session.save_path "/var/cpanel/php/sessions/ea-php72" php_value upload_max_filesize 64M php_flag zlib.output_compression Off </IfModule> <IfModule lsapi_module> php_flag display_errors Off php_value max_execution_time 120 php_value max_input_time 60 php_value max_input_vars 1000 php_value memory_limit 128M php_value post_max_size 64M php_value session.gc_maxlifetime 1440 php_value session.save_path "/var/cpanel/php/sessions/ea-php72" php_value upload_max_filesize 64M php_flag zlib.output_compression Off </IfModule> # END cPanel-generated php ini directives, do not edit # php -- BEGIN cPanel-generated handler, do not edit # Set the “ea-php72” package as the default “PHP” programming language. <IfModule mime_module> AddHandler application/x-httpd-ea-php72 .php .php7 .phtml </IfModule> # php -- END cPanel-generated handler, do not edit I'd prefer for that to not happen. Does anyone know of a smart way around this? I could have 2 .htaccess files (one for development, one production) and do the necessary file renaming in my deployment script, but then I have to maintain 2 copies which I don't want to do since there would be code repetition. I'm not very advanced with htaccess so any ideas that I can look into would be helpful.

This is a braindump of experiences and considerations that a matrix-based page builder should balance. I'll give more thoughts on this later: heading hierarchy source order div nesting section patterns general fields general fields "2"..."n" ex: image + image_2 ex: list_items + list_items_2 (for example, a section w/ description list + tabs) fields mapping to components ex: title => heading ex: image => image ex: menu_items => subnav items, nav items ex: list_items => description list items, tab items, accordion items, slider items, slideshow items, grid items what to do if field is empty? hide surrounding div structure? list_items field selectively showing/hiding appropriate fields depending on component type ex: accordion items => title + body only ex: slideshow items => image only (note: currently a bug with this using matrix template overrides; utilizing hack workaround instead atm) item templates for use in repeatable components when to use hannacode vs. component section switching (in an easy/quick way) section options (mystique) css framework components 3rd party components component options css framework flexibility (use setting() to store classes) naming approach ex: Grid vs. List of People user friend matrix-type registration visual selector w/ placeholder content instant preview (ideally prodrafts) direct vs. dynamic content saved / reusable sections multilingual weird things like - wrapping links (messes up predictable div nesting?) - image backgrounds using inline css - single line vs multi-line text ex: sometimes a heading should be multi-line instead of having 2 separate fields ability to programmatically include a section template using $files->include css grid vs. flex grid - flex gap? https://coryrylan.com/blog/css-gap-space-with-flexbox A section is literally an HTML <section> (or it can be a div if specified). Imagine a section that has 2 components in the following source order: image + text. A section can be styled independently and map to UIkit section classes: https://getuikit.com/docs/section You could call this section "Image + Text" in repeatermatrix for example and give it the UIkit markup to put the image on the left and the text on the right using the appropriate css classes, and wrap it in a container. This is very easy to understand for content editors. Very important. Now you what if you want flexibility such as having a small container instead of a regular sized container? The "wrong" way to do this would be to make a new matrix-type called "Image + Text (Small Container)". Instead you think of maybe having additional dropdowns to manage such things in the matrix block, but if you think that through and build many sections, it will be overly complex and feel wrong. The "correct" way to do this would be to have various section patterns that modify the div structure and component options of that matrix-type. So for example, if you wanted a small container + animations + rounded corners on the image, you could have a section pattern (would have to be created by the developer) that the user selects that applies all that collectively. Maybe each section has 2-5 section patterns which seems reasonable. With this section pattern approach, you could theoretically have the same section display the image on its own row and the text below. But what if you want each component to be in its own different sized container? If you think this through this requires a different div nesting structure to keep things super flexible: <div class="<?=setting('div-1-class')?>" <?=setting('div-1-attr')?>><!-- container --> <div class="<?=setting('div-1-div-1-class')?>" <?=setting('div-1-div-1-attr')?>><!-- container inner --> <div class="<?=setting('div-1-div-1-div-1-class')?>" <?=setting('div-1-div-1-div-1-attr')?>><!-- grid --> <div class="<?=setting('div-1-div-1-div-1-div-1-class')?>" <?=setting('div-1-div-1-div-1-div-1-attr')?>><!-- col --> <div class="<?=setting('div-1-div-1-div-1-div-1-div-1-class')?>" <?=setting('div-1-div-1-div-1-div-1-div-1-attr')?>><!-- component wrapper --> <?=files()->include('./fields/blocks/image.php', [ 'page'=>$page, 'block_options'=>setting('image-1-block-options') ])?> </div> </div> <div class="<?=setting('div-1-div-1-div-1-div-2-class')?>" <?=setting('div-1-div-1-div-1-div-2-attr')?>> <div class="<?=setting('div-1-div-1-div-1-div-2-div-1-class')?>" <?=setting('div-1-div-1-div-1-div-2-div-1-attr')?>> <?=files()->include('./fields/blocks/text.php', [ 'page'=>$page, 'block_options'=>setting('text-1-block-options') ])?> </div> </div> </div> </div> </div> vs. <div class="<?=setting('div-1-class')?>" <?=setting('div-1-attr')?>><!-- container 1 --> <div class="<?=setting('div-1-div-1-class')?>" <?=setting('div-1-div-1-attr')?>><!-- container inner 1 --> <div class="<?=setting('div-1-div-1-div-1-class')?>" <?=setting('div-1-div-1-div-1-attr')?>><!-- grid 1 --> <div class="<?=setting('div-1-div-1-div-1-div-1-class')?>" <?=setting('div-1-div-1-div-1-div-1-attr')?>><!-- col 1 --> <div class="<?=setting('div-1-div-1-div-1-div-1-div-1-class')?>" <?=setting('div-1-div-1-div-1-div-1-div-1-attr')?>><!-- component wrapper 1 --> <?=files()->include('./fields/blocks/image.php', [ 'page'=>$page, 'block_options'=>setting('image-1-block-options') ])?> </div> </div> </div> </div> </div> <div class="<?=setting('div-2-class')?>" <?=setting('div-2-attr')?>><!-- container 2 --> <div class="<?=setting('div-2-div-1-class')?>" <?=setting('div-2-div-1-attr')?>><!-- container inner 2 --> <div class="<?=setting('div-2-div-1-div-1-class')?>" <?=setting('div-2-div-1-div-1-attr')?>><!-- grid 2 --> <div class="<?=setting('div-2-div-1-div-1-div-1-class')?>" <?=setting('div-2-div-1-div-1-div-1-attr')?>><!-- col 2 --> <div class="<?=setting('div-2-div-1-div-1-div-1-div-1-class')?>" <?=setting('div-2-div-1-div-1-div-1-div-1-attr')?>><!-- component wrapper 2 --> <?=files()->include('./fields/blocks/text.php', [ 'page'=>$page, 'block_options'=>setting('text-1-block-options') ])?> </div> </div> </div> </div> </div> You can represent those 2-component div structures like this: (1 2) (1) (2) If you have 3 components: (1 2 3) (1 2) (3) (1) (2 3) (1) (2) (3) 4 components: (1 2 3 4) (1 2 3) (4) (1 2) (3 4) (1) (2 3 4) (1) (2) (3 4) (1) (2 3) (4) (1 2) (3) (4) (1) (2) (3) (4) 5 components: (1 2 3 4 5) (1) (2 3 4 5) (1 2) (3 4 5) (1 2 3) (4 5) (1 2 3 4) (5) (1 2 3) (4) (5) (1 2) (3) (4) (5) (1 2) (3 4) (5) (1) (2 3 4) (5) (1) (2 3) (4 5) (1) (2) (3 4 5) (1) (2 3) (4) (5) (1) (2) (3) (4 5) (1 2) (3) (4 5) (1) (2) (3) (4) (5) (it can actually get more complex than that, but no need to go there) A CSS Grid approach probably removes the complexity required for div nesting (not 100% sure since I haven't used CSS-grid in a long time). UIkit would ideally have a built in solution in version 4. Maybe I'm overthinking this div nesting part. Perhaps the section pattern (which comes in via a json settings file and stores its values in setting()) directly specifies which div nesting layout should be used. Hmm.

I just started playing around with this and I thought I was doing something wrong, but based on the lemmas, "books" will match "source". I thought I was going crazy because I was getting a ton of extra, unexpected results, but I suppose this definition makes that association: // WireWordTools/lemmas/s.json "sourcebooks": "sourcebook", A heads up for anyone diving into Ryan's WireWordTools module.

It's definitely possible. I built a complicated online scholarship application with ProcessWire, while not the same thing as an exam, it did have some similarities. An application would be initiated by a nominator on behalf of the person being nominated, and then there were 3 reference people per application (it got pretty complicated). Notification emails, application statuses, a bunch of other things. In my case, the public interface was mostly the in admin, so it had no "frontend" (other than some templates that would be used for redirecting to the edit url). That meant using roles, permissions and hooks accordingly to lock things down. In your use case, I would say to build a custom front-end for it and not do it the way I did it. It will be easier and I think it makes more sense for your use case (ie, multiple choice questions as opposed to all kinds of various fields from files, rich text, etc.). One crucial thing to test heavily is making sure the test takers don't get logged out for some reason. In my situation, that happened and I could not exactly pinpoint why, but it caused a lot of trouble especially since the application involved people filling out long-form answers, which would then be wiped when they hit the save button and their session had expired. I'll have to figure that out in the next iteration, but that was bad. You may want to have one question per page. This is how online / computer-based tests usually do it anyway. As for structure, maybe this could work: Home Exams Exam 1 Question 1 ('question' template) Answer Option 1 ('answer' template) Answer Option 2 Answer Option 3 Question 2 Answer Option 1 Answer Option 2 Answer Option 3 Submissions Submission 1 ('submission' template) Submission 2 question template title - the question being asked answer template title - the answer text correct - checkbox indicating this is the correct answer submission template (title -- make the field not required and hide it, rather than removing it as a global field... a trick I use) user - page field for parent /admin/access/users/; the person who took the test; maybe use the autocomplete inputfield here since loading 25,000 things into a select list will be problematic exam - page field for parent /exams/; the exam that was taken answers - multi-select page field (asm-select) that has all the answers they chose for the particular exam (any other relevant data you need to store) With some code you can check the correct answers of an exam vs. the submission answers and go from there.

I've probably thought up a dozen different approaches to creating an ideal page builder in ProcessWire but each of them have their pros and cons. It's very difficult to strike a perfect balance for something that suits both developers and editors. There are so many (!) other variables to consider. This isn't just a ProcessWire dilemma, but just the nature of page building itself. There are trade-offs and complexity must live somewhere. In an ideal world, you'd use RepeaterMatrix in a classic way, but if you run that thought experiment, here's what happens: I'll make matrix-types for all the sections in a particular page. I'll write the templates for those matrix-types, so all an editor has to do is fill in the fields and everything just falls into place. I'll drive off into the sunset and be happy. Well, turns out there are some changes that need to be done. MatrixType X needs another field. I'll add that field and update the template. Well now we need another matrix-type, but it's basically identical to MatrixType X except the columns are flipped. Does this warrant a new matrix-type or a toggle option of some sort? ... You start another new project and it needs a page builder like the first site. You realize there's going to be some heavy re-use of matrix-types from the first site, so you now think... hmm maybe I should somehow modularize this approach where there is a shared matrix-type library. (I've done this) ... Many of the matrix-types between site 1 and site 2 are similar, but with slight differences... some have different css class names, some have different field names. Now this shared matrix-type library has a bunch of matrix-types but you feel unsatisfied because you think there is a better way to refactor this. The ideas in your head about how to refactor end up going against the grain of the classic page builder way / repeater matrix approach and now you're frustrated. I've gone through this thought process a bunch of times. I've researched basically every single page builder out there. It's like trying to solve a puzzle without a definitive end result. One thing that happened is reactive frameworks gave rise to the current generation of page builders (think WP Block Editor / Gutenberg, SquareSpace, and few dozen others). This left the classic page builder approach behind (RepeaterMatrix, ACF Flexible Content). But I like the classic approach because it gives more programmatic control and it's the way ProcessWire works... and editors can't really mess things up since it's a more controlled experience. I feel like there hasn't been experimentation and development for the classic approach since the world has "moved on" to the newer generation approach. I think RepeaterMatrix is good, but maybe it can benefit from some experimentation of some sort.