Archived topic

Changing Block Editor full-width (no padding) to default

5 replies · Started by Alec on January 27, 2023

Viewing posts 1–6 of 6

January 27, 2023 at 12:59 pm #2511485

Hello,

I have created a custom Blog Post Template block element with dynamic data and made a GP Full-Width layout to replace the old-way header element+layout element. The header in a block element is set to full width and the content area to 800 px.

I've noticed that when I edit posts it displays full width with no padding i.e. the backend (editor) and frontend (actual post display) are different.

I use the GP full-width layout for pages too but they look OK on the backend.

I suppose I did not make the right settings in the Blog Post Template Block Element. But could not figure them out.

Once I saw there is a workaround to fix the width of the editor by adding some lines of code.

Can you help me to resolve this?

Here is the sample post: https://aleckatzmusic.com/sullivan-fortner-live-from-ny/

Screenshots of the elements:
https://app.screencast.com/u6pAlv3XwtOM5
https://app.screencast.com/sFzfpzlvvQc99
https://app.screencast.com/to5k7P3raBT9U

Thanks!

Alec

January 27, 2023 at 4:27 pm #2511588

Hi Alec,

Not sure I understand your question very well, do you want to add some paddings only for the post/page editor?

May I ask why?

January 28, 2023 at 6:47 am #2511953

Hi,

thanks for the reply,

in the Blog Post Template block element, the container with the dynamic content of the post is set to 800, but it does not reflect in the editor showing full-width content with no padding.
So, as you can see all the content goes full-width in the editor even though i set it in the element to 800:
https://app.screencast.com/3tYmpaR1yeaks

Before that, when I used a layout element for posts with the content area set to default container width (1200) and content width to 800. So when I create/ edit posts I see the content the way it looks on the front end.

January 28, 2023 at 12:20 pm #2512316

I see, can you try this PHP snippet?

wp_add_inline_style( 'wp-block-library', 
'.post-type-post .editor-styles-wrapper {
    max-width: 800px !important;
    margin-left: auto;
    margin-right: auto;
}' 
);

Adding PHP: https://docs.generatepress.com/article/adding-php/

January 28, 2023 at 2:26 pm #2512438

This works perfectly,

thank you!

January 28, 2023 at 3:12 pm #2512483

No Problem, glad to help :)

This archived topic is closed to new replies.

Start building better websites today.