Blog

Just like the Posting Source Code feature works in the classic editor, with the Code Block you can add formatted code for others to view.

Block name: core-code
CSS: Gutenberg core

@media only screen and (min-width: 960px) {

	body .alignfull {
		width: auto;
		max-width: 1000%;

		margin-right: calc(50% - 50vw);
		margin-left: calc(50% - 50vw);
	}

	body .alignwide {
		width: auto;
		max-width: 1000%;
		margin-right: calc(25% - 25vw);
		margin-left: calc(25% - 25vw);
	}

	.alignwide img,
	.alignfull img {
		display: block;
		margin: 0 auto;
	}
}

The Video Block allows you to upload and embed video into your post or page.

Block name: core-video
CSS: No separate styles needed.

Creating an audio block will allow you to embed a piece of music, podcast, or other sound file right into your page or post.

Block name: core-audio
CSS: No separate styles needed.

If you would like to separate two blocks of content by a linem the separator block is what you are looking for.

Block name: core-separator
CSS: _core-separator.scss

Default

Wide line

If you want to add emphasis to a piece of text in your post or page, the pullquote block can quickly and easily make short snippets look beautiful.

Block name: core-pullquote
CSS: _core-pullquote.scss

Pullquote – Standard width

Pullquote – Wide

Pullquote – Full width

Adding quotes can help you highlight great reviews from your audience or phrases that inspire you.

Block name: core-blockquote
CSS: _core-blockquote.scss

Quote – Regular Style

Design is a funny word. Some people think design means how it looks. But of course, if you dig deeper, it’s really how it works.

Steve Jobs

Quote – Large Style

Design is a funny word. Some people think design means how it looks. But of course, if you dig deeper, it’s really how it works.

Steve Jobs

The buttons block allows you to add one or more buttons to your page or post.

Block name: core-buttons
CSS: _button.scss

The Columns Block allows you to insert text, media, and other types of content into up to three columns. When used one after another, the columns create a grid effect.

Block name: core-columns
CSS: _core-columns.scss

2 Columns – Standard Width

2 Columns – Wide

2 Columns – Full Width

The Gallery block allows you to easily add multiple photos and automatically arrange them attractively.

Block name: core-gallery
CSS: Gutenberg core

Standard width

Wide width

Full width

To give your post or page a sleek, professional look, you can add a Cover Block.

Block name: core-cover
CSS: _core-cover.scss

This is a standard width cover image.

This is a wide cover image.

This is a full width cover image.

This is a full width cover image with higher background opacity.

This is a full width cover image with left aligned text.

This is a full width cover image with right aligned text.