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.

cool! but still can someone look at my code and tell me if the JSON structure is fine?

 @ukyo Thanks! Your module looks great! However I already have a way to build my JSON based on inputfields, wich is just needed to save some internal css of my module. All the real content is saved in the database with regular pw fields. I would like to keep it that way, but was looking to get some feedback on my JSON structure. Specially I'm not sure if it's valid to have numerical keys (page id)? Everything is working fine, so if it's not bad practise for some reason, I will just keep it that way.
 
Doing it all in JSON (including the content) with your module would have the benefit of being able to transfer the templates to other installations without importing the database and also have it version controlled, right? But the downside is that it's not searchable as well as native fields and also that not all fields are supported?
 

Hey folks,

for a module (a pagebuilder based on PageTable) I need to save some settings as JSON. The values are saved for each page table item (a pw page). It's working well, but I am looking for ways to improve the structure I have. As I'm not that experienced with JSON, maybe someone more experienced can take a look and tell me if my approach is good practice. 

My goal is to make all the items accessible by page id, without looping over them (using objects instead of arrays):

// access from template with pw page var
$jsonObject->items->{$page}->cssClass;

Her is an example of my JSON structure:

{
  "items": {
    "3252": {
      "id": "3252",
      "cssClass": "pgrid-main",
      "breakpoints": {
        "base": {
          "css": {
            "grid-column-end": "auto",
            "grid-row-end": "auto",
            "grid-column-start": "auto",
            "grid-row-start": "auto",
            "align-self": "auto",
            "z-index": "auto",
            "padding-left": "60px",
            "padding-right": "60px",
            "padding-top": "60px",
            "padding-bottom": "60px",
            "background-color": "rgb(255, 255, 255)",
            "color": "rgb(0, 0, 0)"
          },
          "size": "@media (min-width: 576px)",
          "name": "base"
        }
      }
    },
    "3686": {
      "id": "3686",
      "cssClass": "test_global",
      "breakpoints": {
        "base": {
          "css": {
            "grid-column-end": "-1",
            "grid-row-end": "span 1",
            "grid-column-start": "1",
            "grid-row-start": "auto",
            "align-self": "auto",
            "z-index": "auto",
            "padding-left": "0px",
            "padding-right": "0px",
            "padding-top": "0px",
            "padding-bottom": "0px",
            "background-color": "rgba(0, 0, 0, 0)",
            "color": "rgb(0, 0, 0)"
          },
          "size": "@media (min-width: 576px)",
          "name": "base"
        }
      }
    },
    "3687": {
      "id": "3687",
      "cssClass": "block_editor-3687",
      "breakpoints": {
        "base": {
          "css": {
            "grid-column-end": "span 2",
            "grid-row-end": "span 1",
            "grid-column-start": "auto",
            "grid-row-start": "auto",
            "align-self": "auto",
            "z-index": "auto",
            "padding-left": "0px",
            "padding-right": "0px",
            "padding-top": "0px",
            "padding-bottom": "0px",
            "background-color": "rgba(0, 0, 0, 0)",
            "color": "rgb(0, 0, 0)"
          },
          "size": "@media (min-width: 576px)",
          "name": "base"
        }
      }
    },
    "3696": {
      "id": "3696",
      "cssClass": "block_editor-3696",
      "breakpoints": {
        "base": {
          "css": {
            "grid-column-end": "span 2",
            "grid-row-end": "span 1",
            "grid-column-start": "auto",
            "grid-row-start": "auto",
            "align-self": "auto",
            "z-index": "auto",
            "padding-left": "0px",
            "padding-right": "0px",
            "padding-top": "0px",
            "padding-bottom": "0px",
            "background-color": "rgba(0, 0, 0, 0)",
            "color": "rgb(0, 0, 0)"
          },
          "size": "@media (min-width: 576px)",
          "name": "base"
        }
      }
    }
  },
  "breakpointActive": "base",
  "breakpointActiveSize": "@media (min-width: 576px)"
}

19 hours ago, gmclelland said:

ploch, I wasn't clear on how the user gets to see the grid editor in your example video?  Do they click on a button to enter into the grid editor or does it take over the normal page editor somehow?

It's just the regular page editor. You can also combine my fieldtype with other fields on the same page. In my example I was using AdminThemeCanvas, maybe that was a little confusing, it will look more like the regular page edit screen with the default theme.

Hey folks!
Iam exited to finally show you a preview of my pagebuilder fieldtype I'm working on for quite some time now.
It's based on PageTable and takes a lot of inspiration from PageTableExtended.

@MadeMyDay Thanks for your work on PageTableExtended, it helped me a lot in figuring this out!

Let me know what you think

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.

Hey folks!
Iam exited to show you a preview of a pagebuilder fieldtype I'm working on for quite some time now.

Let me know what you think

PAGEGRID 1 released!

13 hours ago, teppo said:

On the other hand one thing that I do dislike about Admin Theme Uikit is the noise created by separator lines. And, as it happens, your theme suffers from exactly the same issue: to my eyes it's still way too noisy.

