{"id":124581,"date":"2026-07-23T12:51:14","date_gmt":"2026-07-23T12:51:14","guid":{"rendered":"https:\/\/make.wordpress.org\/core\/?p=124581"},"modified":"2026-07-23T12:51:15","modified_gmt":"2026-07-23T12:51:15","slug":"editor-components-updates-in-wordpress-7-1","status":"publish","type":"post","link":"https:\/\/make.wordpress.org\/core\/2026\/07\/23\/editor-components-updates-in-wordpress-7-1\/","title":{"rendered":"Editor components updates in WordPress 7.1"},"content":{"rendered":"<nav aria-label=\"Table of Contents\" class=\"wp-block-table-of-contents\"><ol><li><a class=\"wp-block-table-of-contents__entry\" href=\"#40px-default-size-for-form-controls\">40px default size for form controls<\/a><ol><li><a class=\"wp-block-table-of-contents__entry\" href=\"#what-changed\">What changed<\/a><\/li><li><a class=\"wp-block-table-of-contents__entry\" href=\"#what-to-do\">What to do<\/a><\/li><li><a class=\"wp-block-table-of-contents__entry\" href=\"#affected-components\">Affected components<\/a><\/li><li><a class=\"wp-block-table-of-contents__entry\" href=\"#not-included\">Not included<\/a><\/li><\/ol><\/li><li><a class=\"wp-block-table-of-contents__entry\" href=\"#changes-for-consumers-styling-with-emotion\">Changes for consumers styling with Emotion<\/a><\/li><li><a class=\"wp-block-table-of-contents__entry\" href=\"#remove-navigation\">Remove Navigation<\/a><\/li><li><a class=\"wp-block-table-of-contents__entry\" href=\"#remove-experimentalapplyvaluetosides\">Remove __experimentalApplyValueToSides<\/a><\/li><\/ol><\/nav>\n\n\n<h2 id=\"40px-default-size-for-form-controls\" class=\"wp-block-heading\">40px default size for form controls<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Starting in WordPress 7.1, <code>@wordpress\/components<\/code> form controls use a 40px default height unconditionally. The opt-in <code>__next40pxDefaultSize<\/code> prop is no longer needed and has no runtime effect when passed.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This completes the rollout that followed the <a href=\"https:\/\/make.wordpress.org\/core\/2025\/03\/25\/updates-to-user-interface-components-in-wordpress-6-8\/\">soft deprecation<\/a> in WordPress 6.8. The prop was introduced in WordPress 6.7 so plugins could opt in early. Since 6.8, components that had not opted in logged a console warning.<\/p>\n\n\n\n<h3 id=\"what-changed\" class=\"wp-block-heading\">What changed<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Affected components now render at 40px by default without the prop.<\/li>\n\n\n\n<li>Passing <code>__next40pxDefaultSize<\/code> is ignored at runtime.<\/li>\n\n\n\n<li>Passing <code>__next40pxDefaultSize={ false }<\/code> no longer opts out to the previous 36px height.<\/li>\n\n\n\n<li>On <code>BorderBoxControl<\/code>, <code>BorderControl<\/code>, <code>FontSizePicker<\/code>, and <code>ToggleGroupControl<\/code>, the <code>size<\/code> prop is also deprecated and has no effect.<\/li>\n<\/ul>\n\n\n\n<h3 id=\"what-to-do\" class=\"wp-block-heading\">What to do<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Remove <code>__next40pxDefaultSize<\/code> from your component usage. No replacement prop is needed.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">If you were passing <code>size=\"__unstable-large\"<\/code> on the components listed only to get 40px height, remove that as well.<\/p>\n\n\n\n<h3 id=\"affected-components\" class=\"wp-block-heading\">Affected components<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">For links to the code changes, see tracking issue <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/issues\/65751\">#65751<\/a>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong><code>@wordpress\/components<\/code><\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><code>BorderBoxControl<\/code>, <code>BorderControl<\/code>, <code>BoxControl<\/code>, <code>ComboboxControl<\/code>, <code>CustomSelectControl<\/code>, <code>FontSizePicker<\/code>, <code>FormFileUpload<\/code>, <code>FormTokenField<\/code>, <code>FocalPointPicker<\/code>, <code>InputControl<\/code>, <code>NumberControl<\/code>, <code>QueryControls<\/code>, <code>Radio<\/code>, <code>RangeControl<\/code>, <code>SearchControl<\/code>, <code>SelectControl<\/code>, <code>TextControl<\/code>, <code>ToggleGroupControl<\/code>, <code>TreeSelect<\/code>, <code>UnitControl<\/code><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong><code>@wordpress\/block-editor<\/code><\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><code>FontAppearanceControl<\/code>, <code>FontFamilyControl<\/code>, <code>LetterSpacingControl<\/code>, <code>LineHeightControl<\/code><\/p>\n\n\n\n<h3 id=\"not-included\" class=\"wp-block-heading\">Not included<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">This rollout covers form controls only. <code>Button<\/code> still uses the opt-in prop and is unchanged.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\">\n\n\n\n<h2 id=\"changes-for-consumers-styling-with-emotion\" class=\"wp-block-heading\">Changes for consumers styling with Emotion<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">A long-running <span tabindex='0' class='glossary-item-container'>migration<span class='glossary-item-hidden-content'><span class='glossary-item-header'>Migration<\/span> <span class='glossary-item-description'>Moving the code, database and media files for a website site from one server to another. Most typically done when changing hosting companies.<\/span><\/span><\/span> has kickstarted in the <code>@wordpress\/components<\/code> package, with the goal of refactoring all <a href=\"https:\/\/emotion.sh\/\">Emotion<\/a>-based styles to SCSS modules.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Most consumers should not need to change anything, but if you do use Emotion to style your components, there are two migration details for code that relied on Emotion-specific behavior:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>View<\/code> still accepts the legacy <code>css<\/code> prop for type compatibility, but it is now a no-op. Use <code>style<\/code> for inline styles or <code>className<\/code> for <span tabindex='0' class='glossary-item-container'>CSS<span class='glossary-item-hidden-content'><span class='glossary-item-header'>CSS<\/span> <span class='glossary-item-description'>Cascading Style Sheets.<\/span><\/span><\/span>-based styling.<\/li>\n\n\n\n<li>When using <code>cx()<\/code> with Emotion <code>css()<\/code> fragments, compose source-order-dependent fragments into a single <code>css()<\/code> call before passing them to <code>cx()<\/code>. Passing separate fragments can change override order now that <code>View<\/code> no longer renders through Emotion.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Example:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\nconst classes = cx(\n\tcss(\n\t\tbaseStyles,\n\t\tcondition &amp;&amp; overrideStyles\n\t),\n\tclassName\n);\n<\/pre><\/div>\n\n\n<p class=\"wp-block-paragraph\">This keeps shorthand\/longhand overrides and nested-selector overrides in one generated class, preserving the intended cascade order.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The affected components are:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>Divider<\/code><\/li>\n\n\n\n<li><code>Surface<\/code><\/li>\n\n\n\n<li><code>Truncate<\/code><\/li>\n\n\n\n<li><code>View<\/code><\/li>\n\n\n\n<li><code>Flex<\/code><\/li>\n\n\n\n<li><code>Spacer<\/code><\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">The list is expected to grow as the migration continues. Follow <a href=\"https:\/\/github.com\/WordPress\/gutenberg\/issues\/66806\">#66806<\/a> for more details.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\">\n\n\n\n<h2 id=\"remove-navigation\" class=\"wp-block-heading\">Remove <code>Navigation<\/code><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Starting in WordPress 7.1, the deprecated <code>Navigation<\/code> component and its subcomponents are removed from <code>@wordpress\/components<\/code> (<a href=\"https:\/\/github.com\/WordPress\/gutenberg\/pull\/78529\">#78529<\/a>).<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The component has been deprecated since WordPress 6.8. Use the <code>Navigator<\/code> component instead.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\">\n\n\n\n<h2 id=\"remove-experimentalapplyvaluetosides\" class=\"wp-block-heading\">Remove <code>__experimentalApplyValueToSides<\/code><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Starting in WordPress 7.1, the <code>__experimentalApplyValueToSides<\/code> utility is removed from <code>@wordpress\/components<\/code> (<a href=\"https:\/\/github.com\/WordPress\/gutenberg\/pull\/78528\">#78528<\/a>).<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The utility has been deprecated since WordPress 6.8. <code>BoxControl<\/code> itself is unaffected.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\">\n\n\n\n<p class=\"has-text-align-right wp-block-paragraph\"><em>Co-authored by <a href=\"https:\/\/profiles.wordpress.org\/0mirka00\/\" class=\"mention\"><span class=\"mentions-prefix\">@<\/span>0mirka00<\/a> and <a href=\"https:\/\/profiles.wordpress.org\/mciampini\/\" class=\"mention\"><span class=\"mentions-prefix\">@<\/span>mciampini<\/a><\/em>.<\/p>\n\n\n\n<p class=\"has-text-align-right wp-block-paragraph\"><em>Props to <a href=\"https:\/\/profiles.wordpress.org\/aduth\/\" class=\"mention\"><span class=\"mentions-prefix\">@<\/span>aduth<\/a> for review.<\/em><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n<p class=\"o2-appended-tags\"><a href=\"https:\/\/make.wordpress.org\/core\/tag\/7-1\/\" class=\"tag\"><span class=\"tag-prefix\">#<\/span>7-1<\/a>, <a href=\"https:\/\/make.wordpress.org\/core\/tag\/dev-notes\/\" class=\"tag\"><span class=\"tag-prefix\">#<\/span>dev-notes<\/a>, <a href=\"https:\/\/make.wordpress.org\/core\/tag\/dev-notes-7-1\/\" class=\"tag\"><span class=\"tag-prefix\">#<\/span>dev-notes-7-1<\/a><\/p><nav class='o2-post-footer-actions'><ul class='o2-post-footer-action-row'><li class='o2-post-footer-action'><a href=\"https:\/\/login.wordpress.org\/?redirect_to=https%3A%2F%2Fmake.wordpress.org%2Fcore%2F2026%2F07%2F23%2Feditor-components-updates-in-wordpress-7-1%2F%23respond&#038;locale=en_US\" title=\"Login to Reply\"  class=\"genericon  genericon-reply\"  data-action=\"login-to-reply\"  data-actionstate=\"default\" >Login to Reply<\/a><\/li><\/ul><div class='o2-post-footer-action-likes'><\/div><ul class='o2-post-footer-action-row'><\/ul><\/nav>","protected":false},"excerpt":{"rendered":"<p>40px default size for form controls Starting in WordPress 7.1, @wordpress\/components form controls use a 40px default height unconditionally. The opt-in __next40pxDefaultSize prop is no longer needed and has no runtime effect when passed. This completes the rollout that followed the soft deprecation in WordPress 6.8. The prop was introduced in WordPress 6.7 so plugins [&hellip;]<\/p>\n","protected":false},"author":16158805,"featured_media":0,"comment_status":"open","ping_status":"","sticky":false,"template":"","format":"standard","meta":{"advanced_seo_description":"","jetpack_seo_html_title":"","jetpack_seo_noindex":false,"jetpack_seo_schema_type":"","_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_post_was_ever_published":false},"categories":[1175],"tags":[5885,1443,5894],"class_list":["post-124581","post","type-post","status-publish","format-standard","hentry","category-general","tag-7-1","tag-dev-notes","tag-dev-notes-7-1","mentions-0mirka00","mentions-aduth","mentions-mciampini","author-0mirka00"],"revision_note":"","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p2AvED-wpn","jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/make.wordpress.org\/core\/wp-json\/wp\/v2\/posts\/124581","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/make.wordpress.org\/core\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/make.wordpress.org\/core\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/make.wordpress.org\/core\/wp-json\/wp\/v2\/users\/16158805"}],"replies":[{"embeddable":true,"href":"https:\/\/make.wordpress.org\/core\/wp-json\/wp\/v2\/comments?post=124581"}],"version-history":[{"count":4,"href":"https:\/\/make.wordpress.org\/core\/wp-json\/wp\/v2\/posts\/124581\/revisions"}],"predecessor-version":[{"id":124824,"href":"https:\/\/make.wordpress.org\/core\/wp-json\/wp\/v2\/posts\/124581\/revisions\/124824"}],"wp:attachment":[{"href":"https:\/\/make.wordpress.org\/core\/wp-json\/wp\/v2\/media?parent=124581"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/make.wordpress.org\/core\/wp-json\/wp\/v2\/categories?post=124581"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/make.wordpress.org\/core\/wp-json\/wp\/v2\/tags?post=124581"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}