How To Apply Different Styles To All Blocks Based on Post Meta Value?

I was able to solve this problem by using the admin_body_class filter to add a class name to the <body> element of the admin page, and writing selectors for that class in my stylesheet.

add_filter( 'admin_body_class', 'add_status_classes' );

function add_status_classes( $classes ) {
  $post_meta = get_post_meta( get_the_ID() );
  $is_darkmode = $post_meta['_is_post_dark_mode'];
  if ( $is_darkmode ) {
    $classes = $classes . ' dark-editor-mode';
  }
  return $classes;
}

/* Normal Styles */
p:after {
  content: "Walking on sunshine!";
}
/* Styles when custom post meta option is true */
.dark-editor-mode p {
  content: "It sure is dark in here!";
}

Again, the dark mode is just a simple example, since my real use case is too complex to explain here, but the concept is the same.

Unfortunately, the drawback of this solution is that the editor has to be refreshed after the user changes the post meta setting, since the class isn’t tied to a JavaScript store. If anyone knows how to hook into a data store that controls a classname on a parent element to the editor panel in Gutenberg, please add to my answer.

Related Posts: