Initial commit to allow body classes to be sent from PHP and properly…

… applied to iframe. Template class is modified when swapping templates.

lib/block-editor-settings.php

@@ -159,6 +159,34 @@ function gutenberg_get_block_editor_settings( $settings ) {
 			);
 	}
 
+	$body_classes = array();
+
+	$post = get_post();
+	if ( $post ) {
+		$body_classes[] = 'post-type-' . sanitize_html_class( $post->post_type );
+		$body_classes[] = 'post-status-' . sanitize_html_class( $post->post_status );
+
+		if ( post_type_supports( $post->post_type, 'post-formats' ) ) {
+			$post_format = get_post_format( $post );
+			if ( $post_format && ! is_wp_error( $post_format ) ) {
+				$body_classes[] = 'post-format-' . sanitize_html_class( $post_format );
+			} else {
+				$body_classes[] = 'post-format-standard';
+			}
+		}
+
+		$page_template = get_page_template_slug( $post );
+
+		if ( false !== $page_template ) {
+			$page_template = empty( $page_template ) ? 'default' : str_replace( '.', '-', basename( $page_template, '.php' ) );
+			$body_classes[] = 'page-template-' . sanitize_html_class( $page_template );
+		}
+	}
+
+	$body_classes[] = 'locale-' . sanitize_html_class( strtolower( str_replace( '_', '-', get_user_locale() ) ) );
+
+	$settings['bodyClasses'] = $body_classes;
+
 	return $settings;
 }
 add_filter( 'block_editor_settings_all', 'gutenberg_get_block_editor_settings', 0 );

packages/block-editor/src/components/iframe/index.js

@@ -16,7 +16,7 @@ import {
 import { __ } from '@wordpress/i18n';
 import { useMergeRefs, useRefEffect, useDisabled } from '@wordpress/compose';
 import { __experimentalStyleProvider as StyleProvider } from '@wordpress/components';
-import { useSelect } from '@wordpress/data';
+import { useSelect, dispatch } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -118,7 +118,11 @@ function Iframe( {
 	const { styles = '', scripts = '' } = resolvedAssets;
 	/** @type {[Document, import('react').Dispatch<Document>]} */
 	const [ iframeDocument, setIframeDocument ] = useState();
-	const [ bodyClasses, setBodyClasses ] = useState( [] );
+	const bodyClasses = useSelect( ( select ) => {
+		const { getEditorSettings } = select( 'core/editor' );
+		const editorSettings = getEditorSettings();
+		return editorSettings.bodyClasses;
+	 }, [] );
 	const clearerRef = useBlockSelectionClearer();
 	const [ before, writingFlowRef, after ] = useWritingFlow();
 
@@ -140,17 +144,20 @@ function Iframe( {
 
 			clearerRef( documentElement );
 
-			// Ideally ALL classes that are added through get_body_class should
-			// be added in the editor too, which we'll somehow have to get from
-			// the server in the future (which will run the PHP filters).
-			setBodyClasses(
+			// Initial body classes are provided by block-editor-settings.php and may include:
+			// post-type, post-status, post-format, page-template, and locale. 
+			// That can be filtered via block_editor_settings_all on the server.
+			// below we update the core/editor settings to include some additional classes
+			const allBodyClasses = bodyClasses.concat(
 				Array.from( ownerDocument.body.classList ).filter(
 					( name ) =>
 						name.startsWith( 'admin-color-' ) ||
 						name.startsWith( 'post-type-' ) ||
 						name === 'wp-embed-responsive'
 				)
 			);
+			const allBodyClasesSet = new Set( allBodyClasses );
+			dispatch( 'core/editor' ).updateEditorSettings( { bodyClasses: Array.from( allBodyClasesSet ) } );
 
 			contentDocument.dir = ownerDocument.dir;
 

packages/editor/src/components/post-template/reset-default-template.js

@@ -3,7 +3,7 @@
  */
 import { MenuItem } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { useDispatch } from '@wordpress/data';
+import { useSelect, useDispatch } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
 
 /**
@@ -20,6 +20,12 @@ export default function ResetDefaultTemplate( { onClick } ) {
 	const allowSwitchingTemplate = useAllowSwitchingTemplates();
 	const { postType, postId } = useEditedPostContext();
 	const { editEntityRecord } = useDispatch( coreStore );
+	const bodyClasses = useSelect( ( select ) => {
+			const { getEditorSettings } = select( 'core/editor' );
+			const editorSettings = getEditorSettings();
+			return editorSettings.bodyClasses;
+		 }, [] );
+	const { updateEditorSettings } = useDispatch( 'core/editor' );
 	// The default template in a post is indicated by an empty string.
 	if ( ! currentTemplateSlug || ! allowSwitchingTemplate ) {
 		return null;
@@ -34,6 +40,18 @@ export default function ResetDefaultTemplate( { onClick } ) {
 					{ template: '' },
 					{ undoIgnore: true }
 				);
+				let hasPageTemplateClass = false;
+				const updatedBodyClasses = bodyClasses.map( className => {
+					if ( className.startsWith( 'page-template-' )) {
+						hasPageTemplateClass = true;
+						return `page-template-default`;
+					}
+					return className;
+				});
+				if ( ! hasPageTemplateClass ) {
+					updatedBodyClasses.push( `page-template-default` );
+				}
+				updateEditorSettings( { bodyClasses: updatedBodyClasses } );
 				onClick();
 			} }
 		>

packages/editor/src/components/post-template/swap-template-button.js

@@ -6,7 +6,7 @@ import { decodeEntities } from '@wordpress/html-entities';
 import { __experimentalBlockPatternsList as BlockPatternsList } from '@wordpress/block-editor';
 import { MenuItem, Modal } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { useDispatch } from '@wordpress/data';
+import { useSelect, useDispatch } from '@wordpress/data';
 import { store as coreStore } from '@wordpress/core-data';
 import { parse } from '@wordpress/blocks';
 
@@ -20,6 +20,12 @@ export default function SwapTemplateButton( { onClick } ) {
 	const { postType, postId } = useEditedPostContext();
 	const availableTemplates = useAvailableTemplates( postType );
 	const { editEntityRecord } = useDispatch( coreStore );
+	const bodyClasses = useSelect( ( select ) => {
+		const { getEditorSettings } = select( 'core/editor' );
+		const editorSettings = getEditorSettings();
+		return editorSettings.bodyClasses;
+	 }, [] );
+	const { updateEditorSettings } = useDispatch( 'core/editor' );
 	if ( ! availableTemplates?.length ) {
 		return null;
 	}
@@ -31,6 +37,18 @@ export default function SwapTemplateButton( { onClick } ) {
 			{ template: template.name },
 			{ undoIgnore: true }
 		);
+		let hasPageTemplateClass = false;
+		const updatedBodyClasses = bodyClasses.map( className => {
+			if ( className.startsWith( 'page-template-' )) {
+				hasPageTemplateClass = true;
+				return `page-template-${ template.name }`;
+			}
+			return className;
+		});
+		if ( ! hasPageTemplateClass ) {
+			updatedBodyClasses.push( `page-template-${ template.name }` );
+		}
+		updateEditorSettings( { bodyClasses: updatedBodyClasses } );
 		setShowModal( false ); // Close the template suggestions modal first.
 		onClick();
 	};