Cwicly Gutenberg Toolkit: A New Full Site Editing Solution

hi this is david mccann for web tng in this video i'm looking at a new gutenberg solution called quickly this is a kit that includes a block-based theme a gutenberg blocks add-on and advanced custom fields pro you can use acf pro along with cpt ui to create your custom post types and custom fields and then use the quickly theme and plugin to create the theme templates quickly is new and it's not a good fit for all situations or types of sites but i think that we'll be seeing more solutions like this now that gutenberg full site editing is a thing quickly is a premium only solution it's available from their website it's got several components there's a pretty extensive design library and it lets you work with dynamic content and dynamic data includes acf pro it has some global style options comes with some custom fonts and icons css grid and flexbox controls and animations this is the regular pricing it's available for one three and a thousand websites on an annual subscription currently while making this video the quickly gutenberg toolkit is available on appsumo so there is a lifetime option for a limited time there's pretty extensive documentation which is helpful for getting started but there are some kind of complex parts of quickly and so you may have questions about how to do certain things even after reading the documentation the good news is i have had interactions with the support team and they're very responsive and helpful so that's a plus okay so now let's go take a look at the test website i have set up so here's our test site i've got the 2021 theme here okay let's go and take a look at what i've got installed i have quickly the plugin and gutenberg installed but they're not activated and then for themes i have the quickly theme here but not activated and i've done that on purpose because i just want to kind of show you if you activate quickly the plugin by itself you get a note that things might not work right because it's designed to work with the theme and there are actually no settings available okay so gonna have to activate the theme as well and that notice goes away and we get a menu item here for advanced custom fields and then we get a menu item for quickly down here that's why we need to have both the theme and the plugin right now it requires gutenberg because we're going to be doing full site editing and at some point the plugin version of gutenberg won't be needed all right so let's go look at those settings there's not a ton of them here's the license you can see i've already entered that they have icon collections there's font awesome phosphor lite regular and duotone or you could load your own you could load a custom font set add your google maps key you can add custom code here if you want you can head body start or body end and [Music] then there's an advanced setting to turn off ssl verify and the note says that you might need this on localhost and then there's a link here to send a help request or a link to the documentation okay so that's what we have outside of the editor let's actually go take a look at what we get in the editor kind of a tour okay so first thing is we have some blocks these are from the plugin we have quickly columns quickly section heading paragraph image button icon video list slider gallery modal menu div maps query post content and repeater so the query this is where you create your kind of post list archive type of layouts and it's kind of i guess like the core query loop block and then the repeater is made to work with acf repeater and many of the blocks have this database icon here and you can see that you can access either wordpress data or acf fields and with wordpress you have the post fields you have the archive fields the site fields author fields and current user okay so that's pretty good list of places where you can pull in some dynamic data and then if we look over at the block options here we have the responsive toggles for styling the different screen sizes there is a drop down here to select for pseudo classes if you're doing hover effects or whatnot then there are two tabs there's a tab for primary and for advanced my understanding is that pretty much all the settings under the primary tab are also found under advanced but they pulled out the most common ones okay so there's the option to give every block its own id and class name and you can customize this if you want to name them then this is a list of other classes on the that have been defined random generated name isn't very helpful so i think if you want to reuse it you should probably name it to help yourself out then this is a very interesting feature it's conditional display you have hide block for logged in users or hide for guests for non logged in but then there's also the option for other conditions so by author name acf field cookie value date day of the week day the month time short code return value the post fields values and the user values okay so that's a pretty good set of fields that you can use for conditional display so that's a pretty advanced feature that's nice to have you know you can choose the tag you can you know you have text link background set the font topography options alignment options that's kind of standard stuff but then all of the blocks have this i think they all have the same set of advanced features so you have background options topography options container layout container sizing margin and padding borders separators animations effects transforms custom css custom pseudo classes attributes and relative styling okay so we're going to look at some of these when we make templates i just want to show you what the range of options are here all right so now i'm going to remove this up here we have the library of pre-designed elements 469 currently so that's a pretty good number there are different categories here and the first time i looked at this i saw there was a footer but there was no header listed but it turns out that's actually navigation is the header so just so you know that and so you have sections layouts themes and elements and so the elements are kind of smaller unit i guess but let's look at one of the themes here like if you preview this you'll see that the theme is made up of these different parts and these then probably break down into the long list over here you can find sections that have similar or coordinated designs colors and designs all right so this is predesigned and we'll actually use this one little thing i noticed is that there's no x out of here you just click there to close it okay so that's the library then we continue over this way these are the global style options and so it looks like you can define three different style sets they've got it broken down into global design and global theming under global design you have colors and you can define your color palettes and add colors and then there's global topography which this is the heading and the paragraph settings you can add your own here i believe that these trickle down or inherit down to here because this is where you can customize the color by the different elements and then there's a theme settings where you can set the page background and you can customize breakpoints so that's nice and then you can export your settings if you want to use them on another site there's this my collection let's just add that heading back in you'll note that on all of the kind of quickly blocks there's this little disk icon what that does is it adds it to your collection here so it's kind of like your favorites list and then the last thing on here is there's a navigator here which is kind of similar to the built-in one in gutenberg i think gutenberg just got the ability recently to do drag and drop so they may have had that there for for that so okay so that's kind of the tour here of the editor window so now i just want to go to the front of the site to see what the quickly theme looks like surprise it's kind of like oxygen you have to make your own templates here and the idea is that you design it the way you want we can use those pre-designed elements those blocks and sections as a head start so what we need to do now is to create our templates for the header footer and the content areas so i'm going to go here to appearance and these extra menu items here don't appear unless you activate the gutenberg plugin this is part of full site editing we're going to go in and if you haven't seen full site editing before we'll get a taste of that before we do that i know we're going to need a menu so let's create a menu here first i may have created this already i think let's see yeah so i created this already all right so we've got a menu and now let's go to the editor when the template editor opens you notice it says index we're editing the index template which is a required template by wordpress i think it's the fallback a little bit weird i don't think this is a quickly thing this is just the way full site editing is at the moment is to get to the menu of templates to edit you actually have to click the w to go back and then you click to go back again and then again to get to the admin so that's a little clunky uh gutenberg right now they'll probably refine that but you see here we are editing the index and there's category index 404 single post the templates that come here kind of predefined they're blank their starting point but what we want now is we want to go into the header and here we have our blank header and the ideal world what we want to do is we want to use one of these pre-designed headers so let's try this one and one thing you notice it was imported here but this didn't close or there was no notice that imported or anything so just be aware you don't like click it again thinking nothing happened and then here we have our redesigned header this is the regular header this is i guess a off screen you know slide in navigation here are menus but this is i think a placeholder and so we'll need to go and choose our menu so i wanted to make sure we had one defined same here there's one more thing that we need to do and this is the mobile menu trigger i kind of found this out by trying it out and support gave me a tip here on what i need to do so what happens is when it's imported i guess the ids change wordpress assigns an id to this and so we need to give it the trigger the right id for the panel okay so let's see i think we need the id of the modal so that would be this i'm guessing and then on the button we here's the link we need to add that id in here we go block id so let's now save this and it's not going to show up yet we have to add the header into a template first so let's go back to that index template and now we'll add the template part and we can choose an existing one and we'll choose that one this is our index page i asked the support about this they've been very responsive when you're editing the header it makes sense to see the mobile menu panel here but when we're editing other pages this really gets in the way so after we test it i might remove this other part but i think they're going to look at a way maybe to hide this when you're not editing the header i'm not sure so we've added this into our index i'm going to save it now and let's go out and look at the front end there's our header so that was pretty easy to achieve moment of truth so that works that's the header done and let's go and do the same thing now for the footer go back go to template parts go to footer and let's see if we can find the same kind of theme set footer so we're looking for orange here's one okay so this is pretty big i don't really need that huge for this demo and this has a lot of margin here so let's adjust that and we'll make it 30 at the top and 30 at the bottom good let's go back to our index and let's go to the bottom now and let's add a template part and [Music] we're going to choose footer okay so we have that there we'll go ahead and add some content now one thing notice i don't get a little plus sign in the middle here which is a little hard to work within so i'm gonna go to the bottom and the quickly sections my experience with that you know in the documentation says that you use them kind of as containers when you want to center the content so we have kind of the full width but we want the content kind of constrained or contained in the middle so we'll add the section and then you notice there's no plus sign inside of this when you see these this little stack here this is how you add a block so we'll go and we'll add the post content block and there's a core block i think it works the same but with the quickly version we get this nice number of styling options that you don't get with the core block now let's go back to the section and see if we can do a sneak thing here and move it up and save and the moment of truth now is what do we have on the front end all right so here we go i think this is actually the content from our post archive so i don't know if that's going to show there yeah so there's the content of the sample page i think you probably recognize that we could add the page title here and whatnot but i wanted to show you this basic getting started how to use the template feature of full site editing for the next step i want to create custom post type i'll install cpt ui custom post type ui which is a free plugin and then i'll use this advanced custom field plugin that comes with quickly to add some fields to that and i'll enter some records and then we'll make the templates to display those so i have a couple of videos on how to do that one how to do it with advanced custom fields so i'm not going to show on the screen that whole process again but i'll have a link in the text version on the web tng website you can find that walkthrough and video if you're unfamiliar with creating custom post types so i'm going to pause the video and create the custom post type and some records okay so what i've done is i installed cpt ui and i created a post type called books and then i also created a taxonomy called genres and so here you see books and you see genres and then in advanced custom fields i created a field group called book fields i added an image field called author's photo and one of the items in the documentation for quickly is for acf to you have it returned the image url and then i create another field which is a url field for author's website okay and so i entered some book records we have five book records here we see that here's the featured image here's the genre here's the author's photo and here's the link to the author's website you notice there's one issue here these are actually several paragraphs and this is what it looks like in the editor on another site okay and so i asked support about this and i guess they had thought that they wanted you to be able to control this yourself and not have to take what the default gutenberg gave you but in terms of paragraphs you know we need to be able to add the margins to them and when you enter a regular default gutenberg paragraph you know you don't really get any options for margin and padding so if you add the quickly paragraph you do have margin and padding options a nice thing about the quickly paragraph is you do have these extra styling options and you have access to dynamic data but just for regular writing people aren't going to probably pick that block they're just going to use the default paragraph so that's kind of an issue and they said that they're working on a solution for that now if we go to the editor and we look at the templates you see we don't have the template for the book single or the book archive if you look under general templates you do see one there's archive book and single book now these obviously didn't come with gutenberg or with quickly the way to get a template assigned automatically is wordpress has from back in the php days this notion of template hierarchy and there's this chart that shows you know for single page so for a custom post name the template single dash post type which is in this case a single dash book and for the archive name it archive dash post type or archive dash book well the gutenberg full site editor works the same way except that you put in html files and the 404 category index and single came with quickly the quickly theme you notice they're 0k they're just blank but that's a placeholder to have it show up in the full site editor and so i added the archive book html and the single book html okay so that's where those came from before i create these i'm going to go to the header and i'm going to get rid of this section here for the mobile part because that's just gonna kind of get in the way as we're working okay so i'm gonna save that all right so now let's go back and go to our template and go to our general templates to single book and the first thing we'll do is we'll enter the header add the header okay and then we're going to add a theme part for the footer so now i'm going to add quickly section and i'm going to move that in between okay we have our section here we add these things in using this button here so for the single i'm going to add two columns when you add the columns it gives you three by default and then there are some column controls here i think what we need to do is remove a column so now we have two and then use this edit grid layout option [Music] you can adjust the width of these i guess to let's get like that okay so i guess that's 25 or 20 percent here now and 80 there so anyway that's how you do that here we've got our two columns and in this one see we don't have a plus sign here so we use this ad block option we'll add a quickly image we don't have you know the database icon here it's over here for the image so we'll pick the source as wordpress data featured image and then we'll set the height and width manually let's see the height i think is like 200 and the width is something like 170. if i've got that right and then so this is on percent let's change that to pixel okay there we go okay so now on this side i'll add the heading and this will be [Music] the post title and then i'll choose the column again and now i'll add the post content and you see it's not stacking it's going horizontal and so with that column selected we can go to the flexbox controls whoops i think i want that there we go there's our post title let's give that a bit of margin at the bottom and then below the image here in the column let's add another image field let's go to our container layout whoops let's go to the column sorry let's have these stack and this image is going to i have the acf author's photo and we'll set the height and width of that to 100 pixels by 100 pixels and we'll center those let's see i guess this image we can give it some margin at the bottom if this is working correctly we have our featured image our post title the post content and the acf image so let's save this and let's go to the front end and take a look all right looks like i need to adjust the size of the featured image there so i'm going to clone the tab and go do that general template single book okay here we'll make this say wide and let's refresh this here's kind of the idea with the single for the custom post type now let's go in the editor and let's take a look at a archive for the books we're going to do the same thing again in adding the header and adding the footer and then adding a section and putting it in between i think rather than create this manually i'm going to see if they have a blog layout that maybe will work let's see what we can find let's try this one okay so i'm going to change the color of the text there and we'll change the heading to say book reviews and then it says no results found this is let's see i think we need yeah here's the query and there's this option to inherit from url so that it knows that it's a book then it'll pick up the book records so here are these let's see if we can adjust the featured image here it's not in as an image it's a background so that's kind of interesting background yep here it is okay and let's set the size to manual and we'll say wide like 200 high 300 and then no repeat is that about right i think maybe we make the width maybe make it 280. there we go so let's save this and basically you know what it's done here is it added the query here and then a query template and it has a div and this is the div with the image and this is the div with the post meta information in the title let's see if we can make it three columns edit the grid all right that looks a little nicer and then on the query section i think i only have five books defined but let's save that and go now to the front end and that's what it looks like i think you get the idea of full site editing and how to use the quickly gutenberg kit with it we've done the kind of overview look at what quickly is and the kind of walkthrough of using it with a full site editor so now let's have some discussion and conclusions the full site editor works though there were some rough edges hopefully these will be smoothed out with wordpress 5 9 and subsequent releases i imagine we'll be seeing a lot of the full site editor in the future especially when this functionality is merged into core we will also see a number of third parties offering solutions similar to quickly's gutenberg kit i give quickly credit for getting out there early when you're breaking new ground and the path is not very well traveled i think the idea with a quickly theme is it's supposed to be a blank slate and i think it serves that purpose well the quickly blocks were generally improvements over the core blocks offering conditional display options access to dynamic data and a uniform set of layout and styling options there were some glitches but remember that quickly as new as far as i can tell it just launched several weeks ago the developer was friendly and responsive so i hope to see these issues addressed quickly the icing on the quickly cake is the inclusion of acf pro which combined with the dynamic data features makes quickly an interesting solution for professionals it didn't seem to me that full site editing was ready yet as an alternative to the pro versions of theme builders they just have a lot more features and are a lot more easier to use however full site editing could be getting to the point where do-it-yourself site owners could use it i know that some people are excited about full site editing while others are definitely not interested what i see with quickly and other solutions on the horizon is that we'll have a lot more choices and i think that's a good thing so that's the walkthrough and review of the quickly gutenberg kit there's a text summary available on the web tng website along with other walkthroughs reviews and resources i hope you found the video interesting thank you for watching

Channel: David McCan

Views: 1,584

Keywords: gutenberg wordpress, full site editing, cwicly gutenberg toolkit, custom post type templates, webtng

Id: okaPHwlYGno

Length: 31min 0sec (1860 seconds)

Published: Mon Nov 22 2021