How the Block & Site Editor work in Greyd.Suite

Hi, this is Sandra from GREYD and today I’d like to give you an overview of the block and site editor in WordPress, show you some tips and tricks on how to quickly get to grips with full site editing and above all draw your attention to some special features in GREYD.SUITE. One thing in advance, currently more and more features are being brought into the site editor. Theoretically you could build your entire website there, but since there are still some details missing and for example you can only edit pages there, but no posts, I will still also show you the traditional way using the menu here on the left. So let’s just jump into it and open any sample page. You will directly see that the block editor works like a frontend editor, so the backend looks more or less like your page will look like in the frontend. You can directly edit content here, for example enter texts or also make elements bigger or smaller. And you will have a preview for three different screen sizes. The block editor also offers you different views, which you can change here at the top. By default you will most likely be in the full screen mode, where you won’t see the navigation bar on the left and top. You can always activate and deactivate that here. The spotlight mode highlights the block you are currently editing, which makes it really easy to navigate on your page. The top toolbar moves this toolbar, that’s usually pinned to your blocks, to the top. And there’s also a distraction free mode which is very handy when you just want to manage your content.

Up here you can also always switch between the visual editor and the code editor and you can also activate and deactivate your post and page settings with this icon here. So here on the right you will then always be able to switch between the page or post you’re currently working on and the block settings. The page settings include for example the URL, also the template that’s being used or the comments function. And the block settings always offer some general settings for each block and some design settings. GREYD.SUITE now comes with two very handy additional options, that you can find up here in the GREYD Editor Helper. Depending on where you are, you will find different options now for pages, for example you will see the Hover Helper that is here to make it even easier to navigate on your page. To show you how it works, I’m going to a page with a little more content. I’ve already activated both options here and as you can see the Hover Helper highlights blocks that are nested into each other, it makes spacings visible and it’s just there to make it even easier to navigate on your page. And for forms, Dynamic Templates, etc. there are additional options. One thing here, this is something that sometimes still happens with the block editor. It doesn’t have any implications on the frontend, but still you need to click away all these error messages individually. So we added a feature here in the Editor Helper to restore all blocks on a page or form automatically. But what I wanted to show you now is the customize preview option, available in forms, templates, etc. Those elements usually are not displayed on the full page width and also they might be on a colored background that you can’t see in the preview. So what we offer here is, you can add a background to your preview page and you can also adjust the width to see your form exactly as it will later look like on your page. This has no implications at all on the frontend, it’s just here to make life easier for you.

So how can you now add blocks to your page? Well, there are different possibilities. For example just hover and use the plus and then search for the right block. Often, for example at the end of the page, you will also find a plus like that. You can also just hit enter and with slash start to search for the right block. Or just click on the plus here. Here you will find all available blocks by categories, for example here you have all GREYD blocks. With this plus you can also insert patterns, which are different types of templates. We’ll have a look at that later. And you will also be able to insert media, for example the images of your own library, but also from the WordPress open verse. And you can also just drag and drop the elements to insert them.

So, how can you now find your way around in the editor, which can be a little bit tricky, especially at the beginning. There are again different possibilities. For once, when you click in a block, you will not only find the settings for this certain block, but also here on the left you have the possibility to jump to the parent element, for example this paragraph lies in a quote, which lies in a column, etc. Very handy in my opinion is also this breadcrumb navigation down here, which enables you to quickly jump to the right element. If you don’t see the breadcrumb navigation here, have a look at the settings here on the right, where you can not only activate and deactivate the breadcrumb navigation, but also for example different views and features. And you could for example also hide certain blocks that you don’t want to use and features like that. Here, by the way you will also find a very handy feature to copy all blocks of this website or this page to use it for example on another page.

Okay, now back to page editing. A very, very handy feature is also the list view, which you will find here. Here you will find all blocks on your website and can also see which elements are nested into each other. If you have a lot of blocks nested into each other, we have added a very handy feature with which you can make this list view larger. Here you can also just drag and drop elements, you could also delete them, copy or group elements, you can lock blocks so that other editors won’t be able to move or delete them. So, a lot of very handy features here. Also, special blocks, for example reusable patterns are marked as such and also you will see your HTML anchors, that you can insert for any block or group in the advanced settings here. And you can also use them not just for anchor links, but also to make it easier to navigate on your page. The list view also offers you a very handy outline, for example with word and character counts, time to read and for SEO also very important the H-tag structure of your website.

