The Must Have for WordPress
The Must Have for WordPress
×
  • Home
December 5, 2019
Gutenberg WordPress

Calculate the correct content width for the Gutenberg editor

by Martin Jost
No comments
2 min Reading Time
2.06 K Views
5 Score
3 Likes
Share on Facebook Tweet on Twitter Share on Linkedin Pin on Pinterest Send via E-Mail Send via WhatsApp

The WordPress Gutenberg editor allows you to customize and edit web page content according to the frontend design. Gutenberg will share the frontend design experience of the website into the editor. A good starting point is to get the correct content width from the frontend view inside the editor, which can vary depending on the options of the theme.

For example, the content width changes depending on whether a sidebar is displayed or not. Or if you can select between different content widths such as “wide”, “medium” or “narrow”.

What do we need for the right calculation of the content width?

Depending on which design options a theme offers, the basis for calculating a content width can be very different. In my example, the following points are important to correctly calculating the Gutenberg editor content width.

  • Outer Content Width – The width of the entire web page area, which includes all elements such as header and footer.
  • Inner Content Width – The width of the text area the_content(); which could be “wide”, “medium” or “narrow”.
  • Sidebar Width – The width of the sidebar is also an important part because the width of the content is different, depending on the visible or hidden sidebar.
  • Paddings – In addition, there are various paddings to the edge of the browser window, which slightly reduce the content width.

Calculate the content width of the website

The following function calculates the content width based on the listed points above and will later be used to get the correct content width for the Gutenberg editor.

The function calc_gutenberg_editor_content_width() now gives us the correct width in a numerical value, which allows us to specify the correct content width of the Gutenberg editor, depending on the theme settings.

Pass the content width to the Gutenberg editor

We use the WordPress action enqueue_block_editor_assets, which help us to output the correct content width via inline CSS. The dummy handler “block-editor-styles” is necessary in this case to apply the inline style with the function wp_add_inline_style( 'block-editor-style', $inline_css ). Instead, of course, another handler from an existing block editor style can be used to output wp_add_inline_style().

The WordPress Gutenberg editor block class .wp-block {…} is the correct CSS selector, which passes our content width to the blocks. With this additional code, you can now easily calculate the correct content width for the WordPress block editor on depending theme design options.

Last updated: December 5, 2019

Calculate the correct content width for the Gutenberg editor Score: 5 / 5 (2votes)
Share on Facebook Tweet on Twitter Share on Linkedin Pin on Pinterest Send via E-Mail Send via WhatsApp
Blocks
The Author
Published by
Martin Jost

View all posts by Martin Jost

Related Posts
R
WordPress Remove the URL field in the WordPress comments form

As we know, comments are often misused by website visitors to get external links. Outgoing links ...

Read More
O
WordPress Open Graph in WordPress einbetten, ohne Plugin

Das Open Graph-Protokoll ermöglicht es, dass jede Webseite als “rich object” im &#82 ...

Read More
G
PHP Get the current WordPress URL

In some cases, it may be necessary to get the current WordPress URL of where the user is current ...

Read More
Read more
A
Previous Post
Add custom classes to the WordPress BODY tag
C
Next Post
Convert HEX color to RGBA color code in PHP
Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

  • Imprint
  • Privacy Policy
© 2016-2023 - wphave - The Must Have for WordPress
Login

Lost your password?

RequiredEssential cookies enable basic functions and are necessary for the proper functioning of the website.
  • Name: Cookie Status
  • Provider: Owner of this website
  • Purpose: Is necessary to check whether the user's web browser allows cookies.
  • Privacy Policy: https://wphave.com/privacy-policy/
  • Cookie Name(s): cookie_status
  • Duration: 1 Minute
  • Name: Cookie Consent
  • Provider: Owner of this website
  • Purpose: Is necessary to check whether the user agrees to allow opt-in cookies or not.
  • Privacy Policy: https://wphave.com/privacy-policy/
  • Cookie Name(s): cookieconsent_analytics, cookieconsent_marketing, cookieconsent_status
  • Duration: 1 Year
  • Name: Like Button
  • Provider: Owner of this website
  • Purpose: Is necessary to check whether the user has already gave a like for a specific post.
  • Privacy Policy: https://wphave.com/privacy-policy/
  • Cookie Name(s): like_btn_{POST_ID}
  • Duration: 21 Days
  • Name: Post Rating
  • Provider: Owner of this website
  • Purpose: Is necessary to check whether the user has already rate a specific post.
  • Privacy Policy: https://wphave.com/privacy-policy/
  • Cookie Name(s): rating_{POST_ID}
  • Duration: 7 Days
AnalyticsStatistics cookies collect information anonymously. This information helps us to understand how our visitors use our website.
  • Name: Google Analytics
  • Provider: Google LLC
  • Purpose: Google cookie for website analysis. Generates statistical data on how the visitor uses the website.
  • Privacy Policy: https://policies.google.com/privacy
  • Cookie Name(s): _ga, _gat, _gid
  • Duration: 2 Years