jploch

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)" }

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

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!

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.

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!

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.

@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...

that would be a good solution. maybe @adrian can implement this in tracy someday ? 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?

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.

@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.

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.

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 Go to “Modules > Site > Add New“ Paste the Module Class Name “AdminThemeCanvas“ into the field “Add Module From Directory“ Click “Download And Install“ On the overview, click “Download And Install“ again… On the following screen, click “Install Now“ Go to your user profile page and change the theme to Admin Theme Canvas

Hey! 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? TemplateFile: Filename doesn't exist: /Users/janploch/sites/michael-bader/dist/site/templates/block_icon.php Putting this inside every template file from my subfolder, works but I would like to avoid that: $page->template->filename = $config->paths->templates . "blocks/" .$page->template->name. ".php";