Standard Gutenberg blocks

When to use these blocks

In addition to the custom NAU blocks on the NAU25 web theme, by default, the WordPress Gutenberg block editor provides many basic block options that can also be used on your website. These blocks are pre-designed by WordPress and are included as part of the editor. The blocks include headings, paragraphs, lists, videos, social icons, buttons, and more.

When building or editing pages on NAU’s website, you should use a mix of Gutenberg basic blocks and NAU’s custom blocks.

Examples of these blocks

There are examples of the basic Gutenberg blocks on this page.

This pages uses:

Headings
Paragraph
Lists
Images

Can you spot all four?

Video tutorial

In this video, we will be discussing the incorporation of the Gutenberg blocks into your WordPress page.

Watch the video tutorial: Gutenberg blocks

Self-guided tutorial

Let’s go through some of the most common Gutenberg blocks and how to implement them into your page.

Headings

One way to promote clean website design is to establish a visual hierarchy. Headings allows users to scan a page’s content to see what it contains and if it’s useful or interesting to them.

The heading block is used to signify a new section to the viewer while describing what the section is about.

NAU heading best practices to consider:

Headings should not be longer than a short sentence. Keep it short and concise. Keep them to 55-65 characters.
Use sentence case in headers. Write the header like a sentence but without a period.
Do not select heading levels based on their appearance. Following proper heading structure.
Do not bold or emphasize paragraph text in place of a heading and do not add additional formatting such as bold or underline to headings.

To add a heading block into your page, click on the “+” icon and select the “Heading” block. Once added, you can customize the heading level : H2, H3, H4, H5 or H6. Keep headings nested beneath similar lead concepts.

H1 are used to denote the most important text, such as the title of a page. There should only be one H1 per page.
H2 and H3s are commonly used as subheadings.
Finally, H4, H5, and H6 may be used to provide further structure within those subsections.

We will select H2 for our heading level example, since it is the next heading level following our H1 title.

Paragraph block

The paragraph block is where you will put the bulk of your content as you construct your webpage.

To add a paragraph block, click on the “+” icon and search for the “Paragraph” block.

Once your content is added, you can add basic stylization to your font adding bold, italicize, alignment or hyperlink features to your text. Remember, sometimes, content lends itself better as bulleted lists rather than lengthy paragraphs.

Lists block

The lists block is useful for relaying multiple points of information quickly to the reader.

To add a list block, click on the “+” icon and search for the ‘List’ block.

You can then add your list items and customize the type of list as an unordered list and ordered list.

An unordered list is a collection of related items that have no special order of sequence. They display as bullet points.

An ordered list is when the order of items is used to provide sequential information. And displays numbers rather than bullet points.

Button block

The button block is an effective call to action on your page, encouraging readers to continue to learn more about related content on another page. Linking to other pages on your site allows your readers to discover more about your offerings.

Use short call to actions that are contextual. Avoid generic phrases, such as “click here”.

Good examples include: “Learn about degrees”, “Events in Flagstaff”, “Register for courses”. Try to keep your button word count to 2-3 words.

To add a button block, click on the “+” icon and search for the “button” block. Once added to your page, enter the button text and link.

You can type your button text directly into your button.

Then you can add the URL to your button. Click the link icon, and type in or paste in your URL. Click the arrow to save the URL. If your link is going to a website outside of nau.edu’s domain, please select to ‘open the link in a new tab’, by switching the toggle. Otherwise, leave the toggle off, indicating that the link will open in the same web browser tab.

You can also adjust the justification of the button, setting a left-align, center, or right-align setting.

Video block

Embedding videos into your page can be an effective way to condense large amounts of information into a more visual, engaging, and understandable way. A video provides supplemental content to the static blocks on a website, and creates a compelling experience.

WordPress can support videos from a variety of platforms, like YouTube or Vimeo.

To embed a video onto your webpage, click the black box with a plus sign and search video. You will see several video options appear: Video, VideoPress, YouTube, Vimeo, Animoto, and Dailymotion. If

your video is on YouTube, select YouTube. If It is on Vimeo, then select Vimeo. If it is not on any platform, select video and upload your video to your site’s media library.

Once the URL is embedded, the video will appear in your page’s editor.

For accessibility requirements and compliance with NAU policies, always include closed captions on any videos added to your web page. If you have questions about video captions, please contact University Marketing or NAU Disability Resources for support.

Social media icons block

The WordPress Gutenberg editor includes icons for all social media platforms. Please use the icons provided by the theme, for consistency across all of NAU’s sites.

A great way to gain new followers is to post social media links on your website.

The social icon block is used similarly to the button block, only it is designed specifically for social media.

To add the social icon block, click on the “+” icon and search for ‘social’ in the search bar. Select social icons.

Next, within the social block, click on the black “+” icon and search for the social media platforms you wish to include.

You will need to add the URL to all of your identified platform icons.

You also have the ability to change the alignment of your icons, having them display left-aligned, centered, or right-aligned.

We went through all the Gutenberg blocks that we plan to cover in this video. Let’s save our page as a draft and preview our work!

While we only covered the most commonly used Gutenberg block, there are several other blocks that are included within the theme. If you have questions about usages of any blocks on the NAU21 theme, please contact the Digital Marketing team.