PAGEGRID – Page Builder Preview

[jploch]

PAGEGRID 1 released!

 

 

[jacmaes]

This is impressive and fulfills a lot of requirements I am looking for this type of page builder. I particularly like the use of blocks as pages (maintaining the PW flexibility to reference these blocks from other pages), that styles are saved separately in JSON and a stylesheet in generated for each page (which you can check in the source code of your example), and above all the use of CSS grids that allow much more complex and visually interesting layouts. I wouldn't let my clients touch this kind of interface unless they're design-savvy, so I'm glad that design features can be disabled for certain roles. Congrats!

[jacmaes]

@jploch, could you explain what each icon in the sidebar does? You demonstrate a headline, a video and some images in your video, but what else is available?

[jploch]

57 minutes ago, jacmaes said:

@jploch, could you explain what each icon in the sidebar does? You demonstrate a headline, a video and some images in your video, but what else is available?

There are a couple of blocks that I did not show. I can add another video to showcase those, when I find some time. In the meantime you can check out https://www.michael-philipp-bader.com/ to see them in the frontend. The home page (overview) for example features a gallery block that opens an image or video in a light box. On the contact page you can see a map block that uses the Leaflet Map Marker module. On the portfolio page there s a page reference block that loads all the selected pages/projects. 

I just want to be clear that it's up to the developer to create as many blocks as they like. Blocks can have all the fields that are available in PW. You just create a template and assign fields (like you normally do) and add that template to this fieldtype. Then you create a file with the name of that template in your template folder (or subfolder if you use the delegate template approach feature of this module) with the markup that gets rendered. You can also add a special class to elements you want to make draggable/resizable. More instructions on how to use this, with code examples will follow, once it's ready.

 

[jploch]

I just added some new features.
– All blocks can be cloned now.  Which makes adding content very fast
– More options to control access of blocks individually. You can lock editing of blocks completely or disable features such as cloning, styling or content editing for certain roles

I was also thinking about the best approach to copy blocks between PW installations or to share them with others. The easiest way I found was to export/import a page, with all the blocks you want added, using adrians migrator module. The export code together with the block template files could be shared with others or imported into existing installations. So this would be an option until we hopefully have something in the core to make migrations work better. An alternative would be to store everything as JSON (including the content) and using something similar to the Mystique Module to let the developer add fields based on config files. That also has the benefit of being able to have the files version controlled. The downside of using the JSON only approach would be inferior searchability of fields. Also making it work with every fieldtype would be a challenge. I'm interested how others feel about this.

[bernhard]

16 hours ago, jploch said:

I was also thinking about the best approach to copy blocks between PW installations or to share them with others.

Have you had a look at RockMigrations? You get the best of both your worlds: Easy migrations + version control...

 

[jploch]

21 minutes ago, bernhard said:

Have you had a look at RockMigrations? You get the best of both your worlds: Easy migrations + version control...

I saw this a while ago, but just had a brief look at it. I will play around with this some more, but this might be even too complicated for my needs. The target group for my module are not only web developers, but also non technical people like designers, experienced editors, or marketers. I need a way for these people to import new blocks as well. 

[bernhard]

I know it feels complicated in the beginning. I've been there 4 years ago when Lostkobrakai was talking about that mystical thing called Migrations. I've put a lot of effort into my module to make simple things simple without the technical overhead of needing custom classes for each migration like in the other module (that has other benefits of course).

https://processwire.com/talk/topic/21212-rockmigrations-easy-migrations-from-devstaging-to-live-server/?do=findComment&comment=208165

$rm->migrate([
  'fields' => [
    'foo' => [
      'type' => 'text',
      'label' => 'My foo field',
    ],
    'bar' => [
      'type' => 'text',
      'label' => 'My bar field',
    ],
  ],
  'templates' => [
    'mybuilderblock' => [
      'tags' => 'MyBuilder',
      'fields' => ['title', 'foo', 'bar'],
    ],
  ],
]);

It really can't get simpler than that! And I think that is something that can be done by anybody - even non-coders. TracyDebugger does even have a "field code" panel where you get those code snippets. So you can create fields and copy the code over. Once familiar with the field properties (they are always the same) you get a LOT more efficient with code setup. Add a new field? copy the 3 lines of "bar", rename the field, done. Make those 3 fields have all 33% width? Use multicursor in your IDE and all fields are 33%.

Compare that to field import/export or other setups... Edit field 1, set field width, save. Edit field 2, set field width, save. Edit field 3, set field width, save. Don't like the result? Edit field 1........... you get it ? 

[jploch]

@bernhard Thanks for your examples. It does look simple to create a migration. It would be nice if a non technical person could then easily paste that code into the backend, click a button and everything is imported. Is that possible with your module? I don't want that person to open an editor, that person might not even have access to FTP. With  adrians migrator module it's possible to import the code/JSON in the backend and create all the pages, templates and fields in one import. I'm not saying that this is somehow better than how your module works, it just might be better suited for my usecase. Your module clearly has a lot of benefits compared to migrator.

[bernhard]

Ok I get your point and usecase.

[jploch]

Hey folks!
Just wanted to give you an update on this. Iam close to an alpha release now. I added a lot of features (containers/groups, more styling options, api functions, optional webfonts/google fonts integration, UI improvments etc.) and bug fixes and now it feels quite stable. I still have to do some testing and some UI stuff. Iam really exited to show you the new version soon! ?

Before I can post a final release date I have to think a little bit about how the JSON for the styling is saved and make sure that it's solid. I have two approaches and can't decide which one is best. Maybe someone, who used page table (my module uses templates/fields just like page table), can help me figure this out. It works like this:

When a new block/page is added to the page table, my module auto generates a title and a name. The title is generated based on the name of the template the page item is using plus the page id.

I title could look like this:
block_image_5143

