Welcome to the Gutenberg page editor!

This is a page that demonstrates all the blocks available to you, and their details and options. Before you get started, check out these helpful hints!

To create a new block, either start typing text into a field, or type “/” to bring up a list of block options. Or, move your mouse around until you see a black square with a white plus sign in it (usually these appear in the center between blocks, or to the right hand side). When you click the plus sign, a popup will appear with suggested options, a search field, and a “browse all” button, which brings up all options in a column to the left:

Each block has its own toolbar that appears at its top edge when you click anywhere inside that block. It looks like this:

Each block has a slightly different toolbar, but generally speaking you can do things like move the block up or down, change the block type, change its alignment, add bold or italicized text, switch to preview mode, add a link, or remove the block entirely. Hover over each of the icons in the toolbar for a description.

The blocks themselves are not obviously labeled. To find out what type of block you’re looking at, click anywhere in the block and look to the sidebar of this editor —–>
(If you don’t see the editor sidebar, click the gear icon in the top right corner of the page to open it). Under the “Block” tab at the top, you will see the name of the block you are in. In this case, we are in the List block:

The editor sidebar also offers more options beyond the block’s toolbar. To see those options, click into the block you want to affect and check out the editor sidebar under the Block tab.

Sometimes the way something looks in the page editor (where we are right now) won’t look the same on the front end (the published page), so make sure to Preview your page often to see how it will “really” look.

Once in a while an entire block will be represented by a single horizontal line, very easy to miss! If you see a single horizontal line, click on it to see what type of block it is, and to bring up its toolbar and sidebar options.

In this Reference Page, some of these blocks are labeled and explained; others are simply demonstrated. If you don’t know what type of block something is, remember that you can click anywhere in it, and look to the editor sidebar’s “Block” tab for that information.

Don’t forget to save your draft often! Click “Save draft” in the upper right corner of the editor.

Click item to jump to it (front end only, doesn’t work here in the editor)

Embeds

Let’s kick things off with this Heading Block size H2!

You can change the heading size (H1, H2, H3, etc.) in this block’s toolbar (click this block to see it), or in the editor sidebar’s “Block” tab (click upper right gear if sidebar is hidden).

Change the color of a heading under “color settings” in the editor sidebar (as long as this block is selected).

Photo Gallery:

Photo Gallery Block

Link Text

Photo Banner:

Big Text Area:

Content for the “Big Text Area” block.

Ticket Banner:

Ticket Banner Block

This is the sub-title for the “Ticket Banner” block

Title for Image

This is some descriptive text for the “Ticket Banner” block.

Button Text for “Ticket Banner”

Blue Box:

Blue Box Block

I’m a button

Email Signup:

Title for Email Signup block

Hello please sign up to receive emails

FAQ:

Title for FAQ Block

Is this the first question?

The answer is yes. And, here is what a link looks like.

Is this the second question?

Why, yes it is.

Home Events:

April 25, 2025

Brooklyn Rider

The String Quartets of Philip Glass

View Event

May 2, 2025

Jon Nakamatsu

Spring Piano Series

View Event

May 7, 2025

Dr. Henry Louis Gates Jr.

2025 Black Faculty Speaker Series

View Event

May 11, 2025

Son Rompe Pera

View Event

View Full Season

Sponsors:

The gray line below is the (easy-to-miss) “Sponsors Block”:

Listing:

Title for Listing Box block

Description box content for Listing Box block

3 Column Box:

This is a 3 Column Box Block

Column 1

Content for first column

Column 2

Content for second column

Column 3

Content for third column

This is a Heading Block at size “H2”! You can click in its toolbar to change the size to H3, H4, etc.

This is a basic Paragraph Block. You can type as much text as you’d like in here. It will accommodate all of your text, as much as you like. In this block’s toolbar, you can change the text alignment (left, center, right), make text bold or italicized by highlighting the text and clicking the B and/or I button in the toolbar. You can also create a link to an external site. To make the first letter of the paragraph very large, toggle the “Drop cap” option in the Text Settings, located in the editor sidebar under the “Blocks” tab (click black gear icon if this editor sidebar is not displaying).

Check out the empty space below this paragraph. That is a spacer block. You can place these in between blocks if things are looking crowded, and you can adjust the spacer block’s height by clicking and dragging the blue dot up or down. For uniformity throughout the page, you can “copy” your custom-sized spacer in the toolbar (vertical dots), then paste into an empty field. If that isn’t working for you because no empty field is presenting itself where you need it, click the plus sign and add a spacer block with the desired pixel height.

This is a bulleted List Block
Hit Enter to create a new list item line
Keep doing this to add list items
This list could be numbered instead, if you click on the number list icon in this block’s toolbar (located at the top of this block when you click anywhere in the block).

“In a world full of quotes, this is where to put them: the quote block”
Linus Schief

Classic:

Click here. Yes here. See how a toolbar shows up? That’s the Classic Editor’s toolbar. Even though we are in the Gutenberg Block Editor, we can still mimic the classic editor from days of yore with this Classic Block. Hover over the buttons in the toolbar above (if you still don’t see the toolbar, click somewhere in this text block and it should appear) to see what each button is. You have options like bold, italics, creating a link to an external site, ~~striking through text~~, creating a horizontal line (just below)

