The Image Block
In this post, we’re only going to cover the basics of adding and image and resizing it. You can use the block editor to do much more sophisticated things with images. If you want to learn about them, go HERE
To add an image, click on the the Inserter ⊕. Alternatively, you can type /image in a new block and press enter.
Adding an Image
The media options panel will load with three options, Upload, Media Library, and Insert from URL.
Upload and Media Library will let you add or choose media from your library and embed it in your page.
Simply add the image from the Upload Files tab, then select it in the Media Library tab. Customizing the image attachment details, such as the Title, Caption, Alt Text, and Description, in the Media Library window can also be helpful for SEO and future navigation of your media library.
Resizing Images
Once the image is added to the editor, you can resize and align the images to better fit the surrounding content.
In order to resize an image, click on the image to reveal the draggable resize handles (these are the two circles you see on the right and at the bottom of the image below). Then, click on the resize handles and drag the image to the size you want.
Alternatively, on the right hand side in the block settings, the image size can be fine tuned by adjusting width and height dimensions. There are also some convenient options in the block settings for setting the image to 100, 75, 50, and 25% of its original size.
Moving Images
You can move an image up or down you post by using the Moving Handles shown below.
The up and down arrow icons can be used to move a block up and down in your document.
Aligning Images
If you wish to align an image within a paragraph you will first need to insert the image just above the target paragraph block.
From there, click on the image and select left or right alignment, this will merge the image into the paragraph block.
The Block Editor thing has become a fairly long post.
I’m tempted to shorten it by removing these two questions:
How do I check what my post looks like?
What do I do to publish a post?
I don’t think the answers vary significantly between Classic Editor and Block Editor.
I’m also wondering how/if we respond to questions about the content.
Do we want to have, probably in addition to this, an FAQ section for The Secret Reading Room?
We’ll have a fairly extensive FAQ section — one main page and a whole boatload of tutorials in addition, linked from the main page and also from a dedicated menu.
Having looked through your post — which I think is great and exactly the kind of guidance people are going to need — what may make the most sense in this particular instance might be to break it up into several chapters, each of them going into a separate post. This is probably also going to be the approach we’ll be taking to other, equally long / “involved” tutorials.
Also, one of the tutorials we’re planning will be a very basic “how to get started” one, literally from “I’m here — now what?” to “this is how you publish a post” and “here’s where you find xyz item(s)”. So I would suggest that anything not specifically relating to the block editor could go there, unless the block editor has specific publishing settings beyond the “save draft / edit / schedule / publish” modes.
Tutorials such as this should be formatted as “projects”; that will
(1) keep them out of the general feed and move them into the dedicated feed we’re reserving for admin issues (general site announcements, tutorials, etc.) and
(2) auto-enable a “Comments” section where questions can be asked.
Incidentally, we’re (provisionally, but I think we’ve agreed to settle on this one) working with a theme that has a very clear setup for the “comments” section, with each “original” comment (or question) creating a new box of its own, and all subsequent responses nested within that same box. Christine, MbD and I all like that a lot; particularly when it comes to explaining things and following up on questions in the early days of the community, that should help a lot.
In that case, it might makes sense to put a post with a short overview with lego bricks explanation of blocks and then links to each of the different questions as post somewhere else and have the post independently searchable.
I don’t know how that’s done in Projects. I haven’t been able to find any tutorials on Projects on wordpress.org.
I think the best that I can do is complete the segments and add the links and then ask you to move it into an appropriate project format.
Will that work`?
Absolutely!
“Projects”, for our purposes, are really just glorified posts, though, which we’re using to keep the admin stuff out of the main “posts” feed, for everything that
(a) calls for comments / responses, e.g. tutorials and the “Questions?” posts in connection with reading games, and
(b) is most easily made accessible in a comprehensive but dedicated feed (as pages don’t go into any feed, so you necessarily have to link to those from a site menu somewhere; which in turn means that pages are basically something we’re just using as static one-off things).
So, to tie several “projects” together, e.g. for your “block editor” tutorial, we’d basically do just what you propose: Present the basic explanation what is a block in a general intro “project” (= post filed as “project” in the site’s “portfolio” section rather than in the “posts” section), then create separate “projects” for each of the follow-up questions and link to those from the intro page. Eh voilà tout!
OK. I can do that. Let me try it with the sections that are already done.
Great, and thank you!
This looks great, Mike!
This is amazing Mike, thank you so much. As someone who has been head down writing Classic editor tutorials, I know how much work you’ve put into this and just … thank you.