![]() ![]() And then all you have to do is put the URL into the embed field. In that case, just click on the plus, and scroll down under embeds and choose Vimeo or YouTube, whichever one you'd like. Now, if Vimeo is not here, it's because it's not one of your most used blocks. I'm going to click the slash again and select Vimeo. All right, let's head down and let's embed a video. ![]() If I click to the right of the button to bring up what's called the bounding box, well, then there's my alignment right there, and I can click center. I click on the button itself, but nothing there is there to help. And this is one of those little things that's by no means obvious. And finally, depending on what I've selected, there are formatting buttons up here at the top. And if we click on the navigation, we can quickly navigate to an individual block, which is really helpful if this becomes a long page. You'll also see up at the top here, if we click on information, it gives us information about the document so far. So if I click on buttons, or cover, it's going to select the individual element within the block. You'll also notice down here at the bottom, we've got a bit of a breadcrumb. We're going to leave all the settings at the default here for now, and we'll come back and look at the settings in an upcoming video. And of course, I can set them up any way I want. And you'll note here on the right with each element that I add, the settings for the block pop up here. If I hit the slash key, I can add an image overtop, even. And of course because it's a cover, I can add other elements as well. And because this is a cover, well, I can add some text over top of it. This is the screenshot from our OSTips series. So let's go ahead and grab a cover, and we'll upload a file. I can also type a slash in order to get a quick list of the most common blocks that I use. Now, when I hit enter, it's going to go to the next block, and I can click the plus symbol. So with that introduction, let's just, again, create a simple page. And we selected the recent content block as an example. And then of course, as I mentioned in the introduction, Gutenberg supports the Drupal block system. We can embed Vimeo, YouTube, Facebook, Instagram, Twitter, or any manual embed we want. Under formatting, we can do pre-formatted code, custom HTML, a pullquote, a table, a verse, buttons, columns, groups, media and text layout, separators, spacers, and even add some navigation. Under common block, we've got paragraph heading, cover, image, gallery, list, quote, audio file, video. And of course, I can edit this block, or I can completely delete it just by selecting it and pressing the delete key. ![]() And you'll notice that the sample block inserted the Gutenberg icon. I have to give the node a title, of course. To test it, just fill in the, quote, "fields" on the left and save. This is going to let us know this is Gutenberg's example block. All right, scroll back up to the top, and go ahead and click on Gutenberg Example Block. ![]() And then finally, whatever Drupal blocks you've enabled. And again, this is just what it sounds like. If you install the example block, you'll see examples is next. And this will change depending on your usage of all of the blocks. When you click the plus symbol, you're presented with a number of different sections of blocks that you can add. Look at the keyboard shortcuts, the Welcome guide or the help, and of course, save and preview. I can manage the blocks, manage all reusable blocks. I have the top toolbar view, spotlight mode, full screen mode, visual editor, or code editor. And I can even see the settings for this individual node right here, by clicking on the three dots. I can hide the document and block settings by clicking on the gear. In other words, skip down to different blocks. Undo, redo, get information about the content structure, and navigate the blocks. I can see the tools to edit or select a different block. When you create a new node using Gutenberg, you still have your document settings here on the right, but your basic menus are now all gone. This is best used in a basic page, or a content type that literally has no fields. So none of your fields will be visible here. As I mentioned in the introduction, the Gutenberg editor is for unstructured content. All right, well, let's click get started. And I'm going to encourage you to read through this documentation as well. And of course, there's help with a detailed guide, which takes us to the documentation page here at. There's a block library, which we'll explore. You can configure each block to do whatever you want. In Gutenberg editor, each paragraph, image, or video is presented as a distinct block of content. And the first time we run Gutenberg, it gives us a little introduction. I'm going to head over to content, add content, basic page. Let's dive in and take a look at what Gutenberg gives to us. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |