Core updates and Uikit admin theme additions

ProcessWire 3.0.56

Download ProcessWire 3.0.56 at GitHub
(March 17, 2017)

Core updates

This week we have a new version of ProcessWire on the dev branch that contains several additions and fixes. Here are a few highlights:

  • Updates to the way multi-language support handles locales on the front-end, plus the addition of $languages->setLocale() and $languages->getLocale() methods.

  • Code updates to ProcessPageList and a solution for the page editor breadcrumb trail that sometimes didn't go where expected.

  • Updates to markup regions support, with the biggest being the addition of <region> or [alias] <pw-region> tags. When used, they are removed from the final markup automatically, making them a handy addition for some cases. They can be used to define region placeholders, populate existing regions, or both.

Uikit admin theme updates

Work on the Uikit admin theme continues this week with the addition of sidebar support. For those that prefer most of the navigation to be in the sidebar rather than the masthead, you can now enable it as the default setting in the module configuration. You can also enable (or disable) it as a toggle in the user navigation.

The sidebars added this week are different from the offcanvas sidebar you may have seen in previous posts. Technically the navigation sidebar looks identical, but it's completely different in terms of how it works. I felt that sidebar navigation is more useful if it stays in the same place across page edits and other actions. To see what I mean, check out the screencast video below:

Something you'll also notice in that screencast is that there are actually two sidebars that can be revealed or hidden. These include the navigation sidebar and the page tree sidebar. By default, the navigation sidebar is visible, and the page tree sidebar is collapsed. Toggles can open or collapse either sidebar, and both are resizable. Notice that whatever you click in the sidebars loads in the main editor area, but the sidebars remain as they are. Meaning, you'll never lose your spot. Hopefully this will be a handy addition for many.

If you'd like to take it for a spin, this version of the Uikit admin theme can be downloaded from the GitHub repo now, and you'll want to make sure you are running the latest core dev version as well (3.0.56).

Live demo

You can also try out this update on our Regular demo site. Use the admin login with username bloguser and password processwire3. Though before you go there, read the instructions below.

We don't have the sidebars enabled by default at present, so after logging in, hover the "bloguser" user menu and click the "Enable sidebars" link. After doing that you'll see the navigation sidebar appear on the left.

To enable the page tree sidebar, click the toggle that appears on the right side of the screen OR hover the "bloguser" user menu again and click "tree toggle". Please note that I've not yet tested out these admin theme updates in anything but Chrome so far, but let me know if you run into any trouble using it. If you've logged into this demo before, you may need to clear your browser cache (or use incognito mode) to ensure older assets aren't getting loaded.

That's it for this week. Have a great weekend and enjoy March 18 edition of the ProcessWire Weekly at weekly.pw.

