diff --git a/packages/drupal/gutenberg_blocks/gutenberg_blocks.module b/packages/drupal/gutenberg_blocks/gutenberg_blocks.module
index bdc8a66bc..970ad815f 100644
--- a/packages/drupal/gutenberg_blocks/gutenberg_blocks.module
+++ b/packages/drupal/gutenberg_blocks/gutenberg_blocks.module
@@ -66,6 +66,9 @@ function gutenberg_blocks_form_node_form_alter(&$form, FormStateInterface $form_
       'label' => $form->label(),
     ], $webforms);
     $form['#attached']['drupalSettings']['customGutenbergBlocks']['forms'] = array_values($forms);
+
+    // Bind the Gutenberg html edit features to a permission.
+    $form['#attached']['drupalSettings']['gutenberg']['supportsHtml'] = Drupal::currentUser()->hasPermission('edit gutenberg html');
   }
 }
 
diff --git a/packages/drupal/gutenberg_blocks/gutenberg_blocks.permissions.yml b/packages/drupal/gutenberg_blocks/gutenberg_blocks.permissions.yml
new file mode 100644
index 000000000..4df10ccea
--- /dev/null
+++ b/packages/drupal/gutenberg_blocks/gutenberg_blocks.permissions.yml
@@ -0,0 +1,4 @@
+edit gutenberg html:
+  title: 'Edit Gutenberg HTML'
+  description:
+    'Use the block level Edit as HTML, and the editor level Code editor.'
diff --git a/packages/drupal/gutenberg_blocks/js/customisations.ts b/packages/drupal/gutenberg_blocks/js/customisations.ts
index 255f8a7c5..b8e640859 100644
--- a/packages/drupal/gutenberg_blocks/js/customisations.ts
+++ b/packages/drupal/gutenberg_blocks/js/customisations.ts
@@ -1,3 +1,8 @@
+(() => {
+  window.DrupalGutenberg.defaultSettings.codeEditingEnabled =
+    drupalSettings.gutenberg.supportsHtml;
+})();
+
 drupalSettings.gutenberg._listeners.init.push(
   // Remove some of the formatting options
   function () {
diff --git a/packages/drupal/gutenberg_blocks/js/filters/html-edit.tsx b/packages/drupal/gutenberg_blocks/js/filters/html-edit.tsx
new file mode 100644
index 000000000..0b912dc73
--- /dev/null
+++ b/packages/drupal/gutenberg_blocks/js/filters/html-edit.tsx
@@ -0,0 +1,12 @@
+import { addFilter } from 'wordpress__hooks';
+
+addFilter(
+  'blocks.registerBlockType',
+  'custom/supportsHtml',
+  (settings: { supports: { html: boolean } }) => {
+    if (settings.supports) {
+      settings.supports.html = drupalSettings.gutenberg.supportsHtml;
+    }
+    return settings;
+  },
+);
diff --git a/packages/drupal/gutenberg_blocks/js/filters/list.tsx b/packages/drupal/gutenberg_blocks/js/filters/list.tsx
index 6ac8c4216..2c0595994 100644
--- a/packages/drupal/gutenberg_blocks/js/filters/list.tsx
+++ b/packages/drupal/gutenberg_blocks/js/filters/list.tsx
@@ -5,8 +5,6 @@ import { PanelBody, SelectControl } from 'wordpress__components';
 import { createHigherOrderComponent } from 'wordpress__compose';
 import { addFilter } from 'wordpress__hooks';
 
-const { t: __ } = Drupal;
-
 addFilter(
   'blocks.registerBlockType',
   'custom/list',
@@ -41,14 +39,17 @@ addFilter<ComponentType>(
           <BlockEdit {...props} />
           {isSelected && name === 'core/list' && !ordered ? (
             <InspectorControls>
-              <PanelBody title={__('List style')}>
+              <PanelBody title={Drupal.t('List style')}>
                 <SelectControl
                   value={props.attributes.customListStyle}
                   options={[
-                    { label: __('Bullets'), value: '' },
-                    { label: __('Arrows'), value: 'arrows' },
-                    { label: __('Checkmarks'), value: 'checkmarks' },
-                    { label: __('Question marks'), value: 'question-marks' },
+                    { label: Drupal.t('Bullets'), value: '' },
+                    { label: Drupal.t('Arrows'), value: 'arrows' },
+                    { label: Drupal.t('Checkmarks'), value: 'checkmarks' },
+                    {
+                      label: Drupal.t('Question marks'),
+                      value: 'question-marks',
+                    },
                   ]}
                   onChange={(customListStyle: string) => {
                     setAttributes({
diff --git a/packages/drupal/gutenberg_blocks/js/index.ts b/packages/drupal/gutenberg_blocks/js/index.ts
index 777769b0e..2364cba10 100644
--- a/packages/drupal/gutenberg_blocks/js/index.ts
+++ b/packages/drupal/gutenberg_blocks/js/index.ts
@@ -7,6 +7,7 @@ import './blocks/form';
 import './blocks/image-teaser';
 import './blocks/image-teasers';
 import './blocks/image-with-text';
+import './filters/html-edit';
 import './filters/list';
 import './blocks/cta';
 import './blocks/quote';
@@ -24,6 +25,10 @@ import { ComponentType } from 'react';
 /* eslint-disable */
 
 declare global {
+  interface Window {
+    DrupalGutenberg: any;
+  }
+
   const Drupal: {
     behaviors: any;
     t: (s: string, t?: object) => string;
@@ -43,6 +48,7 @@ declare global {
   const drupalSettings: {
     gutenberg: any;
     preview: any;
+    supportsHtml: boolean;
     path: {
       baseUrl: string;
       pathPrefix: string;