So now let’s have a look at the individual block settings. We’ve already talked about this toolbar here, which generally offers you some block settings, but you can also use that to drag and drop elements, you could also use the arrows to move elements up or down. Here on the left you will also see which type of block you’re currently editing and can transform to other types of blocks. Then we have the width, which you can select. Which content width you’d like to use, the standard, wide width or full width. You can set the default settings for that in the site editor. And here under the three dots you will find some standard options like copy blocks, add blocks before or after that, again the lock function, etc. And you can also always mark several blocks and group them or also turn it into stack or row. These are just three different layout features with which you can group several blocks to edit them at once.

So now let’s have a look at some general settings and activate the block settings here on the right. When it comes to spacings for example, you will very often see these presets here. These are very handy. You can set the default values for these presets in the site editor, but of course instead of going with these presets you can always click here to enter custom values. To enter values you can just type in any number or there’s also a small slider hidden here and with shift you can also jump in steps of tens. Most often you can select between different entities here and when it comes to sizes with four different sides, for example paddings, margins or something like that, you can also click here to unlink the sides and enter individual values for each side.

So now one information on a special feature added by GREYD. When it comes to sizes and margins and spacings, you will often find the possibility with GREYD to edit the values for different screen sizes and make your website responsive very easily. For example here you can just enter a number for all breakpoints or you could have individual values for individual screen sizes. Additionally to that we have added a lot of features like Dynamic Tags, animations, the trigger picker which you will be able to find in a lot of blocks since we have integrated them into the native features of the block editor. Other than that we stick as much as possible to the core, which makes it possible for you to combine GREYD.SUITE with other block-based tools or also to use the GREYD.SUITE features in a non-GREYD.SUITE block theme for example. So, there are just very few situations where we create custom blocks, for example if there just is no native block or if the native blocks can’t be extended meaningfully. That’s why you will find for example individual GREYD.Buttons or list blocks.

We’ve pretty much done the same in the site editor, which is where you define the global styles for your website as well as templates and template parts. Templates define how for example the front page or regular pages look like, but also for example the 404 page, archive pages, the single template defines how post pages look like, etc. Template parts are as the name already indicates parts of these templates, so mainly the header and footer. In GREYD.SUITE you will now not only find the regular global styles to define for example typography and colors globally for your entire website, but you will also find the GREYD styles with a lot of additional options, for example to create different button variants globally for your entire website, also to define globally how input fields should look like, etc. And here under spacing you will also be able to define the presets that we just talked about, that are used in many blocks for spaces, margins, paddings, etc. individually and completely flexible. Other than that in the native global styles under layout, you can also define the content width default values. We’ve also talked about that earlier. Here you can define the content width, which is the default, and also the wide width. Up here under style book you will also get a preview of all your blocks with your global styles.

Finally a word on the difference on patterns, synced patterns and GREYD.SUITE Dynamic Templates, which are three different features that kind of seem similar, but do have significant differences. Whenever there’s a block or a group of blocks that you want to make reusable, you can turn that into a pattern and have the option to sync that pattern or not. Patterns that are not synced are completely static, for example you will also find that kind of patterns in most themes from the theme author. You can insert them as often as you like, edit them, change the content, etc. but the pattern itself will always stay the same, that one is not changeable. Different to that a synced pattern that when you click this option here, syncs the content. So when I have a synced pattern and I change for example this, then this will have an impact everywhere where the pattern is used. So the content is always the same. In that sense, these kind of synced patterns are also completely static. And this is where GREYD.SUITE’s Dynamic Templates come into place, because these templates are fully dynamic. You can use the same template with different content at different places of your website and even across installations, across websites, as design and content are completely separated. And the same template can even look different, but will still be the same basic template. There’s a dedicated tutorial on that. I won’t go much into the details now, I just want to highlight the difference to WordPress patterns, because here in Dynamic Templates I can define each and every element and say, do I want this to be static, should the text here always say “dynamic template” or do I want it to be dynamic and have the content editor change the headline whenever the template is used. So much on that difference.

In the GREYD.SUITE menu on the left under “templates” you will not only be able to access your GREYD.SUITE Dynamic Templates, but you will also find the link here to get to the WordPress default templates, like blog template, template parts, headers, footers and also patterns from here.

For more videos and information please visit our Helpcenter.