You can change the color of your text…

Or create a bulleted list!
Hit enter to start a new line/list item
And so on

(Hit enter twice to stop creating new bullets)

Create a numbered list
Hit enter to create a new line/list item
The numbers will automatically appear

(Hit enter twice to stop creating new numbers)

Change the alignment of your text with the left, center, or right alignment buttons (in this case: right alignment).

Click the Paragraph dropdown menu in the toolbar above to switch to:

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

(Hint: the Headings are sized one way here in the backend, but may be different sizes on the published page!)

ŠþêçÎã⌊ ÇΗāΓãç†∈Γ§

“Increase Indent”

To paste pre-formatted content from elsewhere, but without any of the formatting, toggle the Paste as Text button (so that it has a black line around it), and paste the text. All of the formatting will be removed and pasted as plain text, like this.

Add Media:

This is a Code Block. It allows you to share a snippet of code, with all its formatting, spacing, and tabs intact.

<?php
class Car {
    function Car() {
        $this->model = "Tesla";
    }
}

// create an object
$Lightning = new Car();

// show object properties
echo $Lightning->model;
?>

This is the Preformatted Text Block. It keeps all your

       tabs and    spacing
    exactly how 
     you 
 type it

This is a Pullquote Block. You can change the style and colors in the settings panel to the right under the “Block” tab.
Linus Schief

Tables:

Default Table Block	doesn’t show	lines on	the front end.
Click	“Preview”	to see	what I mean.
Edit the	rows and	columns	in the toolbar
for	this	block.	Additional
settings	available in	editor	sidebar.

Column 1	Column 2	Column 3	Column 4	Column 5
“Striped” table, style selected in the editor sidebar	And the color has been changed in the “color settings” panel in the editor sidebar	The “Header Section” has been toggled on to add a header row above	The “fixed width table cells” has been toggled on in the editor sidebar as well, for uniform rows	The “Footer Section” has been toggled on in the editor sidebar, to add a footer


Footer Label		Footer Label

For this Verse Block

   I've chosen 
center alignment. 
The Verse Block allows        
me to

            space 
how I want to

so


that


this can be read like 

                                       poetry.

Image

Default Style:

Rounded Style:

This image is aligned left (toolbar). To round the image or change its dimensions, see the editor sidebar’s “Block” tab.

Gallery:

Below this paragraph is an Audio Block. Upload an audio file from your computer or Media Library, or, as in this case, enter a URL from an external site. (Use “replace” from this block’s toolbar to change the content, or select “autoplay” and/or “loop” from options in editor sidebar):

Cover Block:

This is a Cover Block. It has one or more paragraph blocks inside it.

Select/upload an image , then click in the center of the image to add text like this. You may change the position the text over the image by clicking on the 3 x 3 dots icon in the Cover Block toolbar (at top of image). There you can also change the image by clicking “Replace”.

Edit the text in these Paragraph Blocks by clicking into them and typing, as well as select bold or italics from the Paragraph Block toolbar (they show when you click on the text).

More style options for both the Cover Block and the Paragraph Block are available in the editor sidebar. To change size or color of text, click into the paragraph block, then make changes in editor sidebar.

To change image settings such as fixed position, focal point picker, and positioning, dimensions, overlay opacity and color, click at the top of the image to select the Cover Block and make changes in editor sidebar.

Below is a File Block. You may upload a file here that the user will be able to download. In the options to the right, you may select link to attachment page or media file, open image in new tab, and show download button.

LunarPark Download

Below is a Media & Text Block. It allows you to display text and image side by side. It contains a paragraph block, so to make changes, be sure you have selected the appropriate block for its toolbar and its options in the editor sidebar. In the Media & Text toolbar you can swap text and media boxes left to right, adjust vertical alignment between the two, and attach a link to the image, making the image a clickable link itself. In the editor sidebar cropping to fit column. The editor sidebar style options for text are same as a Paragraph Block.

This text will display alongside the image

Below is a Video Block. It embeds a video from your computer, Media Library, or URL straight into the page. In this example I have embedded a YouTube video by copying its URL (web address) into the URL field. To replace a URL, click the pencil icon in the video block’s toolbar; or to replace the URL with a video from your computer or Media Library, remove the block and start a new one, selecting the appropriate file.

Buttons:

Button to YouTube.com

The styles for the button can be set in the editor sidebar, including background and text color, border radius (how round or square corners are), outline or not, and whether the button’s link opens a new tab. For the button to do something, it has to have a link attached. Click the link icon in the button’s toolbar and copy in the full URL of the site you’d like the button to lead to

Columns:

To start, you will be shown five options that look like this:

Selecting the 33 / 33 / 33 variation brings up three empty columns like these:

Click the plus signs to add a block into each of the columns.

This Columns Block contains an image block, a paragraph block, and another image block. Each of the blocks has been center-aligned using the blocks’ individual toolbar, and the entire column structure of blocks has been vertically aligned in the middle. The sizes of the images have been changed in the Image Block’s editor sidebar to “Medium.” The text size has been changed in the Paragraph Block’s editor sidebar to “Medium.”

