GB Editor Widths

In GeneratePress, the Post and Block Element editor width can be set.

The Post Editor width can be set with the Layout Metabox (Default, Full Width, or Contained).

The Block Element editor width defaults to the Element Type selected, or can be overridden with a manually entered Editor Width (% or px).

Both of these work well and closely represent the expected front-end. They also work well if the site is using the generate_block_editor_content_width filter, which only applies if not full width and not in the Element Block editor. This filter is great for closely matching the front end of sites where a max-width is set with CSS for the .grid-container when not using a sidebar, for example.

Local Template and Global Styles Editor Width

In GB, however, the Local Template and Global Style editors seem fixed to the default contained width.

It seems to me that these editors should either default to full width, or provide an Editor Width setting similar to the Block Element editor in GPP.

If you insert a container into the Local Template editor and set it as full width, it’s still confined by the contained width set by the editor. Of course, it renders properly on the front end, but this makes it harder to visualize in the editor.

If generate_block_editor_content_width is being used, things get weird. The full width of the container in the editor will be the width of the filter’s value, while the contained width remains default. So, a container with full width set will actually render narrower than the contained width.

I’m not sure the best way to change this, but for consistency I think the GB Local Template and Global Styles editor widths should be full width by default, or behave more like the Block Element editor. In either case, the generate_block_editor_content_width filter probably shouldn’t apply in these editors.

1 Like

I’m not sure, if it is the same, but maybe I can second that with some screenies. I’m using GP theme (premium) on 1200 width and GB (free).
I was doing the same as in Block Element - Post Navigation - Documentation and in the editor it looked like this:


(result in next post, because I’m a new user, I’m restricted to one image)

And here the result on my page:


So I could only try and guess the right margins :wink:
As usual, I suppose, I did something wrong in my editor or browser settings, but I can’t figure out where.
Thanks in advance for any hints.
BTW, I did all video tutorials (they’re great!) and this problem only appears with the Post Navigation block.
Chris

Hey,

I found this thread when searching for a way to make the Local Templates editor full width.

I contacted support and Tom kindly provided the following code snippet which solved my challenge perfectly.

Here is the snippet Tom provided in case anyone else is looking for a solution to make the Local Template editor full width.

add_action( 'enqueue_block_editor_assets', function() {
$css = '';

if ( 'gblocks_templates' === get_post_type() ) {
    $css = '.wp-block {max-width: 100% !important;}';
}

wp_add_inline_style( 'generateblocks', $css );
} );

Hope some find this helpful.

Cheers