I agree! With my theme I removed some of those lines already (take a look at repeaters or fieldsets). But it's still not perfect and I will further investigate how to improve this.

13 hours ago, teppo said:

I agree with your point about that the admin should stay out of the way, and I do also share some of your concerns regarding current admin theme. But that being said, I must admit that I quite like the current colour theme: it's pleasant, professional, not at all childish (in my opinion), and brings just the right amount of personality to the theme. Also I personally find a black/gray/white colour theme rather boring — unopinionated for sure, but also boring.

I also don't think the current branding is childish and it doesn't have to be in black/gray/white either. The current color theme certainly helps to create a unique and recognisable brand, but can be distracting in an UI context. I think a unique branding could also be archived with a reduced color theme and the use of unique typography and the PW logo (on the PW website). I'm aware that it's easy enough to create a admin theme of my own, but my comment was more about the future branding of PW in general. I do think there are other more important thinks to pay attention to than this. And for me this is not really an issue (I created my own admin theme). But I think it will matter to those who are new to PW and see the PW website and backend for the first time, here the first impression matters. I even had some clients choosing another CMS because they feel that PW looks to "technical".

@ryan and others ?
Sorry I'm a little late to the party.
I just wanted to share my view as a designer on an update of the core default admin themes and future branding of pw in general.
This is just my opinion, and I'm aware that this can be a very subjective topic. I just want to contribute to the discussion.

I really like that PW gets out of the way when it comes to designing/developing a website. It's like an unopinionated frame around my projects. The branding of PW in contrast seems very loud, opinionated and not very serious. I would enjoy a more professional/reduced color scheme (black and white and maybe one additional color). I wish the default admin themes and UI would act more like a neutral frame/canvas for the content. The future will probably be more about frontend stuff that gets rendered inside the backend (pagebuilders for example), so it would have less of a conflict with the frontend (that might have a lot of colors). Also I would love to have a option for a fixed header that takes less vertical space. While I know that clients love to see their logo, I don't like the Idea to do a custom branding of the backend based on the CI of the client (the client CI, logo and colors might not be working in an UI context). Instead I would prefer a solid default UI that gets out of the way. 

Another area where the branding and use of color gets in the way is on the showcase page of the PW website.
The websites/projects presented here would benefit from a more neutral background (e.g. white, light grey, black). 
Imagine a museum where all the artwork from different artists and contexts, would be presented on a blue wall instead of a white wall.

I recently released my own admin theme, which follows some of the ideas mentioned here.
Maybe this can be an inspiration for a future default theme.

Please don't take this the wrong way. I really appreciate all the work that goes into PW and this amazing community!
I would love to know how others feel about this!

On 11/8/2020 at 1:59 PM, jploch said:

When using this great module with the delegate template approach (setting a new subfolder in field settings "Path to template").
Iam still getting warnings inside the backend, that the file doesn't exist. Everything else works as expected. Any ideas how to fix this or disable the warning?

Coming back to this, I found out that this is just affecting my local dev environment with laravel valet.
On a live server this is not an issue. So never mind ?

since updating to the latest version (v4.21.34) Iam getting this error on my frontend, when tracy is enabled (localhost environment):

TypeError: strpos() expects parameter 1 to be string, boolean given in /Users/janploch/sites/michael-bader/dist/site/modules/TracyDebugger/tracy-2.8.x/src/Tracy/Bar/assets/loader.phtml:17 Stack trace: #0 /Users/janploch/sites/michael-bader/dist/site/modules/TracyDebugger/tracy-2.8.x/src/Tracy/Bar/assets/loader.phtml(17): strpos(false, '?') #1 /Users/janploch/sites/michael-bader/dist/site/assets/cache/FileCompiler/site/modules/TracyDebugger/tracy-2.8.x/src/Tracy/Bar/Bar.php(114): require('/Users/janploch...') #2 /Users/janploch/sites/michael-bader/dist/site/assets/cache/FileCompiler/site/modules/TracyDebugger/tracy-2.8.x/src/Tracy/Debugger/Debugger.php(299): Tracy\Bar->render() #3 [internal function]: Tracy\Debugger::shutdownHandler() #4 {main} (stored in /Users/janploch/sites/michael-bader/dist/site/assets/logs/tracy/exception--2020-12-16--16-24--7e3166bc41.html)

@adrian  looks good! thanks for the update. Will implement a solution as soon as I find some time.

16 hours ago, adrian said:

I haven't tried this theme yet, but I am assuming the issue is that the save button is floating? Wouldn't that put it on top of input fields sometimes meaning that you need to scroll to see everything? Sorry if I am not picturing how it works.

Anyway, if that's the case and you are planning on keeping that behavior, then I can add a class to the body like you suggest - let me know. One thing to note of course is that Tracy can sometimes have many bars down there - sometimes, the regular, a couple of redirects, plus three ajax bars. The number of ajax bars is also configurable so someone could potentially choose to show more than that - I just wonder if this will make positioning tricky? 

@adrian the save button in this theme is actually at a fixed position in bottom right corner of the screen (the save button on the top is hidden). So tracy is overlapping the button when open. If you could set a class when tracy is open or enabled, I could position the button differently. The open panels seem to open with a margin to the bottom, so the button is still visible when a panel is open...

30 minutes ago, flydev ?? said:

About the Save button on the bottom right, if could TracyDebugger set a class on the body - 'has-tracy-on' - we could override the save button position only if TracyDebugger is present.

that would be a good solution.
maybe @adrian can implement this in tracy someday ?

4 minutes ago, flydev ?? said:

Thanks, can you force update the modules directory ? (I am lazy sorry)

done ?

@flydev ?? I just pushed an update. Can you try the latest version (0.12) and see if it fixes the issue?

@flydev ?? still can't reproduce this. The modules I tested so far seem to work. Where can I find this Profiler module you are talking about? Can you send me a classname or github link to a module with this bug?

40 minutes ago, flydev ?? said:

Yes thanks, and got his glitch too on ui-button :

I never used Padloper, so not sure what is causing this, but Iam happy to accept a pull request. Or you can post the css to fix this here and I will update as soon as I find some time.

22 hours ago, flydev ?? said:

Just a small issue with TracyDebugger installed. 

@flydev ?? you are right, I also noticed this. You can temporarily close tracy with the small arrow to make the save button visible again, but it's inconvinient. I might make the position of the save button configurable via the module settings. Since I also removed some of the save options (like save and next) for a simpler UI, this could also be an option. Not sure how others feel about the old save dropdown functionality, but I always felt it was to complicated and I never used it.

On 12/4/2020 at 11:30 PM, d'Hinnisdaël said:

Looks great! Thanks for releasing this as a public module.

Does this theme do away with all colors? How does it handle warnings and error states?

Thx! Warnings will display with a yellow (#ffe299) and errors wth a light red (#f8ada5) background

Thats a bummer. The changes to the orginal theme php files are minimal (2 files, and a few lines of code have actually changed), they enable me to change the main navigation into left and right with dopdown positions working (On the left the page related navigation and on the right the rest). The tree rendering in the page nav and all other changes are already done using jquery/js and css only (e.x. triggering the ajax button and moving the page tree inside the first level of the page navigation), Iam still using the same for each loops in php, the default theme is using.

With the dropdown problem solved (they need special classes to trigger javascript to set the positions) I think it would be possible to make this js/css only and just extend the original uikit theme like admin theme boss is doing it. But that would be a challenge

Edit: @adrian Does that mean you always stick with the default theme, because of potential compatibility issues? I'm just curious what the best practice is. I might go the route and make this js/css/less only and extent the original theme. But what would happen when Ryan applies changes to the original uikit theme php files, that could also break my theme. Having a copy of these files, at least makes sure my theme is not breaking when changes are applied to the original theme. These changes would have to be merged to my theme, but at least its still working. Also there is always the option to just change back to the original theme, when you are not happy with the features, with just a click on the admin profile page. So far I never had any compatibility issues with updating the core, thank to PWs well crafted architecture. But its a very valid point I want to make this as future proof as possible. My experience with PW is also that changes to the core admin themes are not that frequent, but of course it could happen.

On 11/23/2020 at 8:07 PM, adrian said:

@jploch - this really does look very nice - much cleaner and more professional. I really appreciate the hard work that's gone into it and I would love to use it, but unfortunately for me it always comes back to the fact that themes in PW tend to end up out of date when Ryan applies fixes and new features so I find it's just not worth the risk. Am I the only one that feels this way?

My theme is still extending the default admin theme and updating uikit is not a big deal, however changes to admin theme uikit php files would need to be done manually. I cloned the admin theme uikit to have more control of the markup. I plan to support this if people are interested, Iam using it for all my new sites. 

A version that extends the uikit theme like admin theme boss does would then rely on Javascript and CSS to manipulate the dom right? Using a hook could be an option. Maybe someone better with hooks could colaborate ?

Admin Theme Canvas

A minimal admin theme with optimised page editor UI, based on Uikit 3.
Currently this is close to stable, but users are advised to be cautious and test thoroughly.
This theme is tested in all major Browsers including IE 11, Edge (>85), Chrome (>85), Firefox (>81), Safari (>11).

If you find any bugs or have ideas for improvements, feel free to post your feedback.

Download from Github
Download from Modules Page

Features

• Minimal black and white admin theme
• Fixed masthead navigation
• Direct access to page tree navigation inside page dropdown
• Less distraction for editors (when editing a page, the tabs are displayed as a dropdown menu inside the main navigation)
• Options to customise the ui

Less distraction for editors

Direct access to page tree navigation inside dropdown

Page tree

Options to customise the ui

Login (inspired by AdminThemeBoss)

Requirements

Process Wire 3.0.100 or greater

Installation

1. Go to “Modules > Site > Add New“
2. Paste the Module Class Name “AdminThemeCanvas“ into the field “Add Module From Directory“
3. Click “Download And Install“
4. On the overview, click “Download And Install“ again…
5. On the following screen, click “Install Now“
6. Go to your user profile page and change the theme to Admin Theme Canvas