Gutenberg: Add page-template/post-template value to body class

[iamzozo]

When switching page or post template, it would be good to also add this value to the body class on the admin screen.

I'm working on a theme, and I want to modify the editor layout (widths) and styles for the block content (typo), according to the theme.

[websevendev]

Related: #7810 (I don't think they're adding it)

I did it manually by rendering this component into an invisible div I added on Gutenberg page:

class PageTemplateUpdater extends React.Component {
    componentDidUpdate(prevProps) {
        if(prevProps.template) {
            $('body').removeClass('page-template-' + prevProps.template.replace('.php', ''));
        }
        if(this.props.template) {
            $('body').addClass('page-template-' + this.props.template.replace('.php', ''));
        }
    }

    render() {
        return null;
    }
}

const withPageTemplate = wp.compose.createHigherOrderComponent(
    wp.data.withSelect(
        select => {
            const {
                getEditedPostAttribute,
            } = select('core/editor');

            return {
                template: getEditedPostAttribute('template'),
            };
        }
    ),
    'withPageTemplate'
);

export default withPageTemplate(PageTemplateUpdater);

[designsimply]

Closing as a duplicate of https://github.com/WordPress/gutenberg/issues/7810. Thank you so much for the code example @websevendev!

[strarsis]

@websevendev: I am importing your code in the editor JavaScript file that is enqueued for Gutenberg.
But no class is assigned to the body element.
And is it also possible to add a frontpage/home class so the front page can be selected by the theme styles?

[websevendev]

@strarsis As I said, I render this component manually.

The aforementioned code is in, for example, /PageTemplateWatcher/index.js, and in my "main" js file I import it:

import PageTemplateWatcher from './PageTemplateWatcher';

and render it:

document.addEventListener('DOMContentLoaded', () => {
    ReactDOM.render(<PageTemplateWatcher />, document.getElementById('my-root'));
});

And the root is added by PHP, but you could dynamically create it as well:

add_action('admin_footer', function() {
    ?>
    <div id="my-root"></div>
    <?php
});

[strarsis]

@websevendev: Thanks! Eslint complains about missing props validation.
How to add props validation when using Gutenberg factories(?) for components?
3:16 error 'template' is missing in props validation react/prop-types 4:55 error 'template' is missing in props validation react/prop-types 4:64 error 'template.replace' is missing in props validation react/prop-types 6:17 error 'template' is missing in props validation react/prop-types 7:53 error 'template' is missing in props validation react/prop-types 7:62 error 'template.replace' is missing in props validation react/prop-types

Edit: Right, I have to add the classes in theme using the admin_body_class filter.
```php
/**

• Admin body template class
  */
  function admin_body_template_class( $str_classes ) {
  global $post;
  $template_slug = get_page_template_slug( $post );
  $classes = explode(' ', $str_classes);
  $classes[] = $template_slug;
  $new_str_classes = join(' ', $classes);
  return $new_str_classes;
  }
  add_filter( 'admin_body_class', 'admin_body_template_class' );
  ````

IMHO it would be great if this code is added to Gutenberg core or at least
an extension that can be readily loaded by themes that need to select specific templates/pages/posts.

[strarsis]

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