Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How can I define the width of the editor? #6064

Closed
davidperezgar opened this issue Apr 8, 2018 · 14 comments
Closed

How can I define the width of the editor? #6064

davidperezgar opened this issue Apr 8, 2018 · 14 comments

Comments

@davidperezgar
Copy link

@davidperezgar davidperezgar commented Apr 8, 2018

Hello, Gutenberg tend to show how it will be in public.
Actually, we work with 1280px grid, and the editor Gutenberg has 610px width, so we should adapt Gutenberg as it will be in public.

How can we change the width of the editor? So, it will show very similar like public?

@weavertheme

This comment has been minimized.

Copy link

@weavertheme weavertheme commented Apr 8, 2018

As part of the theme editor CSS, add:

@media screen and ( min-width: 768px ) {
    .edit-post-visual-editor .editor-post-title,
    .edit-post-visual-editor .editor-block-list__block {
	max-width:	1100px;
    }
}

where you use whatever value you need to match your theme width.
Probably don't need the @media, but I put all my display dependent rules in an @media for consistency.

@davidperezgar

This comment has been minimized.

Copy link
Author

@davidperezgar davidperezgar commented Apr 8, 2018

Nice @weavertheme ! thanks! that helped me!

@weavertheme

This comment has been minimized.

Copy link

@weavertheme weavertheme commented Apr 10, 2018

Just figured out you also need one to make the editor's default alignwide width work properly when you extend the width. My opinion is that theme max-width + 200px works pretty well:

.edit-post-visual-editor .editor-block-list__block[data-align="wide"] {
	max-width: 1300px;
}
@raquelmsmith

This comment has been minimized.

Copy link
Contributor

@raquelmsmith raquelmsmith commented Nov 8, 2018

This is assuming that every template on a website has the same width. However, one of our templates doesn't show the sidebar, so the content width is wider.

From what I can tell, the editor doesn't add any classes to the body (or otherwise) for the post/page template that is selected. Or am I missing something? Any suggestions for what to do here?

@drdogbot7

This comment has been minimized.

Copy link

@drdogbot7 drdogbot7 commented Nov 20, 2018

As of 11/20/18, the code below seems to do the trick, and it's a lot easier to remember. This increases the width of the regular content in the editor, without messing with the 'wide' and 'full' blocks.

.wp-block {
  max-width: YOUR-CHOSEN-WIDTH;
}
@manake

This comment has been minimized.

Copy link

@manake manake commented Dec 6, 2018

I have the same question as @raquelmsmith

@kgroveshok

This comment has been minimized.

Copy link

@kgroveshok kgroveshok commented Dec 7, 2018

Do I get this right then? The post editing sets the area to the size it would appear so it is easier to gauge the final view. That is nice and helpful. However, if I'm editing large amounts of text I don't want to be looking at it through a letter box on a large screen. Is there any switch to wide view irrespective of the finial view? Or am I missing something?

@kgroveshok

This comment has been minimized.

Copy link

@kgroveshok kgroveshok commented Dec 7, 2018

OK never mind I will switch to the Classic Editor

@designsimply

This comment has been minimized.

Copy link
Member

@designsimply designsimply commented Jan 10, 2019

For the question about multiple editor widths, I posted an explanation of the current situation and a workaround code example at #12874 (comment). Please have a look!

@rogerlos

This comment has been minimized.

Copy link

@rogerlos rogerlos commented Jan 12, 2019

This seems to sort-of work. But it also seems a bit fragile (SASS shown):

/* From elsewhere in my stylesheets */
$editor_wide: 1300px; 

.wp-block {
  max-width: $editor_wide;
  &[data-align="full"] {
    max-width: none;
  }
  &[data-align="wide"] {
    max-width: calc( #{$editor_wide} + 200px );
  }
}
@rogerlos

This comment has been minimized.

Copy link

@rogerlos rogerlos commented Jan 12, 2019

I wrote a script which watches the template selector, and adds a class to your chosen gutenberg wrapper. Here's a gist with the script, plus sample PHP code to add it and a very simple example of how to use it to target specific templates with CSS:

https://gist.github.com/rogerlos/9c156a580e2a3cfaf862b837cc01e015

@rahulkhosla

This comment has been minimized.

Copy link

@rahulkhosla rahulkhosla commented Feb 23, 2019

@davidperezgar Here's an answer I found for custom editor widths (https://wpza.net/changing-the-width-of-the-gutenberg-editor/).

@IvanPr

This comment has been minimized.

Copy link

@IvanPr IvanPr commented Feb 24, 2019

Simply use:
function custom_admin_css() {
echo '<style type="text/css">
.wp-block { max-width: 950px; }
</style>';
}
add_action('admin_head', 'custom_admin_css');

@Jeremy-Bolella

This comment has been minimized.

Copy link

@Jeremy-Bolella Jeremy-Bolella commented Jun 27, 2019

I found this works even better then some of the other answers. Leaves a slight gutter to the left for the gutenberg block dragger buttons

.wp-block {
  max-width: 1200px;
}

.block-editor-writing-flow {
  padding-left: 3rem;
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
You can’t perform that action at this time.