This title (with sanitizer) is then used as an ID to save all the styling information for that item/page to my JSON field (it's also used to generate a css class name). The ID has to be unique in the context of the page containing the page table items. I figured I can't use the page id or the page name, because when a page containing a page table grid is cloned, all the items/pages added to the page table get duplicated and change their name and ids, so the clone loses all the styling information. So while it works great with the title field, it has the downside, that when the user changes the title, the connection to the ID/title in the JSON gets lost. So an alternative approach Iam considering now is to add an extra field to every page table item template automatically via api (pupulated on item/page creation), eg. pgrid_id. This field only has superuser access or is completly hidden. While this adds a little more overhead, it may be the better approach. What do you guys think is better?

[d'Hinnisdaël]

Shouldn't it be enough to associate the styles with the block page's id and make sure cloning a page also clones its associated styles? If you assign a unique id (pgrid_id) to each block but keep that around after cloning, you won't be able to edit the cloned page's styles without it affecting the original page's styles. Or maybe I'm missing a part of the picture here.

[jploch]

2 hours ago, d'Hinnisdaël said:

Shouldn't it be enough to associate the styles with the block page's id and make sure cloning a page also clones its associated styles?

Thx for your input! Just to be sure we are on the same page here. 
Iam talking about the parent page with my grid field, that holds all the childpages, lets call them blocks.
So cloning this parent page from the page tree with the copy button, causes all the blocks on the clone to change their page id (need to be unique) and page name, the page title however will not change, so setting the title as the JSON ID will keep the styling information without any need for a comparison of IDs or additional fields. As I understand it, going with ids would need a hook on page add/clone to handle the switch of IDs or all the styling information is lost. Using the title field or a custom field to simply copy the same JSON id to the new page (page clone does this automatically) worked well so far.  Iam worried when external pages that already exists in the page tree are added to the page grid field (eg. via api) it would not be a good idea to use the title field here, because it maybe be accidentally changed by the user and lose its connection with the JSON id. Also not sure I was clear, the JSON data lives on the parent page, I only need a way to connect the blocks with the JSON id. Hope that makes sense ?

[d'Hinnisdaël]

I see. In that case creating a custom field would probably be best and have little overhead if it's autoloaded.

What's the reasoning behind storing the data on the parent and not on the children? Performance? Storing it on the children, you could use the `$page->meta()` api and avoid the need for hooks since that should be cloned alongside the page. It currently only allows associative arrays and might have a performance penalty as well.

[jploch]

1 hour ago, d'Hinnisdaël said:

What's the reasoning behind storing the data on the parent and not on the children?

I tried to keep it simple and was also concerned with performance. Updating the JSON field on the parent page is easy. Storing the data on the children/blocks would mean I have to update the JSON via ajax every time the blocks style is updated (not a big deal). Also there are some settings for the parent page I need to save as well, so it seemed like a good approach to have just one JSON field to keep all the data in one place. Maybe I will consider moving the JSON to each block instead, but that would mean a lot of refactoring needs to be done. Also what will happen if the same block page is added to two different grid fields/parent pages, then it could only have one style that is associated with the block. With my current approach, it would be possible to have different styles for the same block, since the JSON is stored on the parent. I have to think about this a little.

Thanks for looking into this! I have a tunnel vision by now, and there are so many things to consider, it's very helpful to get a fresh perspective on it.

[d'Hinnisdaël]

I think your reasoning is sound. Especially for blocks that are re-used across pages (which I didn't have in mind).

[jploch]

still it would be nice to just use the title field as the block id without the need for an additional custom field. The title is not really needed in the context of the block, so I could just hide it in the editor. Since the block pages are hidden under the admin page in the tree (this can be changed in field settings, but maybe I will remove that setting and make that the default), there is no real danger to acidentally change the title of a block manually. That way I don't have to take care of installing/uninstalling the custom field.

I guess the main question is if it should be possible to add existing pages to my grid, that do not use the block templates but are just regular pages in the tree. For those cases the title field would not be a good option. However it would still be possible to include those pages with a block that has a page reference field. This would also be a better option to include existing pages, since it's much more clear there is an actual connection to another page. 

[d'Hinnisdaël]

Accepting arbitrary pages sounds like a nightmare to support. There's really no upside to it that I can see. Linking existing pages via page reference fields sounds much more doable and logical. You'll avoid all those problems you already recognized.

[jploch]

I am still working on this one. It works great and is quite flexible now. I made a couple of improvements.

• Now the data to style the items is stored directly on the item with $page->meta(). This way, cloning pages and page reference fields work out of the box. Also there is no need for hidden fields anymore. 
• The style panel now supports adding custom classes and assigning styles to them. These classes can be used globally on all pages (a css class is also a page).
• The style panel now supports selecting html tags to style tags globally across the whole site.
• I did a lot of refactoring to make the code cleaner and more efficient.

There are still things where I am looking for feedback before releasing an open beta for this module:

Sharing blocks and migrating pages
I played with the core ProcessPagesExportImport and the migrator module and it seems that it's not exporting the meta() data, which is a bummer. So for now I might not be able to have a migration feature out of the box. Maybe someone else can take a look at this, but it seems to be too much hassle for me now. Importing/exporting the whole database with ProcessDatabaseBackups works as expected though. Also I did develop some block modules that you can install optionally, these will create the needed templates and fields for that block and give you a quick way to start working with PageGrid (without the need to create your own templates or install a site profile), more on that later. (Item pages are based on a block template).

Structure of PageGrid items/pages 
I decided to always store the items under the admin page in a seperate parent, instead of making the parent customisable (like PageTable is doing). So there is a clear separation between pages for your site and item pages. PageGrid then creates a structure looking like this (makes it easy to access the pages):

Admin
– PageGrid Items
   – Home items (name: for-1213)
        – Item Editor
        – Item XY
  – Another Page items (name: for-1315)
        – Item Group
            – Item XY
            – Item XY
        – Item Editor

The structure of these pages is an exact representation of the PageGrid items/pages (sorting, child/parent relation, hidden/published). While working with PageGrid via the UI this is not so important, but I think it will make interacting with the item pages via API more flexible and clean. Adding a page to any of the item pages via API or the backend also adds the page to PageGrid. If you delete a page containing a PageGrid field, the items also get deleted. You can also sort via API (or manually under the Admin page) and the changes are reflected for the items as well. The connection is via a name like for-1213, where 1213 is the ID of the page holding the PageGrid field (inspired by repeaters). I like this setup because it gives you a lot of options to access items via API and keeps the pagetree clean. Also it will make it easier to handle migrations for pages containing a PageGrid field in the future (just import/export the page and the item page container). One downside, though, is that the methods of PageTable like $page->pt->add($newpage) or $page->pt->remove($newpage) are no longer working (PageTable is using a PageArray that is saved as the field value). Also this will not work with multiple PagGrid fields on one page (A PageGrid field can however have a page reference field to another page containing a PageGrid field, as well as having nested pages, so I see no benefit of supporting multiple fields). You can add a page to the item parent like this:

// Add an PageGrid item via API
$itemParent = $pages->get("for-$page->id");
$itemParent->add($newpage)

I am not decided if my approach is better or if I should just stick with the PageTable methods (keeping the items stored as PageArray inside the field). Since PageTable can only have one parent that you select in the field settings, all items will than be stored under the same parent, which is a bit messy.

Not sure if any of that makes sense to you ? Any feedback is welcome. More info and website is coming soon!

[Fuzen]

This is amazing. Excuse me for not reading thoroughly but does this allow building on-the-fly pages from PW fields? If so, the layout functionality is basically for creating the initial page structure as well as one-up pages?

[jploch]

On 6/25/2022 at 11:10 PM, fuzenco said:

This is amazing. Excuse me for not reading thoroughly but does this allow building on-the-fly pages from PW fields? If so, the layout functionality is basically for creating the initial page structure as well as one-up pages?

the layout functionality is creating the initial page structure, but It's not creating a template with fields on the fly, if that's what you mean.

The page structure is defined by the items you add to your page. PageGrid creates a hidden page for every item that gets added to it (similar to how PageTable or Repeater Matrix work). Each item is based on a block template. A template can have multiple fields to hold your data (native ProcessWire templates and fields). You can use all the fields ProcessWire provides or add even more fields using external Fieldtype modules. But you have to create these templates yourself, as well as the markup that gets rendered.

If you want to get started quickly, I also developed some block modules that you can install optionally, these will create templates, fields as well as a template files automatically, without the need to write any code. These blocks will cover the basic needs for most websites (containers, text, images, video, slider, maps, etc..).

More information and documentation is coming soon.
Until then have a look at the first post ?

[jploch]

The PAGEGRID beta will be released next week!

If you want to help testing this module and try it yourself for free, please apply for the beta test.

[MarkE]

I was just starting to develop something similar, based on CSS grid, which I think is the right way to go. One thing my design has is “pro-forma” pages - ie pages with pre-defined layout and dummy content that you can use to create similar pages. This is an approach I have taken before for “standard letters” and works well. Not sure if that’s in your module @jploch, but I’m hoping I could easily add it. Anyway, I’ll hold off now and test yours, if I may. I have a project I was going to use which is a WP conversion with a simple theme, which I hope makes a reasonable test bed. I’ll also look into how well my (json-based) DbMigrate module plays with it. 

[jploch]

@MarkE More options/tools are always great. But there might be some overlapping between our modules, I will send you a test version and you can see for yourself. PAGEGRID is no longer limited to CSS grid, it also supports flexbox and most common CSS properties. It's like ProcessWire and webflow had a baby, but that baby is still very young ?

15 hours ago, MarkE said:

One thing my design has is “pro-forma” pages - ie pages with pre-defined layout and dummy content that you can use to create similar pages.

Maybe this?

[MarkE]

2 hours ago, jploch said:

Maybe this?

Pretty much! The only difference is that I was using a page ref field for the template, rather than a parent.