Comments

  • adrian

    adrian

    • 4 years ago
    • 90
    I absolutely love the new page tree sidebar - so clean!

    One suggestion - I'd really like to see the top menu also visible when using the page tree sidebar. That would be the perfect combination in my mind.

    Another suggestion would be to make it possible to have the page tree sidebar on the left.

    Really awesome stuff Ryan!

    • ryan

      ryan

      • 4 years ago
      • 61
      Glad you like it Adrian. I think everything you mentioned will be possible here. In addition to that, the page tree also works as an element that pulls up from the top or bottom of the screen, though so far I prefer it as a sidebar. I was thinking in the module configuration that there would be a few different layout options you could configure, one of them being as you mentioned (topnav with page tree left sidebar).
  • adrian

    adrian

    • 4 years ago
    • 10
    I just added some spaces to the HTML tags so it's easily readable.
  • adrian

    adrian

    • 4 years ago
    • 40
    Sorry, another suggestion - have you thought about revisiting the full line hover for displaying the page action buttons (rather than having to mouseover the title, then move to the require action)? This option is in @tpr's AdminOnSteroids and it's such a nice tweak. I know you weren't keen on it originally, but I find it such a nice UI improvement - surely I am not the only one :)
    • ryan

      ryan

      • 4 years ago
      • 40
      Well I wasn't wild about the way I got it working because the action links were appearing most often when it wasn't my intention, but maybe @tpr got it working better than I did – I'll check it out.
  • Joel

    Joel

    • 4 years ago
    • 10
    thanks for the adding !!!! great solution to my use case
    • Joel

      Joel

      • 4 years ago
      • 20
      was trying to thank you for the new region element (forgot html gets stripped in comments)
  • Mike Rockett

    Mike Rockett

    • 4 years ago
    • 30
    I really like the new approaches being taken here - big steps for ProcessWire. However, the first thing I noticed was the fact that I can easily have three page trees in a single view, using the left sidebar, the root admin page, and the right sidebar. I get how the additional access-points to the page tree are useful, but perhaps they should only become accessible as and when needed? So when on the root admin page, I should not be able to access the sidebar page trees. Though, I'm sure you're already aware of this and have a plan in motion... Just pointing it out because of how it jumped at me.

    I also think the left sidebar should not be able to grow in size more than it needs to. Not sure what thresholds should be put in place, also giving consideration to mobile behaviour, but maybe 50% of the page width should be the limit.

    From the Chrome side of things, all looks good here, except for the fact that "Uncaught TypeError: Cannot read property '_wrapper' of undefined" is thrown when clicking on an item in the left sidebar.

    • Mike Rockett

      Mike Rockett

      • 4 years ago
      • 00
      Copied this here for discussion: https://processwire.com/talk/topic/15839-pw-3056-core-updates-uikit-admin-theme-updates/?do=findComment&comment=141393
  • ukyo

    ukyo

    • 4 years ago
    • 00
    Nice work !

    But, I love w2ui in layout concept. http://w2ui.com/web/demo

  • Adrian Jones

    Adrian Jones

    • 4 years ago
    • 10
    Milenko - I am not sure that there is a UiKit site profile. It's just a module that gets installed like any other. Download the zip (https://github.com/ryancramerdesign/AdminThemeUikit/archive/master.zip) and install it as normal. Then select the admin theme from your profile.
  • Mikel

    Mikel

    • 4 years ago
    • 10
    Hi, Ryan, love the sidebars! Very efficient while editing!
    As I am testing a lot on mobile devices, here are my findings so far:
    1. sidebar on mobile needs some kind of close button, otherwise you are forced to click a menu item to close it.
    2. I don't know if this is an apple related bug, but on all my devices (mobile as well as desktop) the "save and keep unpublished" button after page creation is floated the wrong way...
    More to come ;-)
  • Alex

    Alex

    • 4 years ago
    • 10
    That error is usally because your PHP version is 5.3 or lower. Are you able to upgrade?
  • Yannick Albert

    Yannick Albert

    • 4 years ago
    • 00
    Thanks for introducing the new tags. Nice addition. I see myself echoing some file contents directly into somewhere ;) However, i'm not sure if prefixed attributes are required here, at least on prefixed tags. ;)
  • Adrian Jones

    Adrian Jones

    • 4 years ago
    • 00
    Put this in your config.php

    $config->defaultAdminTheme = 'AdminThemeUikit';

    PS - sorry for the incorrect info on the bug you were seeing. It looks like this theme required PHP 5.4 - maybe Ryan is planning on making PW require it as well sometime soon?

  • Online

    Online

    • 4 years ago
    • 00
    Absolutely wonderful ???? I love the sidebar approach, I was wondering if there any way to "RTL" the admin interface?
  • Yannick Albert

    Yannick Albert

    • 4 years ago
    • 10
    _init.php
    < pw-region pw-replace="content" >
    …will replace #content…
    < /pw-region >

    home.php
    < div id="content" >< /div >

    Code parts are converted to base64, because this comment form sucks. Sorry Ryan!

    • AndZyk

      AndZyk

      • 4 years ago
      • 20
      UIkit has RTL support: https://getuikit.com/docs/rtl. I guess, you should be able to customize the theme yourself. ;-)
    • MilenKo

      MilenKo

      • 4 years ago
      • 00
      Hello all. I am trying to setup PW 3.0.56 with Regular profile to check the new functionality and UiKit implementation however after selecting the UiKit profile and install I get an error:
      Parse error: syntax error, unexpected '[' in C:\OpenServer\domains\regular.pw\site\templates\_main.php on line 38

      Inside the admin I still see the default admin so it looks like I am missing a step to setup the UiKit properly.

      The line 38 contains:

      • MilenKo

        MilenKo

        • 4 years ago
        • 00
        Adrian, I am talking about Regular-Master Blog profile which in the profile info is saying: Uikit 3 site/blog profile

        So I installed it following the steps and it all worked but afte that pointing to my new site give an error:

        Parse Error: syntax error, unexpected '[' (line 38 of C:\OpenServer\domains\regular.pw\site\templates\_main.php)

      • MilenKo

        MilenKo

        • 4 years ago
        • 00
        Sorry, my bad. As soon as i changed the settings of my server to use Apache 2.4 and PHP 5.5 x64, it all started working fine. Now I only need to figure out how to set AdminThemeUikit to be default but not the original admin I have right now. Funny enough the theme had an option to replace PW login screen but I just cant find where to switch to the admin too.
        • MilenKo

          MilenKo

          • 4 years ago
          • 00
          Thank you Adrian. To be honest, I remembered that besides the Uikit it was mentioned to have php 5.4 but I thought that I already switched to it. Anyway, if somebody else wants to try the profile now and steps in my shoes, would know how to get away with it and enjoy the profile.
        • MilenKo

          MilenKo

          • 4 years ago
          • 00
          Thank you Adrian. To be honest, I remembered that besides the Uikit it was mentioned to have php 5.4 but I thought that I already switched to it. Anyway, if somebody else wants to try the profile now and steps in my shoes, would know how to get away with it and enjoy the profile.
        • Torsten

          Torsten

          • 4 years ago
          • 00
          @ryan
          Thanks for all your work on ProcessWire!

          Is there any documentation on the region feature, especially the new features you mentioned here?

          Thanks!

           

          PrevProcessWire 3.0.55 core updates

          5

          This week we’ve got a new core version on the dev branch (3.0.55). This version has a whole bunch of fixes and adjustments. It also adds a new drop-down page tree that we cover in more detail in this blog post. More 

          Twitter updates

          • ProcessWire 3.0.168 core updates — More
            26 October 2020
          • This week a 2nd new module for processing Stripe payments has been added to FormBuilder. Unlike our other Stripe Inputfield, this new one supports 3D Secure (SCA) payments. We’ll take a closer look at it in this post, plus a live demo— More
            16 October 2020
          • Quick weekly update covering this week's commits for the upcoming 3.0.167 ProcessWire core version— More
            18 September 2020

          Latest news

          • ProcessWire Weekly #337
            In the 337th issue of ProcessWire Weekly we're going to introduce a couple of brand new third party modules, take a closer look at the latest core updates, and more. Read on!
            Weekly.pw / 24 October 2020
          • Stripe Payment Processor for FormBuilder
            This week a second new module for processing Stripe payments has been added to FormBuilder. We’ll take a closer look at it in this blog post, plus we’ve got a demo of it here too.
            Blog / 16 October 2020
          • Subscribe to weekly ProcessWire news

          “Yesterday I sent the client a short documentation for their ProcessWire-powered website. Today all features already used with no questions. #cmsdoneright—Marc Hinse, Web designer/developer