WordPress 7.1 Editor Changes: Iframe, Blocks & DataViews

Most of WordPress 7.1’s editor work is quiet. One change is not: the post editor is always iframed. In 7.0 the iframe dropped if any inserted block was below API version 3. In 7.1 that escape hatch is gone — theme type, registered API versions, and legacy meta boxes no longer matter.

If you skipped the 7.0 breaking-changes tutorial, read this one anyway. The compatibility story just got stricter.

Always-iframed post editor

Site editor, template editor, and device previews have been iframed for years. The post editor was the holdout so older blocks kept working.

Starting in 7.1 the post editor is iframed regardless of:

• theme type (classic vs block theme)
• block API versions of registered blocks
• block API versions of blocks in the content
• whether the site still registers legacy meta boxes

Gutenberg 22.6 already forced this when the plugin was active, so many Gutenberg-plugin sites have been living in this world. Core caught up. Details: Iframed Editor Changes in WordPress 7.1 and Gutenberg PR 74042.

What to fix in your blocks

Most blocks already work. Failures share one cause: global document / window.

document.querySelector( '.wp-block-my-plugin' )

el.ownerDocument.querySelector( '.wp-block-my-plugin' )

window.getComputedStyle( node )

node.ownerDocument.defaultView.getComputedStyle( node )

document.addEventListener( 'click', handler )

useRefEffect to attach on the canvas node and clean up on unmount

Canonical migration notes: Technical considerations for the iframe editor.

New block supports

WordPress 7.1 adds opt-in design controls through block metadata:

• background.gradient — background gradient support
• Minimum width — min-width block support

Declare them in block.json supports like any other design tool. The Custom HTML block also improves: supported blocks remain editable inside its preview (dev note).

Query Loop gains an option to exclude the current post (#65373). Pseudo-state styles are no longer applied to the default state (#64838). WP_Block_Type_Registry::register() _doing_it_wrong() messages now include context (#65039).

DataViews, DataForm, and View Config

DataViews and DataForm keep growing. 7.1 adds View Config so you can control which Site Editor screens and layouts are available.

If you build custom data-driven UIs in the editor (pattern lists, product tables, custom post type browsers), read Filtering Site Editor Screens in WordPress 7.1. The practical effect: you can hide or constrain views instead of shipping a fork of the Site Editor chrome.

Editor component library updates (new features, behaviour changes, migrations): Editor components updates and Miscellaneous Editor Changes.

Persistent admin bar

The toolbar now stays available while navigating supported editor screens — front end, wp-admin, Site Editor, Block Editor.

For plugin authors: the Site Editor had no “exit fullscreen” mode, so a persistent toolbar there is new. If you add admin-bar nodes, test them in the Site Editor. Hide them on editor screens if they do not belong:

add_action( 'admin_bar_menu', function ( WP_Admin_Bar $wp_admin_bar ) {
  $screen = function_exists( 'get_current_screen' ) ? get_current_screen() : null;

  if ( $screen && $screen->is_block_editor() ) {
      return; // skip this node in Post + Site Editor
  }

  $wp_admin_bar->add_node( [
      'id'    => 'my-plugin',
      'title' => 'My Plugin',
      'href'  => admin_url( 'admin.php?page=my-plugin' ),
  ] );
}, 100 );

Dev note: Consistent navigation in WordPress 7.1 with persistent toolbar.

Accessibility in the editor chrome

Admin colour-scheme contrast for editor chrome improved (#65382). Core also ships a shared accessible tooltip mechanism (#51006) used on Login “Remember Me” and metabox order buttons — stop using title attributes for supplementary UI. See Introducing name and informational tool tips and Accessibility Improvements in WordPress 7.1.

Post list tables now expose hierarchical relationships to assistive tech (row headers, #64932).

import { useRefEffect } from '@wordpress/compose';

const ref = useRefEffect( ( node ) => {
  const { ownerDocument } = node;
  const { defaultView } = ownerDocument;

  const onClick = () => {
      // canvas-scoped work
  };

  ownerDocument.addEventListener( 'click', onClick );
  return () => ownerDocument.removeEventListener( 'click', onClick );
}, [] );

Next: Global Styles, SVG Icons & Design System — the styling and icon APIs that sit next to these editor changes.