How to Add Full Width Images in Gutenberg

Theme Preview with a Full-Width Image
Standard

Full width images are a sweet new feature that Gutenberg offers to WordPress theme developers. In order to enable these in your theme, it takes just a few lines of code.

Problem #1

By default, the Gutenberg Image Block only has the three classic alignment options: left-aligned, centered, and right-aligned.

Gutenberg Default Image Alignment Options
Gutenberg Default Image Alignment Options

Enabling Wide Images in the Gutenberg Editor

First, a bit of PHP.  Add this to your theme’s functions.php, or wherever else you are adding your add_theme_support() functions.

Now, you can find two new icons on your Image Gutenberg Block, wide-align, and full-width.

Gutenberg Image Block Updated Options

When one of these options is selected, it will display correctly in the editor.  If you select wide-align, the image gets wider, and if you select full-width, the image fills the editor horizontally.

Wide Image Previews in the Gutenberg Editor

Gutenberg Image Block Wide Width in the Editor
A wide image in the Gutenberg Editor
Gutenberg Image Block Full Width in the Editor
A full-width image in the Gutenberg Editor

Problem #2

There’s just one issue: Although WordPress adds special classes to the image markup, this doesn’t affect your actual theme styles.

Gutenberg Image in the Theme, unstyled
An unstyled full-width image in the Theme.

The Solution

To solve this, add your own CSS.  Here’s a snippet I came up with:

A few notes about the CSS:

  • calc() tells the browser to calculate a value (usually) based on the screen size.
  • vw refers to “viewport width,” or screen width.

The Result

After the styles are applied:

Gutenberg Wide Image in the Theme
A wide-aligned image in the theme after adding the CSS.
A full-width image in the theme after adding the CSS.
A full-width image in the theme after adding the CSS.

So, with less than 20 lines of code, you can add this powerful and attractive feature to your themes.

Further Reading

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s