This is a Group Block. Place your cursor here in the first line of text and hit the “up” arrow on your keyboard. A blue line will appear around the entire group of blocks, and the Group Block’s toolbar will appear at the top left. The Group Block is a “parent block” that holds blocks within it. The blocks will display together inside the Group Block on the front end. When you start a Group Block, you will be prompted (with a plus sign outlined in blue) to add your first block. This Paragraph Block is the first block in this group. To enter the next block in the group, hit “enter.” Another plus sign will present itself, this time a black one at the bottom right corner of the group.

This is the second block in the Group Block, it is also a Paragraph Block. Next I will hit enter again, click the plus sign that appears, and choose an Image Block.

List Block
Hit Enter to make new list item
With a list, hitting “enter” won’t give you the next black plus sign to add the next group; in this case it will just appear at the bottom right.

You may notice it’s easy to select the individual blocks within the group block, but nearly impossible to select the group block itself. Reasons you’d want to select the group block are to make style changes in its corresponding editor sidebar, like background color or text color, or simply view the boundary of the group to be sure your blocks are contained within it. The trick is to click on the first item or line of text in your first block, then hit the “up” arrow on your keyboard. A line will appear around the entire group, and the group’s toolbar will appear at the top also.

The gray line below is a Separator Block:

The empty space below is a Spacer Block:

Widgets

Shortcode:

[slideshare id=227115607&doc=10254techvisiontrend1awcp-200206101024]

Archives. It displays your previous posts by month:

Calendar:

April 2025
M	T	W	T	F	S	S
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30

Custom HTML:

Hello World

Latest Comments:

No comments to show.

Latest Posts:

RSS:

Search:

Social Icons:

Embed:

Twitter:

Tweets by arizonaartslive

YouTube:

WordPress:

https://arizonaarts.live/about/

Soundcloud:

https://soundcloud.com/user-548069767/chris-piraino-live-at-sound-art-arizona-june-2019

Spotify:

Flickr:

Vimeo:

Animoto:

Cloudup:

Crowdsignal:

Dailymotion:

Imgur:

The bell is not a toy

Issuu:

Kickstarter:

https://www.kickstarter.com/projects/tuneandfairweather/the-epicureans-a-novel?ref=discovery

Meetup:

https://www.meetup.com/Tucson-Happy-Hour-Meetup/events/273840963/

Mixcloud:

Reddit:

Bald eagles, eaglets found nesting in arms of Arizona cactus
by innews

ReverbNation:

Screencast:

Scribd:

https://www.yumpu.com/s/mqer20syCExAzPHF

Slideshare:

Accenture Tech Vision 2020 – Trend 1 from accenture

SmugMug:

https://www.johnchapmanphotographer.co.uk/Galleries/New-Gallery-of-recent-Pictures/i-Wp9pg7D/A

Speaker Deck:

TikTok:

@nativewomanruns
Use #indigenouspride tomorrow #indigenousday2020 #nativetiktoks #indigenoustiktok #navajo #indigenouswomen
♬ –

TED:

Tumblr:

https://www.tumblr.com/fernandabarrera/182744631697/i-am-hiding-the-you-i-show-to-you-is-just-a-lie

Welcome to the Gutenberg page editor!

Table of Contents

Custom Blocks

Text

Media

Design

Widgets

Embeds

Let’s kick things off with this Heading Block size H2!

You can change the heading size (H1, H2, H3, etc.) in this block’s toolbar (click this block to see it), or in the editor sidebar’s “Block” tab (click upper right gear if sidebar is hidden).

Change the color of a heading under “color settings” in the editor sidebar (as long as this block is selected).

Photo Gallery:

Photo Gallery Block

Photo Banner:

Photo Banner Block

Sub Title for Photo Banner

Big Text Area:

Ticket Banner:

Ticket Banner Block

This is the sub-title for the “Ticket Banner” block

Title for Image

Blue Box:

Blue Box Block

Email Signup:

Title for Email Signup block

Your account preferences have been updated.

Thank you!

FAQ:

Title for FAQ Block

Is this the first question?

Is this the second question?

Home Events:

April 25, 2025

Brooklyn Rider

The String Quartets of Philip Glass

May 2, 2025

Jon Nakamatsu

Spring Piano Series

May 7, 2025

Dr. Henry Louis Gates Jr.

2025 Black Faculty Speaker Series

May 11, 2025

Son Rompe Pera

Sponsors:

Sponsors

Listing:

Title for Listing Box block

3 Column Box:

This is a 3 Column Box Block

Column 1

Column 2

Column 3

This is a Heading Block at size “H2”! You can click in its toolbar to change the size to H3, H4, etc.

Classic:

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

(Hint: the Headings are sized one way here in the backend, but may be different sizes on the published page!)

Tables:

Image

Gallery:

Buttons:

Columns:

Widgets

Shortcode:

Calendar:

Categories:

Custom HTML:

Hello World

Latest Comments:

Latest Posts:

RSS:

Search:

Social Icons:

Tag Cloud:

Embed:

Twitter: