WordPress Plugin - add page-specific CSS block to page edit screen (currently breaks on Gutenberg)

mp-page-css.php

<?php defined('ABSPATH') or die;

/**
 * Plugin Name: Page-Specific CSS
 * Plugin URI: https://mindpalette.com
 * Description: Add meta box for page-specific CSS using CodeMirror
 * Version: 1.0
 * Author: Nate Baldwin
 * Author URI: https://mindpalette.com
 */

namespace MPPageCSS;

class PageCSS {

  protected $posttype = null;
  protected $prefix = null;
  protected $textdomain = null;
  protected $nonce_name = null;
  
  // class constructor method
  public function __construct() {
    
    // define shared properties
    $this->posttypes = array( 'page' );
    $this->textdomain = 'mppagecss';
    $this->prefix = $this->textdomain;
    $this->nonce_name = $this->prefix.'_metanonce';
    
    // action hooks
    add_action( 'add_meta_boxes', array( $this, 'addInfoBox' ) );
    add_action( 'save_post', array( $this, 'saveInfoBox' ), 1, 2 );
    add_action( 'wp_enqueue_scripts', array( $this, 'applyPageCSS' ) , 26 );
    
  }
  
  // action hook to add metabox to post type edit screen
  public function addInfoBox() {
    add_meta_box( 
      $this->prefix.'_info_box',
      __( 'Page-Specific CSS', $this->textdomain ),
      array( $this, 'addInfoBoxContent' ),
      $this->posttypes,
      'normal',
      'default'
    );
  }
  
  // callback function for loading custom metabox content
  public function addInfoBoxContent( $post ) {
    
    // html output
    wp_nonce_field( $this->nonce_name, $this->nonce_name.'_input' );
    $f = $this->prefix.'_pagecss';
    echo '<p><textarea name="'.$f.'" id="'.$f.'" class="widefat" cols="60" rows="15" />'
      .esc_html( get_post_meta( $post->ID, $f, true ) )
      .'</textarea></p>';
    
    // apply code editor
    $settings = wp_enqueue_code_editor( array( 'type' => 'text/css' ) );
    if (false !== $settings) {
      wp_add_inline_script(
        'code-editor',
        sprintf(
          'jQuery( function() { wp.codeEditor.initialize( "'.$f.'", %s ); } );',
          wp_json_encode( $settings )
        )
      );
    }
    
  }
  
  // action hook to save custom info box fields
  public function saveInfoBox( $post_id, $post ) {
    
    // validate submission and post type
    $post_type = get_post_type_object( $post->post_type );
    if (
      !in_array( $post->post_type, $this->posttypes )
      || !isset( $_POST[$this->nonce_name.'_input'] ) 
      || !wp_verify_nonce( $_POST[$this->nonce_name.'_input'], $this->nonce_name )
      || !current_user_can( $post_type->cap->edit_post, $post_id )
    ) return $post_id;
    
    // save basic data fields
    $fields = array( 'pagecss' );
    foreach ( $fields as $fKey ) {
      $f = $this->prefix.'_'.$fKey;
      $new_meta_value = ( isset( $_POST[$f] ) ? $_POST[$f] : '' );
      $meta_key = $f;
      $meta_value = get_post_meta( $post_id, $meta_key, true );
      if ( $new_meta_value != '' ) {
        if ( $meta_value == '' )
          add_post_meta( $post_id, $meta_key, $new_meta_value, true );
        else update_post_meta( $post_id, $meta_key, $new_meta_value );
      } else if ( $meta_value ) {
        delete_post_meta( $post_id, $meta_key, $meta_value );
      }
    }
    
    return $post_id;
  }
  
  // apply custom meta description
  public function applyPageCSS() {
    if ( $queried_object = get_queried_object() ) {
      if ( $postID = property_exists( $queried_object, 'ID' ) ? $queried_object->ID : null ) {
        $pageCSS = ( $postID ) ? get_post_meta( $postID, $this->prefix.'_pagecss', true ) : null;
        if ( $pageCSS ) {
          wp_register_style( $this->textdomain.'-style', false );
          wp_enqueue_style( $this->textdomain.'-style' );
          wp_add_inline_style( $this->textdomain.'-style', $pageCSS );
        }
      }
    }
  }
  
}

$load = new PageCSS();