Global Styles, SVG Icons & Design System in WordPress 7.1

WordPress 7.1’s visual APIs are easy to skip in a Field Guide full of REST tickets. They are the parts theme authors and plugin UI will actually ship against: Global Styles grows up, SVG icons become a public API, and the Design System gets a theming foundation.

• Responsive styles
• Text shadow
• SVG Icon API
• Design tokens

Global Styles: more expression, same system

7.1 keeps styling inside Global Styles instead of inviting one-off CSS. Three headlines:

1. Responsive block styles and configurable viewports — style variations can target viewports you configure, not a hard-coded mobile/desktop split. Dev note.
2. Pseudo and custom style states — hover, focus, and custom states live in the style engine. Dev note. Pair this with Core ticket #64838: pseudo-state styles must not leak onto the default state.
3. Text shadow — Text Shadow Support in Global Styles.

SVG Icon API

WordPress 7.0 bundled SVG icons for the editor and the core/icon block. 7.1 makes that a public API: collections, icons, PHP render, REST.

Every icon is collection/icon-name. Core registers the core collection. Your plugin registers its own so core/plus never collides with my-plugin/plus.

add_action( 'init', function () {
  wp_register_icon_collection( 'my-plugin', [
      'label'       => __( 'My Plugin Icons', 'my-plugin' ),
      'description' => __( 'Icons provided by My Plugin.', 'my-plugin' ),
  ] );

  wp_register_icon(
      'my-plugin/star',
      [
          'label'   => __( 'Star', 'my-plugin' ),
          'content' => '<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 2l3 7h7l-5.5 4.5L18 21l-6-4-6 4 1.5-7.5L2 9h7z"/></svg>',
      ]
  );
} );

echo wp_get_icon( 'my-plugin/star', [
  'width'  => 24,
  'height' => 24,
] );

Rules that bite:

• Collection names and icon names: start/end with a lowercase letter or digit; middle may include letters, digits, hyphens, underscores.
• Register the collection before the icon. wp_register_icon() returns false + _doing_it_wrong() on bad names, missing collection, duplicates, or missing label.
• Provide either content (inline SVG string) or file_path (absolute .svg path), not both.
• SVG is sanitized with wp_kses against a small allowlist (svg, path, and a few shape elements / attributes). Scripts, event handlers, and inline styles are stripped.
• file_path is lazy: a bad path still “registers.” Empty content shows up later at REST or render time. Verify the file exists on the environment that serves the icon.
• wp_unregister_icon_collection() removes the collection and every icon in it.

The Icon block’s picker can browse by collection. REST endpoints expose collections and icons for the editor and for headless consumers. Full note: Registering and rendering SVG icons in WordPress 7.1.

Design System theming

WordPress 7.1 introduces a theming foundation for the WordPress Design System: design tokens and shared styles so admin / editor UI can apply structured visual themes without each screen inventing colours.

This is the merge of the Design System Theming proposal — foundations in 7.1, broader work still evolving. If you build editor interfaces with Core components, read Design System Theming in WordPress 7.1 before you hard-code hex values.

jQuery UI 1.14.2

Not a design API, but it will restyle or break plugins that still depend on jQuery UI widgets in wp-admin. WordPress 7.1 bundles jQuery UI 1.14.2. Test datepickers, dialogs, and sortable admin UIs. Dev note.

If you can leave jQuery UI, 7.1 is a reminder to schedule that exit. If you cannot, pin your tests to 1.14.2 behaviour and CSS.

Other small API notes

• notify_post_author now has the final say on post-author notifications. If you filter it, your return value is authoritative. Dev note.
• get_file_data() recognises headers prefixed by extra whitespace / comment noise that previously hid them (#42517). Plugin headers you thought were “missing” may suddenly parse.
• Settings API section titles get IDs (#65027) — better skip links and a11y.
• AI Client: execute_abilities() now mirrors has_ability_calls() by checking is_ability_call() before executing (#65504).

add_filter( 'notify_post_author', function ( $notify, $comment_id ) {
  // In 7.1 this return value is final — later core logic will not override it.
  return $notify;
}, 10, 2 );

Next: How to Prepare Your Plugin or Theme for WordPress 7.1 — the checklist, plus everything that did not ship.