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.

Sign up for GitHub

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

Jump to bottom

Body classes based on page template #7810

Closed
ktmn opened this issue Jul 9, 2018 · 5 comments
Closed

Body classes based on page template #7810

ktmn opened this issue Jul 9, 2018 · 5 comments
Labels
[Type] Plugin Interoperability Incompatibilities between a specific plugin and the block editor. Close with workaround notes. [Type] Question Questions about the design or development of the editor.

Comments

@ktmn
Copy link

ktmn commented Jul 9, 2018

Is your feature request related to a problem? Please describe.
Page templates can have varying widths on the front end. In order to reflect that on the editor side it would be good to know which page template is currently selected.

Describe the solution you'd like
Add page template slug to <body> classes on the Gutenberg page and update it automatically when template is changed in page attributes.

So you could do something like:

body.gutenberg-editor-page.page-template-two-sidebars .edit-post-visual-editor .editor-post-title__block,
body.gutenberg-editor-page.page-template-two-sidebars .edit-post-visual-editor .editor-block-list__block {
    max-width: 600px;
}

body.gutenberg-editor-page.page-template-full-width .edit-post-visual-editor .editor-post-title__block,
body.gutenberg-editor-page.page-template-full-width .edit-post-visual-editor .editor-block-list__block {
    max-width: 100%;
}

Describe alternatives you've considered
Alternatively you can let page template comments contain something like this:

/**
 * Template Name: Full width page
 * Gutenberg Width: 1280px
 */

and handle it automatically, making it easily possible to change the width when the template gets major changes in the child theme or when creating custom ones.

But at the end of the day body classes wouldn't hurt, could prove useful for other use cases as well.

Note
It's already possible to do this for post types for example, since they are already included in the body class:

body.gutenberg-editor-page.post-type-post .edit-post-visual-editor .editor-post-title__block,
body.gutenberg-editor-page.post-type-post .edit-post-visual-editor .editor-block-list__block {
    max-width: 1024px;
}

body.gutenberg-editor-page.post-type-portfolio .edit-post-visual-editor .editor-post-title__block,
body.gutenberg-editor-page.post-type-portfolio .edit-post-visual-editor .editor-block-list__block {
    max-width: 800px;
}

Question
Is CSS like even the recommended way to alter the editor width or is there anything else available/planned?
@danielbachhuber danielbachhuber added [Type] Question Questions about the design or development of the editor. [Type] Plugin Interoperability Incompatibilities between a specific plugin and the block editor. Close with workaround notes. labels Jul 11, 2018
@danielbachhuber
Copy link
Member

Hi @ktmn,

What you're describing seems achievable with some custom JavaScript that changes the <body> class based on the selected template.

I don't believe there are plans to add the page template to the <body> class. The closest that's planned for this is likely #4418

@websevendev websevendev mentioned this issue Jul 24, 2018
Closed
@chrisvanpatten chrisvanpatten mentioned this issue Aug 13, 2018
Closed
@webmandesign
Copy link
Contributor

@ktmn, @danielbachhuber Please see #8948

@timnicholson
Copy link

I would very much like to see this too. I think the ultimate goal for Gutenberg should be that the editor is WYSIWYG with the front-end. I know at least in the initial release that isn't the case. For example, the default editor width is only 640px. So they are leaving up to themes for now to control the editor width (and of course the front-end width). But without the same body classes that indicate the page template, this is impossible to do with CSS alone.

Does anyone have any details as to how a theme might go about doing this? Like what editor filters to use and some sample JS to do it? But of course I really want this in core GB so that its easy for themes to handle it with simple CSS.

@webmandesign
Copy link
Contributor

@timnicholson Please see my JS solution you can currently work with (though it seems to have a flaw I haven't had time to look at yet...)

@bupotalovo bupotalovo mentioned this issue Dec 9, 2018
Closed
@manake manake mentioned this issue Dec 14, 2018
Closed
@strarsis
Copy link
Contributor

Based on the code here, I made a little tutorial (sage9 based theme): https://discourse.roots.io/t/gutenberg-body-class-elements-by-template/15310

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
[Type] Plugin Interoperability Incompatibilities between a specific plugin and the block editor. Close with workaround notes. [Type] Question Questions about the design or development of the editor.
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
5 participants
@danielbachhuber @timnicholson @webmandesign @ktmn @strarsis