Staff Portal

Block Editor Basics

The new block editor uses an entirely different workflow than previous versions of WordPress, and once you get used to the way it works, you can quickly and easily create compelling content. Instead of one little editing window, you have a blank canvas where you can add text, images, lists, photo galleries, and much more. It works in many ways like a word processor for the web.

Blocks

Every time you tap the Enter (Return) key, you are beginning a new block. Each block has its own settings, and can easily be converted to another type of block by changing the block type. While you are typing, the editor is distraction-free, allowing you to concentrate on your content. By moving the mouse slightly, the toolbar pops up:

The Paragraph icon at far left shows the current block type, and in the above image, shows the Paragraph symbol. Next to that are the Move icons: The six dots are a grab handle, which allows you to drag and drop the block up and down the page; and the arrow up/down icons allow you to do the same thing with a mouse click. Next in from left is the text alignment tool, then the Bold and Italic tools. Next is the link tool (more on that later). The drop-down arrow will have contextual options based on the type of block. For a paragraph, it includes things like Strikethrough, Superscript and Subscript, inline code and images, and text color. We have programmed in the official UNC color library, and ask that you use restraint with color and follow the university branding guidelines. The default font size and color have been carefully chosen with branding, professionalism, and accessibility in mind. See our article on Information Hierarchy for more detailed information about best practices for structuring your page.

Block Types

Many types of blocks are available by default, and we have added an additional plugin to fill in some gaps. Please see our Block Reference page for examples used on our sites. This list is a starting point, and links open in new tabs to their definitions on the WordPress Block Support site:

Block Settings

When a block is selected, the sidebar on the right of your screen shows some more options. Again, we ask that you use restraint in order to keep our sites consistent and professional. Block settings are contextual and will be different depending on the block type that you have selected. We encourage you to follow the links above to learn the specifics of how to work with the different block types, however we have written specific guides for the most common block types that you will be working with.

You can now begin to see how much more powerful and flexible the block editor is than the previous "Classic" editor. Other concepts are covered in detail on this site to help you get the most out of the block editor on Student Affairs websites.

Sharing and printing options: