- You can use
webpack-src-dir and
output-path option of
wp-scripts build commands to
customize the entry and output points
+This transformation process includes minification, transpilation from modern JavaScript to a version compatible with a wider range of browsers, and bundling of assets for efficient loading. WordPress ultimately enqueues and uses the `build` folder's contents to render the block in the Block Editor and on the front end.
+
+
## Additional resources
-- [File Structure of a Block diagram](https://excalidraw.com/#json=YYpeR-kY1ZMhFKVZxGhMi,mVZewfwNAh_oL-7bj4gmdw)
+- [Diagram featuring the file structure of a block](https://excalidraw.com/#json=YYpeR-kY1ZMhFKVZxGhMi,mVZewfwNAh_oL-7bj4gmdw)
diff --git a/docs/how-to-guides/propagating-updates.md b/docs/how-to-guides/propagating-updates.md
index 5f2861a4e456c6..8079048a47a89c 100644
--- a/docs/how-to-guides/propagating-updates.md
+++ b/docs/how-to-guides/propagating-updates.md
@@ -36,9 +36,9 @@ If needed, one potential workaround for patterns with custom styles is to add a
It is not fool-proof because users can modify the class via the editor UI. However, because this setting is under the "Advanced" panel it is likely to stay intact in most instances. This gives theme authors some CSS control for some pattern types, allowing them to update existing uses. However, it does not prevent users from making massive alterations that cannot be updated.
-### Reusable blocks
+### Synced Patterns
-As the name suggests, these blocks are inherently synced across your site. Keep in mind that there are currently limitations with relying on reusable blocks to handle certain updates since content, HTML structure, and styles will all stay in sync when updates happen. If you require more nuance than that, this is a key element to factor in and a dynamic block might be a better approach.
+As the name suggests, these patterns are inherently synced across your site. Keep in mind that there are currently limitations with relying on synced patterns to handle certain updates since content, HTML structure, and styles will all stay in sync when updates happen. If you require more nuance than that, this is a key element to factor in and a dynamic block might be a better approach.
### Template parts and templates
diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md
index 0708ee342593e3..35cecf6a27e663 100644
--- a/docs/reference-guides/core-blocks.md
+++ b/docs/reference-guides/core-blocks.md
@@ -14,7 +14,7 @@ Display a date archive of your posts. ([Source](https://github.com/WordPress/gut
- **Name:** core/archives
- **Category:** widgets
-- **Supports:** align, spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~
+- **Supports:** align, interactivity (clientNavigation), spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~
- **Attributes:** displayAsDropdown, showLabel, showPostCounts, type
## Audio
@@ -23,7 +23,7 @@ Embed a simple audio player. ([Source](https://github.com/WordPress/gutenberg/tr
- **Name:** core/audio
- **Category:** media
-- **Supports:** align, anchor, spacing (margin, padding)
+- **Supports:** align, anchor, interactivity (clientNavigation), spacing (margin, padding)
- **Attributes:** autoplay, caption, id, loop, preload, src
## Avatar
@@ -32,7 +32,7 @@ Add a user’s avatar. ([Source](https://github.com/WordPress/gutenberg/tree/tru
- **Name:** core/avatar
- **Category:** theme
-- **Supports:** align, color (~~background~~, ~~text~~), spacing (margin, padding), ~~alignWide~~, ~~html~~
+- **Supports:** align, color (~~background~~, ~~text~~), interactivity (clientNavigation), spacing (margin, padding), ~~alignWide~~, ~~html~~
- **Attributes:** isLink, linkTarget, size, userId
## Pattern
@@ -41,7 +41,7 @@ Reuse this design across your site. ([Source](https://github.com/WordPress/guten
- **Name:** core/block
- **Category:** reusable
-- **Supports:** ~~customClassName~~, ~~html~~, ~~inserter~~, ~~renaming~~
+- **Supports:** interactivity (clientNavigation), ~~customClassName~~, ~~html~~, ~~inserter~~, ~~renaming~~
- **Attributes:** overrides, ref
## Button
@@ -51,7 +51,7 @@ Prompt visitors to take action with a button-style link. ([Source](https://githu
- **Name:** core/button
- **Category:** design
- **Parent:** core/buttons
-- **Supports:** anchor, color (background, gradients, text), shadow, spacing (padding), typography (fontSize, lineHeight), ~~alignWide~~, ~~align~~, ~~reusable~~
+- **Supports:** anchor, color (background, gradients, text), interactivity (clientNavigation), shadow, spacing (padding), typography (fontSize, lineHeight), ~~alignWide~~, ~~align~~, ~~reusable~~
- **Attributes:** backgroundColor, gradient, linkTarget, placeholder, rel, tagName, text, textAlign, textColor, title, type, url, width
## Buttons
@@ -60,7 +60,7 @@ Prompt visitors to take action with a group of button-style links. ([Source](htt
- **Name:** core/buttons
- **Category:** design
-- **Supports:** align (full, wide), anchor, layout (default, ~~allowInheriting~~, ~~allowSwitching~~), spacing (blockGap, margin), typography (fontSize, lineHeight), ~~html~~
+- **Supports:** align (full, wide), anchor, interactivity (clientNavigation), layout (default, ~~allowInheriting~~, ~~allowSwitching~~), spacing (blockGap, margin), typography (fontSize, lineHeight), ~~html~~
- **Attributes:**
## Calendar
@@ -69,7 +69,7 @@ A calendar of your site’s posts. ([Source](https://github.com/WordPress/gutenb
- **Name:** core/calendar
- **Category:** widgets
-- **Supports:** align, color (background, link, text), typography (fontSize, lineHeight)
+- **Supports:** align, color (background, link, text), interactivity (clientNavigation), typography (fontSize, lineHeight)
- **Attributes:** month, year
## Categories List
@@ -78,7 +78,7 @@ Display a list of all categories. ([Source](https://github.com/WordPress/gutenbe
- **Name:** core/categories
- **Category:** widgets
-- **Supports:** align, spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~
+- **Supports:** align, interactivity (clientNavigation), spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~
- **Attributes:** displayAsDropdown, showEmpty, showHierarchy, showOnlyTopLevel, showPostCounts
## Code
@@ -87,7 +87,7 @@ Display code snippets that respect your spacing and tabs. ([Source](https://gith
- **Name:** core/code
- **Category:** text
-- **Supports:** align (wide), anchor, color (background, gradients, text), spacing (margin, padding), typography (fontSize, lineHeight)
+- **Supports:** align (wide), anchor, color (background, gradients, text), interactivity (clientNavigation), spacing (margin, padding), typography (fontSize, lineHeight)
- **Attributes:** content
## Column
@@ -97,7 +97,7 @@ A single column within a columns block. ([Source](https://github.com/WordPress/g
- **Name:** core/column
- **Category:** design
- **Parent:** core/columns
-- **Supports:** anchor, color (background, button, gradients, heading, link, text), layout, spacing (blockGap, padding), typography (fontSize, lineHeight), ~~html~~, ~~reusable~~
+- **Supports:** anchor, color (background, button, gradients, heading, link, text), interactivity (clientNavigation), layout, spacing (blockGap, padding), typography (fontSize, lineHeight), ~~html~~, ~~reusable~~
- **Attributes:** allowedBlocks, templateLock, verticalAlignment, width
## Columns
@@ -106,7 +106,7 @@ Display content in multiple columns, with blocks added to each column. ([Source]
- **Name:** core/columns
- **Category:** design
-- **Supports:** align (full, wide), anchor, color (background, button, gradients, heading, link, text), layout (default, ~~allowEditing~~, ~~allowInheriting~~, ~~allowSwitching~~), spacing (blockGap, margin, padding), typography (fontSize, lineHeight), ~~html~~
+- **Supports:** align (full, wide), anchor, color (background, button, gradients, heading, link, text), interactivity (clientNavigation), layout (default, ~~allowEditing~~, ~~allowInheriting~~, ~~allowSwitching~~), spacing (blockGap, margin, padding), typography (fontSize, lineHeight), ~~html~~
- **Attributes:** isStackedOnMobile, templateLock, verticalAlignment
## Comment Author Avatar (deprecated)
@@ -116,7 +116,7 @@ This block is deprecated. Please use the Avatar block instead. ([Source](https:/
- **Name:** core/comment-author-avatar
- **Experimental:** fse
- **Category:** theme
-- **Supports:** color (background, ~~text~~), spacing (margin, padding), ~~html~~, ~~inserter~~
+- **Supports:** color (background, ~~text~~), interactivity (clientNavigation), spacing (margin, padding), ~~html~~, ~~inserter~~
- **Attributes:** height, width
## Comment Author Name
@@ -125,7 +125,7 @@ Displays the name of the author of the comment. ([Source](https://github.com/Wor
- **Name:** core/comment-author-name
- **Category:** theme
-- **Supports:** color (background, gradients, link, text), spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~
+- **Supports:** color (background, gradients, link, text), interactivity (clientNavigation), spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~
- **Attributes:** isLink, linkTarget, textAlign
## Comment Content
@@ -143,7 +143,7 @@ Displays the date on which the comment was posted. ([Source](https://github.com/
- **Name:** core/comment-date
- **Category:** theme
-- **Supports:** color (background, gradients, link, text), spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~
+- **Supports:** color (background, gradients, link, text), interactivity (clientNavigation), spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~
- **Attributes:** format, isLink
## Comment Edit Link
@@ -152,7 +152,7 @@ Displays a link to edit the comment in the WordPress Dashboard. This link is onl
- **Name:** core/comment-edit-link
- **Category:** theme
-- **Supports:** color (background, gradients, link, ~~text~~), spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~
+- **Supports:** color (background, gradients, link, ~~text~~), interactivity (clientNavigation), spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~
- **Attributes:** linkTarget, textAlign
## Comment Reply Link
@@ -171,7 +171,7 @@ Contains the block elements used to display a comment, like the title, date, aut
- **Name:** core/comment-template
- **Category:** design
- **Parent:** core/comments
-- **Supports:** align, spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~, ~~reusable~~
+- **Supports:** align, interactivity (clientNavigation), spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~, ~~reusable~~
- **Attributes:**
## Comments
@@ -190,7 +190,7 @@ Displays a paginated navigation to next/previous set of comments, when applicabl
- **Name:** core/comments-pagination
- **Category:** theme
- **Parent:** core/comments
-- **Supports:** align, color (background, gradients, link, text), layout (default, ~~allowInheriting~~, ~~allowSwitching~~), typography (fontSize, lineHeight), ~~html~~, ~~reusable~~
+- **Supports:** align, color (background, gradients, link, text), interactivity (clientNavigation), layout (default, ~~allowInheriting~~, ~~allowSwitching~~), typography (fontSize, lineHeight), ~~html~~, ~~reusable~~
- **Attributes:** paginationArrow
## Comments Next Page
@@ -200,7 +200,7 @@ Displays the next comment's page link. ([Source](https://github.com/WordPress/gu
- **Name:** core/comments-pagination-next
- **Category:** theme
- **Parent:** core/comments-pagination
-- **Supports:** color (background, gradients, ~~text~~), typography (fontSize, lineHeight), ~~html~~, ~~reusable~~
+- **Supports:** color (background, gradients, ~~text~~), interactivity (clientNavigation), typography (fontSize, lineHeight), ~~html~~, ~~reusable~~
- **Attributes:** label
## Comments Page Numbers
@@ -210,7 +210,7 @@ Displays a list of page numbers for comments pagination. ([Source](https://githu
- **Name:** core/comments-pagination-numbers
- **Category:** theme
- **Parent:** core/comments-pagination
-- **Supports:** color (background, gradients, ~~text~~), typography (fontSize, lineHeight), ~~html~~, ~~reusable~~
+- **Supports:** color (background, gradients, ~~text~~), interactivity (clientNavigation), typography (fontSize, lineHeight), ~~html~~, ~~reusable~~
- **Attributes:**
## Comments Previous Page
@@ -220,7 +220,7 @@ Displays the previous comment's page link. ([Source](https://github.com/WordPres
- **Name:** core/comments-pagination-previous
- **Category:** theme
- **Parent:** core/comments-pagination
-- **Supports:** color (background, gradients, ~~text~~), typography (fontSize, lineHeight), ~~html~~, ~~reusable~~
+- **Supports:** color (background, gradients, ~~text~~), interactivity (clientNavigation), typography (fontSize, lineHeight), ~~html~~, ~~reusable~~
- **Attributes:** label
## Comments Title
@@ -229,7 +229,7 @@ Displays a title with the number of comments. ([Source](https://github.com/WordP
- **Name:** core/comments-title
- **Category:** theme
-- **Supports:** align, color (background, gradients, text), spacing (margin, padding), typography (fontSize, lineHeight), ~~anchor~~, ~~html~~
+- **Supports:** align, color (background, gradients, text), interactivity (clientNavigation), spacing (margin, padding), typography (fontSize, lineHeight), ~~anchor~~, ~~html~~
- **Attributes:** level, showCommentsCount, showPostTitle, textAlign
## Cover
@@ -238,7 +238,7 @@ Add an image or video with a text overlay. ([Source](https://github.com/WordPres
- **Name:** core/cover
- **Category:** media
-- **Supports:** align, anchor, color (heading, text, ~~background~~, ~~enableContrastChecker~~), dimensions (aspectRatio), layout (~~allowJustification~~), spacing (blockGap, margin, padding), typography (fontSize, lineHeight), ~~html~~
+- **Supports:** align, anchor, color (heading, text, ~~background~~, ~~enableContrastChecker~~), dimensions (aspectRatio), interactivity (clientNavigation), layout (~~allowJustification~~), spacing (blockGap, margin, padding), typography (fontSize, lineHeight), ~~html~~
- **Attributes:** allowedBlocks, alt, backgroundType, contentPosition, customGradient, customOverlayColor, dimRatio, focalPoint, gradient, hasParallax, id, isDark, isRepeated, isUserOverlayColor, minHeight, minHeightUnit, overlayColor, tagName, templateLock, url, useFeaturedImage
## Details
@@ -247,7 +247,7 @@ Hide and show additional content. ([Source](https://github.com/WordPress/gutenbe
- **Name:** core/details
- **Category:** text
-- **Supports:** align (full, wide), color (background, gradients, link, text), layout (~~allowEditing~~), spacing (blockGap, margin, padding), typography (fontSize, lineHeight), ~~html~~
+- **Supports:** align (full, wide), color (background, gradients, link, text), interactivity (clientNavigation), layout (~~allowEditing~~), spacing (blockGap, margin, padding), typography (fontSize, lineHeight), ~~html~~
- **Attributes:** showContent, summary
## Embed
@@ -256,7 +256,7 @@ Add a block that displays content pulled from other sites, like Twitter or YouTu
- **Name:** core/embed
- **Category:** embed
-- **Supports:** align, spacing (margin)
+- **Supports:** align, interactivity (clientNavigation), spacing (margin)
- **Attributes:** allowResponsive, caption, previewable, providerNameSlug, responsive, type, url
## File
@@ -274,7 +274,7 @@ Display footnotes added to the page. ([Source](https://github.com/WordPress/gute
- **Name:** core/footnotes
- **Category:** text
-- **Supports:** color (background, link, text), spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~, ~~inserter~~, ~~multiple~~, ~~reusable~~
+- **Supports:** color (background, link, text), interactivity (clientNavigation), spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~, ~~inserter~~, ~~multiple~~, ~~reusable~~
- **Attributes:**
## Form
@@ -332,7 +332,7 @@ Display multiple images in a rich gallery. ([Source](https://github.com/WordPres
- **Name:** core/gallery
- **Category:** media
-- **Supports:** align, anchor, color (background, gradients, ~~text~~), layout (default, ~~allowEditing~~, ~~allowInheriting~~, ~~allowSwitching~~), spacing (blockGap, margin, padding), units (em, px, rem, vh, vw), ~~html~~
+- **Supports:** align, anchor, color (background, gradients, ~~text~~), interactivity (clientNavigation), layout (default, ~~allowEditing~~, ~~allowInheriting~~, ~~allowSwitching~~), spacing (blockGap, margin, padding), units (em, px, rem, vh, vw), ~~html~~
- **Attributes:** allowResize, caption, columns, fixedHeight, ids, imageCrop, images, linkTarget, linkTo, randomOrder, shortCodeTransforms, sizeSlug
## Group
@@ -341,7 +341,7 @@ Gather blocks in a layout container. ([Source](https://github.com/WordPress/gute
- **Name:** core/group
- **Category:** design
-- **Supports:** align (full, wide), anchor, ariaLabel, background (backgroundImage, backgroundSize), color (background, button, gradients, heading, link, text), dimensions (minHeight), layout (allowSizingOnChildren), position (sticky), spacing (blockGap, margin, padding), typography (fontSize, lineHeight), ~~html~~
+- **Supports:** align (full, wide), anchor, ariaLabel, background (backgroundImage, backgroundSize), color (background, button, gradients, heading, link, text), dimensions (minHeight), interactivity (clientNavigation), layout (allowSizingOnChildren), position (sticky), spacing (blockGap, margin, padding), typography (fontSize, lineHeight), ~~html~~
- **Attributes:** allowedBlocks, tagName, templateLock
## Heading
@@ -350,7 +350,7 @@ Introduce new sections and organize content to help visitors (and search engines
- **Name:** core/heading
- **Category:** text
-- **Supports:** __unstablePasteTextInline, align (full, wide), anchor, className, color (background, gradients, link, text), spacing (margin, padding), typography (fontSize, lineHeight)
+- **Supports:** __unstablePasteTextInline, align (full, wide), anchor, className, color (background, gradients, link, text), interactivity (clientNavigation), spacing (margin, padding), typography (fontSize, lineHeight)
- **Attributes:** content, level, placeholder, textAlign
## Home Link
@@ -360,7 +360,7 @@ Create a link that always points to the homepage of the site. Usually not necess
- **Name:** core/home-link
- **Category:** design
- **Parent:** core/navigation
-- **Supports:** typography (fontSize, lineHeight), ~~html~~, ~~reusable~~
+- **Supports:** interactivity (clientNavigation), typography (fontSize, lineHeight), ~~html~~, ~~reusable~~
- **Attributes:** label
## Custom HTML
@@ -369,7 +369,7 @@ Add custom HTML code and preview it as you edit. ([Source](https://github.com/Wo
- **Name:** core/html
- **Category:** widgets
-- **Supports:** ~~className~~, ~~customClassName~~, ~~html~~
+- **Supports:** interactivity (clientNavigation), ~~className~~, ~~customClassName~~, ~~html~~
- **Attributes:** content
## Image
@@ -387,7 +387,7 @@ Display a list of your most recent comments. ([Source](https://github.com/WordPr
- **Name:** core/latest-comments
- **Category:** widgets
-- **Supports:** align, spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~
+- **Supports:** align, interactivity (clientNavigation), spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~
- **Attributes:** commentsToShow, displayAvatar, displayDate, displayExcerpt
## Latest Posts
@@ -396,7 +396,7 @@ Display a list of your most recent posts. ([Source](https://github.com/WordPress
- **Name:** core/latest-posts
- **Category:** widgets
-- **Supports:** align, color (background, gradients, link, text), spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~
+- **Supports:** align, color (background, gradients, link, text), interactivity (clientNavigation), spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~
- **Attributes:** addLinkToFeaturedImage, categories, columns, displayAuthor, displayFeaturedImage, displayPostContent, displayPostContentRadio, displayPostDate, excerptLength, featuredImageAlign, featuredImageSizeHeight, featuredImageSizeSlug, featuredImageSizeWidth, order, orderBy, postLayout, postsToShow, selectedAuthor
## List
@@ -405,7 +405,7 @@ Create a bulleted or numbered list. ([Source](https://github.com/WordPress/guten
- **Name:** core/list
- **Category:** text
-- **Supports:** __unstablePasteTextInline, anchor, color (background, gradients, link, text), spacing (margin, padding), typography (fontSize, lineHeight), ~~className~~
+- **Supports:** __unstablePasteTextInline, anchor, color (background, gradients, link, text), interactivity (clientNavigation), spacing (margin, padding), typography (fontSize, lineHeight), ~~className~~
- **Attributes:** ordered, placeholder, reversed, start, type, values
## List item
@@ -415,7 +415,7 @@ Create a list item. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/
- **Name:** core/list-item
- **Category:** text
- **Parent:** core/list
-- **Supports:** spacing (margin, padding), typography (fontSize, lineHeight), ~~className~~
+- **Supports:** interactivity (clientNavigation), spacing (margin, padding), typography (fontSize, lineHeight), ~~className~~
- **Attributes:** content, placeholder
## Login/out
@@ -424,7 +424,7 @@ Show login & logout links. ([Source](https://github.com/WordPress/gutenberg/tree
- **Name:** core/loginout
- **Category:** theme
-- **Supports:** className, spacing (margin, padding), typography (fontSize, lineHeight)
+- **Supports:** className, interactivity (clientNavigation), spacing (margin, padding), typography (fontSize, lineHeight)
- **Attributes:** displayLoginAsForm, redirectToCurrent
## Media & Text
@@ -433,7 +433,7 @@ Set media and words side-by-side for a richer layout. ([Source](https://github.c
- **Name:** core/media-text
- **Category:** media
-- **Supports:** align (full, wide), anchor, color (background, gradients, heading, link, text), spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~
+- **Supports:** align (full, wide), anchor, color (background, gradients, heading, link, text), interactivity (clientNavigation), spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~
- **Attributes:** align, allowedBlocks, focalPoint, href, imageFill, isStackedOnMobile, linkClass, linkDestination, linkTarget, mediaAlt, mediaId, mediaLink, mediaPosition, mediaSizeSlug, mediaType, mediaUrl, mediaWidth, rel, verticalAlignment
## Unsupported
@@ -442,7 +442,7 @@ Your site doesn’t include support for this block. ([Source](https://github.com
- **Name:** core/missing
- **Category:** text
-- **Supports:** ~~className~~, ~~customClassName~~, ~~html~~, ~~inserter~~, ~~reusable~~
+- **Supports:** interactivity (clientNavigation), ~~className~~, ~~customClassName~~, ~~html~~, ~~inserter~~, ~~reusable~~
- **Attributes:** originalContent, originalName, originalUndelimitedContent
## More
@@ -451,7 +451,7 @@ Content before this block will be shown in the excerpt on your archives page. ([
- **Name:** core/more
- **Category:** design
-- **Supports:** ~~className~~, ~~customClassName~~, ~~html~~, ~~multiple~~
+- **Supports:** interactivity (clientNavigation), ~~className~~, ~~customClassName~~, ~~html~~, ~~multiple~~
- **Attributes:** customText, noTeaser
## Navigation
@@ -470,7 +470,7 @@ Add a page, link, or another item to your navigation. ([Source](https://github.c
- **Name:** core/navigation-link
- **Category:** design
- **Parent:** core/navigation
-- **Supports:** typography (fontSize, lineHeight), ~~html~~, ~~renaming~~, ~~reusable~~
+- **Supports:** interactivity (clientNavigation), typography (fontSize, lineHeight), ~~html~~, ~~renaming~~, ~~reusable~~
- **Attributes:** description, id, isTopLevelLink, kind, label, opensInNewTab, rel, title, type, url
## Submenu
@@ -480,7 +480,7 @@ Add a submenu to your navigation. ([Source](https://github.com/WordPress/gutenbe
- **Name:** core/navigation-submenu
- **Category:** design
- **Parent:** core/navigation
-- **Supports:** ~~html~~, ~~reusable~~
+- **Supports:** interactivity (clientNavigation), ~~html~~, ~~reusable~~
- **Attributes:** description, id, isTopLevelItem, kind, label, opensInNewTab, rel, title, type, url
## Page Break
@@ -490,7 +490,7 @@ Separate your content into a multi-page experience. ([Source](https://github.com
- **Name:** core/nextpage
- **Category:** design
- **Parent:** core/post-content
-- **Supports:** ~~className~~, ~~customClassName~~, ~~html~~
+- **Supports:** interactivity (clientNavigation), ~~className~~, ~~customClassName~~, ~~html~~
- **Attributes:**
## Page List
@@ -499,7 +499,7 @@ Display a list of all pages. ([Source](https://github.com/WordPress/gutenberg/tr
- **Name:** core/page-list
- **Category:** widgets
-- **Supports:** typography (fontSize, lineHeight), ~~html~~, ~~reusable~~
+- **Supports:** interactivity (clientNavigation), typography (fontSize, lineHeight), ~~html~~, ~~reusable~~
- **Attributes:** isNested, parentPageID
## Page List Item
@@ -509,7 +509,7 @@ Displays a page inside a list of all pages. ([Source](https://github.com/WordPre
- **Name:** core/page-list-item
- **Category:** widgets
- **Parent:** core/page-list
-- **Supports:** ~~html~~, ~~inserter~~, ~~lock~~, ~~reusable~~
+- **Supports:** interactivity (clientNavigation), ~~html~~, ~~inserter~~, ~~lock~~, ~~reusable~~
- **Attributes:** hasChildren, id, label, link, title
## Paragraph
@@ -518,7 +518,7 @@ Start with the basic building block of all narrative. ([Source](https://github.c
- **Name:** core/paragraph
- **Category:** text
-- **Supports:** __unstablePasteTextInline, anchor, color (background, gradients, link, text), spacing (margin, padding), typography (fontSize, lineHeight), ~~className~~
+- **Supports:** __unstablePasteTextInline, anchor, color (background, gradients, link, text), interactivity (clientNavigation), spacing (margin, padding), typography (fontSize, lineHeight), ~~className~~
- **Attributes:** align, content, direction, dropCap, placeholder
## Pattern placeholder
@@ -527,7 +527,7 @@ Show a block pattern. ([Source](https://github.com/WordPress/gutenberg/tree/trun
- **Name:** core/pattern
- **Category:** theme
-- **Supports:** ~~html~~, ~~inserter~~, ~~renaming~~
+- **Supports:** interactivity (clientNavigation), ~~html~~, ~~inserter~~, ~~renaming~~
- **Attributes:** slug
## Author
@@ -536,7 +536,7 @@ Display post author details such as name, avatar, and bio. ([Source](https://git
- **Name:** core/post-author
- **Category:** theme
-- **Supports:** color (background, gradients, link, text), spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~
+- **Supports:** color (background, gradients, link, text), interactivity (clientNavigation), spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~
- **Attributes:** avatarSize, byline, isLink, linkTarget, showAvatar, showBio, textAlign
## Author Biography
@@ -545,7 +545,7 @@ The author biography. ([Source](https://github.com/WordPress/gutenberg/tree/trun
- **Name:** core/post-author-biography
- **Category:** theme
-- **Supports:** color (background, gradients, link, text), spacing (margin, padding), typography (fontSize, lineHeight)
+- **Supports:** color (background, gradients, link, text), interactivity (clientNavigation), spacing (margin, padding), typography (fontSize, lineHeight)
- **Attributes:** textAlign
## Author Name
@@ -554,7 +554,7 @@ The author name. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/pac
- **Name:** core/post-author-name
- **Category:** theme
-- **Supports:** color (background, gradients, link, text), spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~
+- **Supports:** color (background, gradients, link, text), interactivity (clientNavigation), spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~
- **Attributes:** isLink, linkTarget, textAlign
## Comment (deprecated)
@@ -564,7 +564,7 @@ This block is deprecated. Please use the Comments block instead. ([Source](https
- **Name:** core/post-comment
- **Experimental:** fse
- **Category:** theme
-- **Supports:** ~~html~~, ~~inserter~~
+- **Supports:** interactivity (clientNavigation), ~~html~~, ~~inserter~~
- **Attributes:** commentId
## Comments Count
@@ -574,7 +574,7 @@ Display a post's comments count. ([Source](https://github.com/WordPress/gutenber
- **Name:** core/post-comments-count
- **Experimental:** fse
- **Category:** theme
-- **Supports:** color (background, gradients, text), spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~
+- **Supports:** color (background, gradients, text), interactivity (clientNavigation), spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~
- **Attributes:** textAlign
## Comments Form
@@ -593,7 +593,7 @@ Displays the link to the current post comments. ([Source](https://github.com/Wor
- **Name:** core/post-comments-link
- **Experimental:** fse
- **Category:** theme
-- **Supports:** color (background, link, ~~text~~), spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~
+- **Supports:** color (background, link, ~~text~~), interactivity (clientNavigation), spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~
- **Attributes:** textAlign
## Content
@@ -611,7 +611,7 @@ Display the publish date for an entry such as a post or page. ([Source](https://
- **Name:** core/post-date
- **Category:** theme
-- **Supports:** color (background, gradients, link, text), spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~
+- **Supports:** color (background, gradients, link, text), interactivity (clientNavigation), spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~
- **Attributes:** displayType, format, isLink, textAlign
## Excerpt
@@ -620,7 +620,7 @@ Display the excerpt. ([Source](https://github.com/WordPress/gutenberg/tree/trunk
- **Name:** core/post-excerpt
- **Category:** theme
-- **Supports:** color (background, gradients, link, text), spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~
+- **Supports:** color (background, gradients, link, text), interactivity (clientNavigation), spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~
- **Attributes:** excerptLength, moreText, showMoreOnNewLine, textAlign
## Featured Image
@@ -629,7 +629,7 @@ Display a post's featured image. ([Source](https://github.com/WordPress/gutenber
- **Name:** core/post-featured-image
- **Category:** theme
-- **Supports:** align (center, full, left, right, wide), color (~~background~~, ~~text~~), spacing (margin, padding), ~~html~~
+- **Supports:** align (center, full, left, right, wide), color (~~background~~, ~~text~~), interactivity (clientNavigation), spacing (margin, padding), ~~html~~
- **Attributes:** aspectRatio, customGradient, customOverlayColor, dimRatio, gradient, height, isLink, linkTarget, overlayColor, rel, scale, sizeSlug, useFirstImageFromPost, width
## Post Navigation Link
@@ -638,7 +638,7 @@ Displays the next or previous post link that is adjacent to the current post. ([
- **Name:** core/post-navigation-link
- **Category:** theme
-- **Supports:** color (background, link, text), typography (fontSize, lineHeight), ~~html~~, ~~reusable~~
+- **Supports:** color (background, link, text), interactivity (clientNavigation), typography (fontSize, lineHeight), ~~html~~, ~~reusable~~
- **Attributes:** arrow, label, linkLabel, showTitle, taxonomy, textAlign, type
## Post Template
@@ -648,7 +648,7 @@ Contains the block elements used to render a post, like the title, date, feature
- **Name:** core/post-template
- **Category:** theme
- **Parent:** core/query
-- **Supports:** align (full, wide), color (background, gradients, link, text), layout, spacing (blockGap), typography (fontSize, lineHeight), ~~html~~, ~~reusable~~
+- **Supports:** align (full, wide), color (background, gradients, link, text), interactivity (clientNavigation), layout, spacing (blockGap), typography (fontSize, lineHeight), ~~html~~, ~~reusable~~
- **Attributes:**
## Post Terms
@@ -657,7 +657,7 @@ Post terms. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages
- **Name:** core/post-terms
- **Category:** theme
-- **Supports:** color (background, gradients, link, text), spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~
+- **Supports:** color (background, gradients, link, text), interactivity (clientNavigation), spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~
- **Attributes:** prefix, separator, suffix, term, textAlign
## Time To Read
@@ -667,7 +667,7 @@ Show minutes required to finish reading the post. ([Source](https://github.com/W
- **Name:** core/post-time-to-read
- **Experimental:** true
- **Category:** theme
-- **Supports:** color (background, gradients, text), spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~
+- **Supports:** color (background, gradients, text), interactivity (clientNavigation), spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~
- **Attributes:** textAlign
## Title
@@ -676,7 +676,7 @@ Displays the title of a post, page, or any other content-type. ([Source](https:/
- **Name:** core/post-title
- **Category:** theme
-- **Supports:** align (full, wide), color (background, gradients, link, text), spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~
+- **Supports:** align (full, wide), color (background, gradients, link, text), interactivity (clientNavigation), spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~
- **Attributes:** isLink, level, linkTarget, rel, textAlign
## Preformatted
@@ -685,7 +685,7 @@ Add text that respects your spacing and tabs, and also allows styling. ([Source]
- **Name:** core/preformatted
- **Category:** text
-- **Supports:** anchor, color (background, gradients, text), spacing (margin, padding), typography (fontSize, lineHeight)
+- **Supports:** anchor, color (background, gradients, text), interactivity (clientNavigation), spacing (margin, padding), typography (fontSize, lineHeight)
- **Attributes:** content
## Pullquote
@@ -694,7 +694,7 @@ Give special visual emphasis to a quote from your text. ([Source](https://github
- **Name:** core/pullquote
- **Category:** text
-- **Supports:** align (full, left, right, wide), anchor, color (background, gradients, link, text), spacing (margin, padding), typography (fontSize, lineHeight)
+- **Supports:** align (full, left, right, wide), anchor, color (background, gradients, link, text), interactivity (clientNavigation), spacing (margin, padding), typography (fontSize, lineHeight)
- **Attributes:** citation, textAlign, value
## Query Loop
@@ -713,7 +713,7 @@ Contains the block elements used to render content when no query results are fou
- **Name:** core/query-no-results
- **Category:** theme
- **Parent:** core/query
-- **Supports:** align, color (background, gradients, link, text), typography (fontSize, lineHeight), ~~html~~, ~~reusable~~
+- **Supports:** align, color (background, gradients, link, text), interactivity (clientNavigation), typography (fontSize, lineHeight), ~~html~~, ~~reusable~~
- **Attributes:**
## Pagination
@@ -722,8 +722,7 @@ Displays a paginated navigation to next/previous set of posts, when applicable.
- **Name:** core/query-pagination
- **Category:** theme
-- **Parent:** core/query
-- **Supports:** align, color (background, gradients, link, text), layout (default, ~~allowInheriting~~, ~~allowSwitching~~), typography (fontSize, lineHeight), ~~html~~, ~~reusable~~
+- **Supports:** align, color (background, gradients, link, text), interactivity (clientNavigation), layout (default, ~~allowInheriting~~, ~~allowSwitching~~), typography (fontSize, lineHeight), ~~html~~, ~~reusable~~
- **Attributes:** paginationArrow, showLabel
## Next Page
@@ -733,7 +732,7 @@ Displays the next posts page link. ([Source](https://github.com/WordPress/gutenb
- **Name:** core/query-pagination-next
- **Category:** theme
- **Parent:** core/query-pagination
-- **Supports:** color (background, gradients, ~~text~~), typography (fontSize, lineHeight), ~~html~~, ~~reusable~~
+- **Supports:** color (background, gradients, ~~text~~), interactivity (clientNavigation), typography (fontSize, lineHeight), ~~html~~, ~~reusable~~
- **Attributes:** label
## Page Numbers
@@ -743,7 +742,7 @@ Displays a list of page numbers for pagination. ([Source](https://github.com/Wor
- **Name:** core/query-pagination-numbers
- **Category:** theme
- **Parent:** core/query-pagination
-- **Supports:** color (background, gradients, ~~text~~), typography (fontSize, lineHeight), ~~html~~, ~~reusable~~
+- **Supports:** color (background, gradients, ~~text~~), interactivity (clientNavigation), typography (fontSize, lineHeight), ~~html~~, ~~reusable~~
- **Attributes:** midSize
## Previous Page
@@ -753,7 +752,7 @@ Displays the previous posts page link. ([Source](https://github.com/WordPress/gu
- **Name:** core/query-pagination-previous
- **Category:** theme
- **Parent:** core/query-pagination
-- **Supports:** color (background, gradients, ~~text~~), typography (fontSize, lineHeight), ~~html~~, ~~reusable~~
+- **Supports:** color (background, gradients, ~~text~~), interactivity (clientNavigation), typography (fontSize, lineHeight), ~~html~~, ~~reusable~~
- **Attributes:** label
## Query Title
@@ -762,7 +761,7 @@ Display the query title. ([Source](https://github.com/WordPress/gutenberg/tree/t
- **Name:** core/query-title
- **Category:** theme
-- **Supports:** align (full, wide), color (background, gradients, text), spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~
+- **Supports:** align (full, wide), color (background, gradients, text), interactivity (clientNavigation), spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~
- **Attributes:** level, showPrefix, showSearchTerm, textAlign, type
## Quote
@@ -771,7 +770,7 @@ Give quoted text visual emphasis. "In quoting others, we cite ourselves." — Ju
- **Name:** core/quote
- **Category:** text
-- **Supports:** anchor, color (background, gradients, heading, link, text), layout (~~allowEditing~~), spacing (blockGap), typography (fontSize, lineHeight), ~~html~~
+- **Supports:** anchor, color (background, gradients, heading, link, text), interactivity (clientNavigation), layout (~~allowEditing~~), spacing (blockGap), typography (fontSize, lineHeight), ~~html~~
- **Attributes:** align, citation, value
## Read More
@@ -780,7 +779,7 @@ Displays the link of a post, page, or any other content-type. ([Source](https://
- **Name:** core/read-more
- **Category:** theme
-- **Supports:** color (background, gradients, text), spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~
+- **Supports:** color (background, gradients, text), interactivity (clientNavigation), spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~
- **Attributes:** content, linkTarget
## RSS
@@ -789,7 +788,7 @@ Display entries from any RSS or Atom feed. ([Source](https://github.com/WordPres
- **Name:** core/rss
- **Category:** widgets
-- **Supports:** align, ~~html~~
+- **Supports:** align, interactivity (clientNavigation), ~~html~~
- **Attributes:** blockLayout, columns, displayAuthor, displayDate, displayExcerpt, excerptLength, feedURL, itemsToShow
## Search
@@ -807,7 +806,7 @@ Create a break between ideas or sections with a horizontal separator. ([Source](
- **Name:** core/separator
- **Category:** design
-- **Supports:** align (center, full, wide), anchor, color (background, gradients, ~~enableContrastChecker~~, ~~text~~), spacing (margin)
+- **Supports:** align (center, full, wide), anchor, color (background, gradients, ~~enableContrastChecker~~, ~~text~~), interactivity (clientNavigation), spacing (margin)
- **Attributes:** opacity
## Shortcode
@@ -825,7 +824,7 @@ Display an image to represent this site. Update this block and the changes apply
- **Name:** core/site-logo
- **Category:** theme
-- **Supports:** align, color (~~background~~, ~~text~~), spacing (margin, padding), ~~alignWide~~, ~~html~~
+- **Supports:** align, color (~~background~~, ~~text~~), interactivity (clientNavigation), spacing (margin, padding), ~~alignWide~~, ~~html~~
- **Attributes:** isLink, linkTarget, shouldSyncIcon, width
## Site Tagline
@@ -834,7 +833,7 @@ Describe in a few words what the site is about. The tagline can be used in searc
- **Name:** core/site-tagline
- **Category:** theme
-- **Supports:** align (full, wide), color (background, gradients, text), spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~
+- **Supports:** align (full, wide), color (background, gradients, text), interactivity (clientNavigation), spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~
- **Attributes:** textAlign
## Site Title
@@ -843,7 +842,7 @@ Displays the name of this site. Update the block, and the changes apply everywhe
- **Name:** core/site-title
- **Category:** theme
-- **Supports:** align (full, wide), color (background, gradients, link, text), spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~
+- **Supports:** align (full, wide), color (background, gradients, link, text), interactivity (clientNavigation), spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~
- **Attributes:** isLink, level, linkTarget, textAlign
## Social Icon
@@ -853,7 +852,7 @@ Display an icon linking to a social media profile or site. ([Source](https://git
- **Name:** core/social-link
- **Category:** widgets
- **Parent:** core/social-links
-- **Supports:** ~~html~~, ~~reusable~~
+- **Supports:** interactivity (clientNavigation), ~~html~~, ~~reusable~~
- **Attributes:** label, rel, service, url
## Social Icons
@@ -862,7 +861,7 @@ Display icons linking to your social media profiles or sites. ([Source](https://
- **Name:** core/social-links
- **Category:** widgets
-- **Supports:** align (center, left, right), anchor, color (background, gradients, ~~enableContrastChecker~~, ~~text~~), layout (default, ~~allowInheriting~~, ~~allowSwitching~~, ~~allowVerticalAlignment~~), spacing (blockGap, margin, padding, units)
+- **Supports:** align (center, left, right), anchor, color (background, gradients, ~~enableContrastChecker~~, ~~text~~), interactivity (clientNavigation), layout (default, ~~allowInheriting~~, ~~allowSwitching~~, ~~allowVerticalAlignment~~), spacing (blockGap, margin, padding, units)
- **Attributes:** customIconBackgroundColor, customIconColor, iconBackgroundColor, iconBackgroundColorValue, iconColor, iconColorValue, openInNewTab, showLabels, size
## Spacer
@@ -871,7 +870,7 @@ Add white space between blocks and customize its height. ([Source](https://githu
- **Name:** core/spacer
- **Category:** design
-- **Supports:** anchor, spacing (margin)
+- **Supports:** anchor, interactivity (clientNavigation), spacing (margin)
- **Attributes:** height, width
## Table
@@ -880,7 +879,7 @@ Create structured content in rows and columns to display information. ([Source](
- **Name:** core/table
- **Category:** text
-- **Supports:** align, anchor, color (background, gradients, text), spacing (margin, padding), typography (fontSize, lineHeight)
+- **Supports:** align, anchor, color (background, gradients, text), interactivity (clientNavigation), spacing (margin, padding), typography (fontSize, lineHeight)
- **Attributes:** body, caption, foot, hasFixedLayout, head
## Table of Contents
@@ -890,7 +889,7 @@ Summarize your post with a list of headings. Add HTML anchors to Heading blocks
- **Name:** core/table-of-contents
- **Experimental:** true
- **Category:** layout
-- **Supports:** color (background, gradients, link, text), spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~
+- **Supports:** color (background, gradients, link, text), interactivity (clientNavigation), spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~
- **Attributes:** headings, onlyIncludeCurrentPage
## Tag Cloud
@@ -899,7 +898,7 @@ A cloud of your most used tags. ([Source](https://github.com/WordPress/gutenberg
- **Name:** core/tag-cloud
- **Category:** widgets
-- **Supports:** align, spacing (margin, padding), typography (lineHeight), ~~html~~
+- **Supports:** align, interactivity (clientNavigation), spacing (margin, padding), typography (lineHeight), ~~html~~
- **Attributes:** largestFontSize, numberOfTags, showTagCounts, smallestFontSize, taxonomy
## Template Part
@@ -908,7 +907,7 @@ Edit the different global regions of your site, like the header, footer, sidebar
- **Name:** core/template-part
- **Category:** theme
-- **Supports:** align, ~~html~~, ~~renaming~~, ~~reusable~~
+- **Supports:** align, interactivity (clientNavigation), ~~html~~, ~~renaming~~, ~~reusable~~
- **Attributes:** area, slug, tagName, theme
## Term Description
@@ -917,7 +916,7 @@ Display the description of categories, tags and custom taxonomies when viewing a
- **Name:** core/term-description
- **Category:** theme
-- **Supports:** align (full, wide), color (background, link, text), spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~
+- **Supports:** align (full, wide), color (background, link, text), interactivity (clientNavigation), spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~
- **Attributes:** textAlign
## Text Columns (deprecated)
@@ -926,7 +925,7 @@ This block is deprecated. Please use the Columns block instead. ([Source](https:
- **Name:** core/text-columns
- **Category:** design
-- **Supports:** ~~inserter~~
+- **Supports:** interactivity (clientNavigation), ~~inserter~~
- **Attributes:** columns, content, width
## Verse
@@ -935,7 +934,7 @@ Insert poetry. Use special spacing formats. Or quote song lyrics. ([Source](http
- **Name:** core/verse
- **Category:** text
-- **Supports:** anchor, color (background, gradients, link, text), spacing (margin, padding), typography (fontSize, lineHeight)
+- **Supports:** anchor, color (background, gradients, link, text), interactivity (clientNavigation), spacing (margin, padding), typography (fontSize, lineHeight)
- **Attributes:** content, textAlign
## Video
@@ -944,7 +943,7 @@ Embed a video from your media library or upload a new one. ([Source](https://git
- **Name:** core/video
- **Category:** media
-- **Supports:** align, anchor, spacing (margin, padding)
+- **Supports:** align, anchor, interactivity (clientNavigation), spacing (margin, padding)
- **Attributes:** autoplay, caption, controls, id, loop, muted, playsInline, poster, preload, src, tracks
diff --git a/lib/class-wp-theme-json-gutenberg.php b/lib/class-wp-theme-json-gutenberg.php
index 6287a822238a23..0d2520ff9682a4 100644
--- a/lib/class-wp-theme-json-gutenberg.php
+++ b/lib/class-wp-theme-json-gutenberg.php
@@ -695,7 +695,7 @@ public function __construct( $theme_json = array(), $origin = 'theme' ) {
$origin = 'theme';
}
- $this->theme_json = WP_Theme_JSON_Schema::migrate( $theme_json );
+ $this->theme_json = WP_Theme_JSON_Schema_Gutenberg::migrate( $theme_json );
$registry = WP_Block_Type_Registry::get_instance();
$valid_block_names = array_keys( $registry->get_all_registered() );
$valid_element_names = array_keys( static::ELEMENTS );
@@ -2638,7 +2638,7 @@ public function get_root_layout_rules( $selector, $block_metadata ) {
$css .= '--wp--style--global--wide-size: ' . $wide_size . ';';
}
- $css .= '}';
+ $css .= ' }';
if ( $use_root_padding ) {
// Top and bottom padding are applied to the outer block container.
@@ -2723,7 +2723,7 @@ protected static function get_metadata_boolean( $data, $path, $default_value = f
* @since 5.8.0
* @since 5.9.0 Duotone preset also has origins.
*
- * @param WP_Theme_JSON $incoming Data to merge.
+ * @param WP_Theme_JSON_Gutenberg $incoming Data to merge.
*/
public function merge( $incoming ) {
$incoming_data = $incoming->get_raw_data();
@@ -2997,7 +2997,7 @@ protected static function filter_slugs( $node, $slugs ) {
public static function remove_insecure_properties( $theme_json ) {
$sanitized = array();
- $theme_json = WP_Theme_JSON_Schema::migrate( $theme_json );
+ $theme_json = WP_Theme_JSON_Schema_Gutenberg::migrate( $theme_json );
$valid_block_names = array_keys( static::get_blocks_metadata() );
$valid_element_names = array_keys( static::ELEMENTS );
diff --git a/lib/class-wp-theme-json-resolver-gutenberg.php b/lib/class-wp-theme-json-resolver-gutenberg.php
index 97d8e4534d899c..ec0d2c6bb0181e 100644
--- a/lib/class-wp-theme-json-resolver-gutenberg.php
+++ b/lib/class-wp-theme-json-resolver-gutenberg.php
@@ -1,8 +1,8 @@
get_data();
@@ -227,7 +228,7 @@ protected static function has_same_registered_blocks( $origin ) {
*
* @type bool $with_supports Whether to include theme supports in the data. Default true.
* }
- * @return WP_Theme_JSON Entity that holds theme data.
+ * @return WP_Theme_JSON_Gutenberg Entity that holds theme data.
*/
public static function get_theme_data( $deprecated = array(), $options = array() ) {
if ( ! empty( $deprecated ) ) {
@@ -251,7 +252,7 @@ public static function get_theme_data( $deprecated = array(), $options = array()
*
* @since 6.1.0
*
- * @param WP_Theme_JSON_Data Class to access and update the underlying data.
+ * @param WP_Theme_JSON_Data_Gutenberg Class to access and update the underlying data.
*/
$theme_json = apply_filters( 'wp_theme_json_data_theme', new WP_Theme_JSON_Data_Gutenberg( $theme_json_data, 'theme' ) );
$theme_json_data = $theme_json->get_data();
@@ -358,7 +359,7 @@ public static function get_theme_data( $deprecated = array(), $options = array()
*
* @since 6.1.0
*
- * @return WP_Theme_JSON
+ * @return WP_Theme_JSON_Gutenberg
*/
public static function get_block_data() {
$registry = WP_Block_Type_Registry::get_instance();
@@ -389,7 +390,7 @@ public static function get_block_data() {
*
* @since 6.1.0
*
- * @param WP_Theme_JSON_Data Class to access and update the underlying data.
+ * @param WP_Theme_JSON_Data_Gutenberg Class to access and update the underlying data.
*/
$theme_json = apply_filters( 'wp_theme_json_data_blocks', new WP_Theme_JSON_Data_Gutenberg( $config, 'blocks' ) );
$config = $theme_json->get_data();
@@ -502,7 +503,7 @@ public static function get_user_data_from_wp_global_styles( $theme, $create_post
*
* @since 5.9.0
*
- * @return WP_Theme_JSON Entity that holds styles for user data.
+ * @return WP_Theme_JSON_Gutenberg Entity that holds styles for user data.
*/
public static function get_user_data() {
if ( null !== static::$user && static::has_same_registered_blocks( 'user' ) ) {
@@ -523,7 +524,7 @@ public static function get_user_data() {
*
* @since 6.1.0
*
- * @param WP_Theme_JSON_Data Class to access and update the underlying data.
+ * @param WP_Theme_JSON_Data_Gutenberg Class to access and update the underlying data.
*/
$theme_json = apply_filters( 'wp_theme_json_data_user', new WP_Theme_JSON_Data_Gutenberg( $config, 'custom' ) );
$config = $theme_json->get_data();
@@ -583,7 +584,7 @@ public static function get_user_data() {
* @param string $origin Optional. To what level should we merge data:'default', 'blocks', 'theme' or 'custom'.
* 'custom' is used as default value as well as fallback value if the origin is unknown.
*
- * @return WP_Theme_JSON
+ * @return WP_Theme_JSON_Gutenberg
*/
public static function get_merged_data( $origin = 'custom' ) {
if ( is_array( $origin ) ) {
diff --git a/lib/class-wp-theme-json-schema-gutenberg.php b/lib/class-wp-theme-json-schema-gutenberg.php
new file mode 100644
index 00000000000000..8373e133c5aec8
--- /dev/null
+++ b/lib/class-wp-theme-json-schema-gutenberg.php
@@ -0,0 +1,154 @@
+ 'border.radius',
+ 'spacing.customMargin' => 'spacing.margin',
+ 'spacing.customPadding' => 'spacing.padding',
+ 'typography.customLineHeight' => 'typography.lineHeight',
+ );
+
+ /**
+ * Function that migrates a given theme.json structure to the last version.
+ *
+ * @since 5.9.0
+ *
+ * @param array $theme_json The structure to migrate.
+ *
+ * @return array The structure in the last version.
+ */
+ public static function migrate( $theme_json ) {
+ if ( ! isset( $theme_json['version'] ) ) {
+ $theme_json = array(
+ 'version' => WP_Theme_JSON::LATEST_SCHEMA,
+ );
+ }
+
+ if ( 1 === $theme_json['version'] ) {
+ $theme_json = self::migrate_v1_to_v2( $theme_json );
+ }
+
+ return $theme_json;
+ }
+
+ /**
+ * Removes the custom prefixes for a few properties
+ * that were part of v1:
+ *
+ * 'border.customRadius' => 'border.radius',
+ * 'spacing.customMargin' => 'spacing.margin',
+ * 'spacing.customPadding' => 'spacing.padding',
+ * 'typography.customLineHeight' => 'typography.lineHeight',
+ *
+ * @since 5.9.0
+ *
+ * @param array $old Data to migrate.
+ *
+ * @return array Data without the custom prefixes.
+ */
+ private static function migrate_v1_to_v2( $old ) {
+ // Copy everything.
+ $new = $old;
+
+ // Overwrite the things that changed.
+ if ( isset( $old['settings'] ) ) {
+ $new['settings'] = self::rename_paths( $old['settings'], self::V1_TO_V2_RENAMED_PATHS );
+ }
+
+ // Set the new version.
+ $new['version'] = 2;
+
+ return $new;
+ }
+
+ /**
+ * Processes the settings subtree.
+ *
+ * @since 5.9.0
+ *
+ * @param array $settings Array to process.
+ * @param array $paths_to_rename Paths to rename.
+ *
+ * @return array The settings in the new format.
+ */
+ private static function rename_paths( $settings, $paths_to_rename ) {
+ $new_settings = $settings;
+
+ // Process any renamed/moved paths within default settings.
+ self::rename_settings( $new_settings, $paths_to_rename );
+
+ // Process individual block settings.
+ if ( isset( $new_settings['blocks'] ) && is_array( $new_settings['blocks'] ) ) {
+ foreach ( $new_settings['blocks'] as &$block_settings ) {
+ self::rename_settings( $block_settings, $paths_to_rename );
+ }
+ }
+
+ return $new_settings;
+ }
+
+ /**
+ * Processes a settings array, renaming or moving properties.
+ *
+ * @since 5.9.0
+ *
+ * @param array $settings Reference to settings either defaults or an individual block's.
+ * @param array $paths_to_rename Paths to rename.
+ */
+ private static function rename_settings( &$settings, $paths_to_rename ) {
+ foreach ( $paths_to_rename as $original => $renamed ) {
+ $original_path = explode( '.', $original );
+ $renamed_path = explode( '.', $renamed );
+ $current_value = _wp_array_get( $settings, $original_path, null );
+
+ if ( null !== $current_value ) {
+ _wp_array_set( $settings, $renamed_path, $current_value );
+ self::unset_setting_by_path( $settings, $original_path );
+ }
+ }
+ }
+
+ /**
+ * Removes a property from within the provided settings by its path.
+ *
+ * @since 5.9.0
+ *
+ * @param array $settings Reference to the current settings array.
+ * @param array $path Path to the property to be removed.
+ */
+ private static function unset_setting_by_path( &$settings, $path ) {
+ $tmp_settings = &$settings; // phpcs:ignore VariableAnalysis.CodeAnalysis.VariableAnalysis.UnusedVariable
+ $last_key = array_pop( $path );
+ foreach ( $path as $key ) {
+ $tmp_settings = &$tmp_settings[ $key ];
+ }
+
+ unset( $tmp_settings[ $last_key ] );
+ }
+}
diff --git a/lib/compat/wordpress-6.5/class-wp-script-modules.php b/lib/compat/wordpress-6.5/class-wp-script-modules.php
index f6a2a348f92ef3..d7eaff177823cc 100644
--- a/lib/compat/wordpress-6.5/class-wp-script-modules.php
+++ b/lib/compat/wordpress-6.5/class-wp-script-modules.php
@@ -212,10 +212,37 @@ public function print_script_module_preloads() {
* Prints the import map using a script tag with a type="importmap" attribute.
*
* @since 6.5.0
+ *
+ * @global WP_Scripts $wp_scripts The WP_Scripts object for printing the polyfill.
*/
public function print_import_map() {
$import_map = $this->get_import_map();
if ( ! empty( $import_map['imports'] ) ) {
+ global $wp_scripts;
+ if ( isset( $wp_scripts ) ) {
+ /*
+ * In Core, the polyfill is registered with a different approach.
+ * See: https://github.com/WordPress/wordpress-develop/blob/4b23ba81ddb067110e41d05550de7f2a4f09dad3/src/wp-includes/script-loader.php#L99
+ */
+ wp_register_script(
+ 'wp-polyfill-importmap',
+ gutenberg_url( '/build/modules/importmap-polyfill.min.js' ),
+ array(),
+ '1.8.2',
+ true
+ );
+ wp_print_inline_script_tag(
+ wp_get_script_polyfill(
+ $wp_scripts,
+ array(
+ 'HTMLScriptElement.supports && HTMLScriptElement.supports("importmap")' => 'wp-polyfill-importmap',
+ )
+ ),
+ array(
+ 'id' => 'wp-load-polyfill-importmap',
+ )
+ );
+ }
wp_print_inline_script_tag(
wp_json_encode( $import_map, JSON_HEX_TAG | JSON_HEX_AMP ),
array(
diff --git a/lib/compat/wordpress-6.5/fonts/class-wp-font-collection.php b/lib/compat/wordpress-6.5/fonts/class-wp-font-collection.php
new file mode 100644
index 00000000000000..154621ead50fbe
--- /dev/null
+++ b/lib/compat/wordpress-6.5/fonts/class-wp-font-collection.php
@@ -0,0 +1,221 @@
+slug = sanitize_title( $slug );
+
+ // Data or json are lazy loaded and validated in get_data().
+ if ( is_array( $data_or_file ) ) {
+ $this->data = $data_or_file;
+ } else {
+ $this->src = $data_or_file;
+ }
+
+ if ( $this->slug !== $slug ) {
+ _doing_it_wrong(
+ __METHOD__,
+ /* translators: %s: Font collection slug. */
+ sprintf( __( 'Font collection slug "%s" is not valid. Slugs must use only alphanumeric characters, dashes, and underscores.', 'gutenberg' ), $slug ),
+ '6.5.0'
+ );
+ }
+ }
+
+ /**
+ * Retrieves the font collection data.
+ *
+ * @since 6.5.0
+ *
+ * @return array|WP_Error An array containing the font collection data, or a WP_Error on failure.
+ */
+ public function get_data() {
+ // If we have a JSON config, load it and cache the data if it's valid.
+ if ( $this->src && empty( $this->data ) ) {
+ $data = $this->load_from_json( $this->src );
+ if ( is_wp_error( $data ) ) {
+ return $data;
+ }
+
+ $this->data = $data;
+ }
+
+ // Validate required properties are not empty.
+ $data = $this->validate_data( $this->data );
+ if ( is_wp_error( $data ) ) {
+ return $data;
+ }
+
+ // Set defaults for optional properties.
+ return wp_parse_args(
+ $data,
+ array(
+ 'description' => '',
+ 'categories' => array(),
+ )
+ );
+ }
+
+ /**
+ * Loads font collection data from a JSON file or URL.
+ *
+ * @since 6.5.0
+ *
+ * @param string $file_or_url File path or URL to a JSON file containing the font collection data.
+ * @return array|WP_Error An array containing the font collection data on success,
+ * else an instance of WP_Error on failure.
+ */
+ private function load_from_json( $file_or_url ) {
+ $url = wp_http_validate_url( $file_or_url );
+ $file = file_exists( $file_or_url ) ? wp_normalize_path( realpath( $file_or_url ) ) : false;
+
+ if ( ! $url && ! $file ) {
+ // translators: %s: File path or URL to font collection JSON file.
+ $message = __( 'Font collection JSON file is invalid or does not exist.', 'gutenberg' );
+ _doing_it_wrong( __METHOD__, $message, '6.5.0' );
+ return new WP_Error( 'font_collection_json_missing', $message );
+ }
+
+ return $url ? $this->load_from_url( $url ) : $this->load_from_file( $file );
+ }
+
+ /**
+ * Loads the font collection data from a JSON file path.
+ *
+ * @since 6.5.0
+ *
+ * @param string $file File path to a JSON file containing the font collection data.
+ * @return array|WP_Error An array containing the font collection data on success,
+ * else an instance of WP_Error on failure.
+ */
+ private function load_from_file( $file ) {
+ $data = wp_json_file_decode( $file, array( 'associative' => true ) );
+ if ( empty( $data ) ) {
+ return new WP_Error( 'font_collection_decode_error', __( 'Error decoding the font collection JSON file contents.', 'gutenberg' ) );
+ }
+
+ return $data;
+ }
+
+ /**
+ * Loads the font collection data from a JSON file URL.
+ *
+ * @since 6.5.0
+ *
+ * @param string $url URL to a JSON file containing the font collection data.
+ * @return array|WP_Error An array containing the font collection data on success,
+ * else an instance of WP_Error on failure.
+ */
+ private function load_from_url( $url ) {
+ // Limit key to 167 characters to avoid failure in the case of a long URL.
+ $transient_key = substr( 'wp_font_collection_url_' . $url, 0, 167 );
+ $data = get_site_transient( $transient_key );
+
+ if ( false === $data ) {
+ $response = wp_safe_remote_get( $url );
+ if ( is_wp_error( $response ) || 200 !== wp_remote_retrieve_response_code( $response ) ) {
+ // translators: %s: Font collection URL.
+ return new WP_Error( 'font_collection_request_error', sprintf( __( 'Error fetching the font collection data from "%s".', 'gutenberg' ), $url ) );
+ }
+
+ $data = json_decode( wp_remote_retrieve_body( $response ), true );
+ if ( empty( $data ) ) {
+ return new WP_Error( 'font_collection_decode_error', __( 'Error decoding the font collection data from the REST response JSON.', 'gutenberg' ) );
+ }
+
+ // Make sure the data is valid before caching it.
+ $data = $this->validate_data( $data );
+ if ( is_wp_error( $data ) ) {
+ return $data;
+ }
+
+ set_site_transient( $transient_key, $data, DAY_IN_SECONDS );
+ }
+
+ return $data;
+ }
+
+ /**
+ * Validates the font collection configuration.
+ *
+ * @since 6.5.0
+ *
+ * @param array $data Font collection configuration to validate.
+ * @return array|WP_Error Array of data if valid, otherwise a WP_Error instance.
+ */
+ private function validate_data( $data ) {
+ $required_properties = array( 'name', 'font_families' );
+ foreach ( $required_properties as $property ) {
+ if ( empty( $data[ $property ] ) ) {
+ $message = sprintf(
+ // translators: 1: Font collection slug, 2: Missing property name.
+ __( 'Font collection "%1$s" has missing or empty property: "%2$s."', 'gutenberg' ),
+ $this->slug,
+ $property
+ );
+ _doing_it_wrong( __METHOD__, $message, '6.5.0' );
+ return new WP_Error( 'font_collection_missing_property', $message );
+ }
+ }
+
+ return $data;
+ }
+ }
+}
diff --git a/lib/experimental/fonts/font-library/class-wp-font-library.php b/lib/compat/wordpress-6.5/fonts/class-wp-font-library.php
similarity index 79%
rename from lib/experimental/fonts/font-library/class-wp-font-library.php
rename to lib/compat/wordpress-6.5/fonts/class-wp-font-library.php
index bc119d35702340..d5db42c499814c 100644
--- a/lib/experimental/fonts/font-library/class-wp-font-library.php
+++ b/lib/compat/wordpress-6.5/fonts/class-wp-font-library.php
@@ -55,13 +55,14 @@ public static function get_expected_font_mime_types_per_php_version( $php_versio
*
* @since 6.5.0
*
- * @param string $slug Font collection slug.
- * @param array $args Font collection config options.
- * See {@see wp_register_font_collection()} for the supported fields.
+ * @param string $slug Font collection slug.
+ * @param array $data_or_file Font collection data array or a file path or url to a JSON file
+ * containing the font collection.
+ * See {@see wp_register_font_collection()} for the supported fields.
* @return WP_Font_Collection|WP_Error A font collection if registration was successful, else WP_Error.
*/
- public static function register_font_collection( $slug, $args = array() ) {
- $new_collection = new WP_Font_Collection( $slug, $args );
+ public static function register_font_collection( $slug, $data_or_file ) {
+ $new_collection = new WP_Font_Collection( $slug, $data_or_file );
if ( self::is_collection_registered( $new_collection->slug ) ) {
$error_message = sprintf(
@@ -80,29 +81,12 @@ public static function register_font_collection( $slug, $args = array() ) {
return $new_collection;
}
- /**
- * Register a new font collection from a json file.
- *
- * @since 6.5.0
- *
- * @param string $file_or_url File path or URL to a JSON file containing the font collection data.
- * @return WP_Font_Collection|WP_Error A font collection if registration was successful, else WP_Error.
- */
- public static function register_font_collection_from_json( $file_or_url ) {
- $args = WP_Font_Collection::load_from_json( $file_or_url );
- if ( is_wp_error( $args ) ) {
- return $args;
- }
-
- return self::register_font_collection( $args['slug'], $args );
- }
-
/**
* Unregisters a previously registered font collection.
*
* @since 6.5.0
*
- * @param string $collection_slug Font collection slug.
+ * @param string $slug Font collection slug.
* @return bool True if the font collection was unregistered successfully and false otherwise.
*/
public static function unregister_font_collection( $slug ) {
@@ -110,7 +94,7 @@ public static function unregister_font_collection( $slug ) {
_doing_it_wrong(
__METHOD__,
/* translators: %s: Font collection slug. */
- sprintf( __( 'Font collection "%s" not found.', 'default' ), $slug ),
+ sprintf( __( 'Font collection "%s" not found.' ), $slug ),
'6.5.0'
);
return false;
@@ -148,7 +132,8 @@ public static function get_font_collections() {
* @since 6.5.0
*
* @param string $slug Font collection slug.
- * @return WP_Font_Collection Font collection object.
+ * @return WP_Font_Collection|WP_Error Font collection object,
+ * or WP_Error object if the font collection doesn't exist.
*/
public static function get_font_collection( $slug ) {
if ( array_key_exists( $slug, self::$collections ) ) {
@@ -157,8 +142,6 @@ public static function get_font_collection( $slug ) {
return new WP_Error( 'font_collection_not_found', 'Font collection not found.' );
}
-
-
/**
* Sets the allowed mime types for fonts.
*
diff --git a/lib/experimental/fonts/font-library/class-wp-font-utils.php b/lib/compat/wordpress-6.5/fonts/class-wp-font-utils.php
similarity index 56%
rename from lib/experimental/fonts/font-library/class-wp-font-utils.php
rename to lib/compat/wordpress-6.5/fonts/class-wp-font-utils.php
index e6fdc5ae08f5d8..792a5aaa80eef6 100644
--- a/lib/experimental/fonts/font-library/class-wp-font-utils.php
+++ b/lib/compat/wordpress-6.5/fonts/class-wp-font-utils.php
@@ -1,8 +1,8 @@
'',
- 'fontStyle' => 'normal',
- 'fontWeight' => '400',
- 'fontStretch' => '100%',
- 'unicodeRange' => 'U+0-10FFFF',
- )
+ $defaults = array(
+ 'fontFamily' => '',
+ 'fontStyle' => 'normal',
+ 'fontWeight' => '400',
+ 'fontStretch' => '100%',
+ 'unicodeRange' => 'U+0-10FFFF',
);
+ $settings = wp_parse_args( $settings, $defaults );
- // Convert all values to lowercase for comparison.
- // Font family names may use multibyte characters.
$font_family = mb_strtolower( $settings['fontFamily'] );
$font_style = strtolower( $settings['fontStyle'] );
$font_weight = strtolower( $settings['fontWeight'] );
@@ -98,8 +96,7 @@ public static function get_font_face_slug( $settings ) {
$unicode_range = strtoupper( $settings['unicodeRange'] );
// Convert weight keywords to numeric strings.
- $font_weight = str_replace( 'normal', '400', $font_weight );
- $font_weight = str_replace( 'bold', '700', $font_weight );
+ $font_weight = str_replace( array( 'normal', 'bold' ), array( '400', '700' ), $font_weight );
// Convert stretch keywords to numeric strings.
$font_stretch_map = array(
@@ -133,5 +130,80 @@ function ( $elem ) {
return join( ';', $slug_elements );
}
+
+ /**
+ * Sanitize a tree of data using a schema that defines the sanitization to apply to each key.
+ *
+ * It removes the keys not in the schema and applies the sanitizer to the values.
+ *
+ * @since 6.5.0
+ *
+ * @access private
+ *
+ * @param array $tree The data to sanitize.
+ * @param array $schema The schema used for sanitization.
+ *
+ * @return array The sanitized data.
+ */
+ public static function sanitize_from_schema( $tree, $schema ) {
+ if ( ! is_array( $tree ) || ! is_array( $schema ) ) {
+ return array();
+ }
+
+ foreach ( $tree as $key => $value ) {
+ // Remove keys not in the schema or with null/empty values.
+ if ( ! array_key_exists( $key, $schema ) ) {
+ unset( $tree[ $key ] );
+ continue;
+ }
+
+ $is_value_array = is_array( $value );
+ $is_schema_array = is_array( $schema[ $key ] );
+
+ if ( $is_value_array && $is_schema_array ) {
+ if ( wp_is_numeric_array( $value ) ) {
+ // If indexed, process each item in the array.
+ foreach ( $value as $item_key => $item_value ) {
+ $tree[ $key ][ $item_key ] = isset( $schema[ $key ][0] ) && is_array( $schema[ $key ][0] )
+ ? self::sanitize_from_schema( $item_value, $schema[ $key ][0] )
+ : self::apply_sanitizer( $item_value, $schema[ $key ][0] );
+ }
+ } else {
+ // If it is an associative or indexed array., process as a single object.
+ $tree[ $key ] = self::sanitize_from_schema( $value, $schema[ $key ] );
+ }
+ } elseif ( ! $is_value_array && $is_schema_array ) {
+ // If the value is not an array but the schema is, remove the key.
+ unset( $tree[ $key ] );
+ } elseif ( ! $is_schema_array ) {
+ // If the schema is not an array, apply the sanitizer to the value.
+ $tree[ $key ] = self::apply_sanitizer( $value, $schema[ $key ] );
+ }
+
+ // Remove keys with null/empty values.
+ if ( empty( $tree[ $key ] ) ) {
+ unset( $tree[ $key ] );
+ }
+ }
+
+ return $tree;
+ }
+
+ /**
+ * Apply the sanitizer to the value.
+ *
+ * @since 6.5.0
+ * @param mixed $value The value to sanitize.
+ * @param mixed $sanitizer The sanitizer to apply.
+ *
+ * @return mixed The sanitized value.
+ */
+ private static function apply_sanitizer( $value, $sanitizer ) {
+ if ( null === $sanitizer ) {
+ return $value;
+
+ }
+ return call_user_func( $sanitizer, $value );
+ }
}
}
diff --git a/lib/experimental/fonts/font-library/class-wp-rest-font-collections-controller.php b/lib/compat/wordpress-6.5/fonts/class-wp-rest-font-collections-controller.php
similarity index 86%
rename from lib/experimental/fonts/font-library/class-wp-rest-font-collections-controller.php
rename to lib/compat/wordpress-6.5/fonts/class-wp-rest-font-collections-controller.php
index 6772a8c3b44088..372f798f0d2bf9 100644
--- a/lib/experimental/fonts/font-library/class-wp-rest-font-collections-controller.php
+++ b/lib/compat/wordpress-6.5/fonts/class-wp-rest-font-collections-controller.php
@@ -84,7 +84,7 @@ public function get_items( $request ) {
if ( $page > $max_pages && $total_items > 0 ) {
return new WP_Error(
'rest_post_invalid_page_number',
- __( 'The page number requested is larger than the number of pages available.', 'default' ),
+ __( 'The page number requested is larger than the number of pages available.' ),
array( 'status' => 400 )
);
}
@@ -94,8 +94,10 @@ public function get_items( $request ) {
$items = array();
foreach ( $collections_page as $collection ) {
$item = $this->prepare_item_for_response( $collection, $request );
+
+ // If there's an error loading a collection, skip it and continue loading valid collections.
if ( is_wp_error( $item ) ) {
- return $item;
+ continue;
}
$item = $this->prepare_response_for_collection( $item );
$items[] = $item;
@@ -148,32 +150,39 @@ public function get_item( $request ) {
return $collection;
}
- $item = $this->prepare_item_for_response( $collection, $request );
-
- if ( is_wp_error( $item ) ) {
- return $item;
- }
-
- return $item;
+ return $this->prepare_item_for_response( $collection, $request );
}
- /*
+ /**
* Prepare a single collection output for response.
*
* @since 6.5.0
*
* @param WP_Font_Collection $collection Collection object.
* @param WP_REST_Request $request Request object.
- * @return array|WP_Error
+ * @return WP_REST_Response Response object.
*/
public function prepare_item_for_response( $collection, $request ) {
$fields = $this->get_fields_for_response( $request );
$item = array();
- $config_fields = array( 'slug', 'name', 'description', 'font_families', 'categories' );
- foreach ( $config_fields as $field ) {
- if ( in_array( $field, $fields, true ) ) {
- $item[ $field ] = $collection->$field;
+ if ( rest_is_field_included( 'slug', $fields ) ) {
+ $item['slug'] = $collection->slug;
+ }
+
+ // If any data fields are requested, get the collection data.
+ $data_fields = array( 'name', 'description', 'font_families', 'categories' );
+ if ( ! empty( array_intersect( $fields, $data_fields ) ) ) {
+ $collection_data = $collection->get_data();
+ if ( is_wp_error( $collection_data ) ) {
+ $collection_data->add_data( array( 'status' => 500 ) );
+ return $collection_data;
+ }
+
+ foreach ( $data_fields as $field ) {
+ if ( rest_is_field_included( $field, $fields ) ) {
+ $item[ $field ] = $collection_data[ $field ];
+ }
}
}
@@ -195,9 +204,9 @@ public function prepare_item_for_response( $collection, $request ) {
*
* @since 6.5.0
*
- * @param WP_REST_Response $response The response object.
+ * @param WP_REST_Response $response The response object.
* @param WP_Font_Collection $collection The Font Collection object.
- * @param WP_REST_Request $request Request used to generate the response.
+ * @param WP_REST_Request $request Request used to generate the response.
*/
return apply_filters( 'rest_prepare_font_collection', $response, $collection, $request );
}
@@ -262,7 +271,7 @@ public function get_item_schema() {
* @return array Links for the given font collection.
*/
protected function prepare_links( $collection ) {
- $links = array(
+ return array(
'self' => array(
'href' => rest_url( sprintf( '%s/%s/%s', $this->namespace, $this->rest_base, $collection->slug ) ),
),
@@ -270,7 +279,6 @@ protected function prepare_links( $collection ) {
'href' => rest_url( sprintf( '%s/%s', $this->namespace, $this->rest_base ) ),
),
);
- return $links;
}
/**
@@ -305,17 +313,17 @@ public function get_collection_params() {
* @return true|WP_Error True if the request has write access for the item, WP_Error object otherwise.
*/
public function get_items_permissions_check( $request ) { // phpcs:ignore VariableAnalysis.CodeAnalysis.VariableAnalysis.UnusedVariable
-
- if ( ! current_user_can( 'edit_theme_options' ) ) {
- return new WP_Error(
- 'rest_cannot_read',
- __( 'Sorry, you are not allowed to use the Font Library on this site.', 'gutenberg' ),
- array(
- 'status' => rest_authorization_required_code(),
- )
- );
+ if ( current_user_can( 'edit_theme_options' ) ) {
+ return true;
}
- return true;
+
+ return new WP_Error(
+ 'rest_cannot_read',
+ __( 'Sorry, you are not allowed to use the Font Library on this site.', 'gutenberg' ),
+ array(
+ 'status' => rest_authorization_required_code(),
+ )
+ );
}
}
}
diff --git a/lib/experimental/fonts/font-library/class-wp-rest-font-faces-controller.php b/lib/compat/wordpress-6.5/fonts/class-wp-rest-font-faces-controller.php
similarity index 99%
rename from lib/experimental/fonts/font-library/class-wp-rest-font-faces-controller.php
rename to lib/compat/wordpress-6.5/fonts/class-wp-rest-font-faces-controller.php
index 01ffce1eea4838..efecd6c6821c32 100644
--- a/lib/experimental/fonts/font-library/class-wp-rest-font-faces-controller.php
+++ b/lib/compat/wordpress-6.5/fonts/class-wp-rest-font-faces-controller.php
@@ -151,7 +151,7 @@ public function get_item_permissions_check( $request ) {
*
* @param string $value Encoded JSON string of font face settings.
* @param WP_REST_Request $request Request object.
- * @return false|WP_Error True if the settings are valid, otherwise a WP_Error object.
+ * @return true|WP_Error True if the settings are valid, otherwise a WP_Error object.
*/
public function validate_create_font_face_settings( $value, $request ) {
$settings = json_decode( $value, true );
@@ -698,7 +698,7 @@ protected function get_parent_font_family_post( $font_family_id ) {
*/
protected function prepare_links( $post ) {
// Entity meta.
- $links = array(
+ return array(
'self' => array(
'href' => rest_url( $this->namespace . '/font-families/' . $post->post_parent . '/font-faces/' . $post->ID ),
),
@@ -709,8 +709,6 @@ protected function prepare_links( $post ) {
'href' => rest_url( $this->namespace . '/font-families/' . $post->post_parent ),
),
);
-
- return $links;
}
/**
@@ -788,7 +786,7 @@ public function handle_font_file_upload_error( $file, $message ) {
$status = 500;
$code = 'rest_font_upload_unknown_error';
- if ( __( 'Sorry, you are not allowed to upload this file type.', 'default' ) === $message ) {
+ if ( __( 'Sorry, you are not allowed to upload this file type.' ) === $message ) {
$status = 400;
$code = 'rest_font_upload_invalid_file_type';
}
@@ -799,7 +797,7 @@ public function handle_font_file_upload_error( $file, $message ) {
/**
* Returns relative path to an uploaded font file.
*
- * The path is relative to the current fonts dir.
+ * The path is relative to the current fonts directory.
*
* @since 6.5.0
* @access private
diff --git a/lib/experimental/fonts/font-library/class-wp-rest-font-families-controller.php b/lib/compat/wordpress-6.5/fonts/class-wp-rest-font-families-controller.php
similarity index 99%
rename from lib/experimental/fonts/font-library/class-wp-rest-font-families-controller.php
rename to lib/compat/wordpress-6.5/fonts/class-wp-rest-font-families-controller.php
index 8d178a2848a35e..7586fe0209329c 100644
--- a/lib/experimental/fonts/font-library/class-wp-rest-font-families-controller.php
+++ b/lib/compat/wordpress-6.5/fonts/class-wp-rest-font-families-controller.php
@@ -77,7 +77,7 @@ public function get_item_permissions_check( $request ) {
*
* @param string $value Encoded JSON string of font family settings.
* @param WP_REST_Request $request Request object.
- * @return false|WP_Error True if the settings are valid, otherwise a WP_Error object.
+ * @return true|WP_Error True if the settings are valid, otherwise a WP_Error object.
*/
public function validate_font_family_settings( $value, $request ) {
$settings = json_decode( $value, true );
@@ -405,7 +405,6 @@ public function get_endpoint_args_for_item_schema( $method = WP_REST_Server::CRE
*
* @param int $font_family_id Font family post ID.
* @return int[] Array of child font face post IDs.
- * .
*/
protected function get_font_face_ids( $font_family_id ) {
$query = new WP_Query(
diff --git a/lib/experimental/fonts/font-library/font-library.php b/lib/compat/wordpress-6.5/fonts/fonts.php
similarity index 83%
rename from lib/experimental/fonts/font-library/font-library.php
rename to lib/compat/wordpress-6.5/fonts/fonts.php
index bcac6f627fe672..28b019b9c1fa61 100644
--- a/lib/experimental/fonts/font-library/font-library.php
+++ b/lib/compat/wordpress-6.5/fonts/fonts.php
@@ -19,7 +19,7 @@
*
* @since 6.5.0
*/
-function gutenberg_init_font_library_routes() {
+function gutenberg_create_initial_post_types() {
// @core-merge: This code will go into Core's `create_initial_post_types()`.
$args = array(
'labels' => array(
@@ -82,13 +82,30 @@ function gutenberg_init_font_library_routes() {
'autosave_rest_controller_class' => 'stdClass',
)
);
+}
+/**
+ * Initializes REST routes.
+ *
+ * @since 6.5
+ */
+function gutenberg_create_initial_rest_routes() {
// @core-merge: This code will go into Core's `create_initial_rest_routes()`.
$font_collections_controller = new WP_REST_Font_Collections_Controller();
$font_collections_controller->register_routes();
}
-add_action( 'rest_api_init', 'gutenberg_init_font_library_routes' );
+/**
+ * Initializes REST routes and post types.
+ *
+ * @since 6.5
+ */
+function gutenberg_init_font_library() {
+ gutenberg_create_initial_post_types();
+ gutenberg_create_initial_rest_routes();
+}
+
+add_action( 'rest_api_init', 'gutenberg_init_font_library' );
if ( ! function_exists( 'wp_register_font_collection' ) ) {
@@ -97,9 +114,10 @@ function gutenberg_init_font_library_routes() {
*
* @since 6.5.0
*
- * @param string $slug_or_file Font collection slug or path/url to a JSON file defining the font collection.
- * @param string[] $args {
- * Optional. Font collection associative array of configuration options.
+ * @param string $slug Font collection slug or path/url to a JSON file defining the font collection.
+ * @param array|string $data_or_file {
+ * Font collection associative array of data, or a file path or url to a JSON
+ * file containing the font collection.
*
* @type string $name Name of the font collection.
* @type string $description Description of the font collection.
@@ -107,24 +125,10 @@ function gutenberg_init_font_library_routes() {
* @type array $categories Array of categories for the fonts that are in the collection.
* }
* @return WP_Font_Collection|WP_Error A font collection is it was registered
- * successfully, else WP_Error.
+ * successfully, or WP_Error object on failure.
*/
- function wp_register_font_collection( $slug, $args = array() ) {
- return WP_Font_Library::register_font_collection( $slug, $args );
- }
-}
-
-if ( ! function_exists( 'wp_register_font_collection_from_json' ) ) {
- /**
- * Registers a new Font Collection from a json file in the Font Library.
- *
- * @since 6.5.0
- *
- * @param string $file_or_url File path or URL to a JSON file containing the font collection data.
- * @return WP_Font_Collection|WP_Error A font collection if registration was successful, else WP_Error.
- */
- function wp_register_font_collection_from_json( $file_or_url ) {
- return WP_Font_Library::register_font_collection_from_json( $file_or_url );
+ function wp_register_font_collection( $slug, $data_or_file ) {
+ return WP_Font_Library::register_font_collection( $slug, $data_or_file );
}
}
@@ -135,14 +139,18 @@ function wp_register_font_collection_from_json( $file_or_url ) {
* @since 6.5.0
*
* @param string $collection_id The font collection ID.
+ * @return bool True if the font collection was unregistered successfully, else false.
*/
function wp_unregister_font_collection( $collection_id ) {
- WP_Font_Library::unregister_font_collection( $collection_id );
+ return WP_Font_Library::unregister_font_collection( $collection_id );
}
}
-// TODO: update to production font collection URL.
-wp_register_font_collection_from_json( 'https://raw.githubusercontent.com/WordPress/google-fonts-to-wordpress-collection/01aa57731575bd13f9db8d86ab80a2d74e28a1ac/releases/gutenberg-17.6/collections/google-fonts-with-preview.json' );
+function gutenberg_register_font_collections() {
+ // TODO: update to production font collection URL.
+ wp_register_font_collection( 'google-fonts', 'https://raw.githubusercontent.com/WordPress/google-fonts-to-wordpress-collection/01aa57731575bd13f9db8d86ab80a2d74e28a1ac/releases/gutenberg-17.6/collections/google-fonts-with-preview.json' );
+}
+add_action( 'init', 'gutenberg_register_font_collections' );
// @core-merge: This code should probably go into Core's src/wp-includes/functions.php.
if ( ! function_exists( 'wp_get_font_dir' ) ) {
@@ -161,7 +169,6 @@ function wp_unregister_font_collection( $collection_id ) {
* @type string $baseurl URL path without subdir.
* @type string|false $error False or error message.
* }
- *
* @return array $defaults {
* Array of information about the upload directory.
*
@@ -188,7 +195,15 @@ function wp_get_font_dir( $defaults = array() ) {
$defaults['baseurl'] = untrailingslashit( content_url( 'fonts' ) ) . $site_path;
$defaults['error'] = false;
- // Filters the fonts directory data.
+ /**
+ * Filters the fonts directory data.
+ *
+ * This filter allows developers to modify the fonts directory data.
+ *
+ * @since 6.5.0
+ *
+ * @param array $defaults The original fonts directory data.
+ */
return apply_filters( 'font_dir', $defaults );
}
}
@@ -204,7 +219,6 @@ function wp_get_font_dir( $defaults = array() ) {
*
* @param int $post_id Post ID.
* @param WP_Post $post Post object.
- * @return void
*/
function _wp_after_delete_font_family( $post_id, $post ) {
if ( 'wp_font_family' !== $post->post_type ) {
@@ -234,7 +248,6 @@ function _wp_after_delete_font_family( $post_id, $post ) {
*
* @param int $post_id Post ID.
* @param WP_Post $post Post object.
- * @return void
*/
function _wp_before_delete_font_face( $post_id, $post ) {
if ( 'wp_font_face' !== $post->post_type ) {
@@ -284,7 +297,7 @@ function gutenberg_convert_legacy_font_family_format() {
continue;
}
- $font_faces = $font_family_json['fontFace'] ?? array();
+ $font_faces = isset( $font_family_json['fontFace'] ) ? $font_family_json['fontFace'] : array();
unset( $font_family_json['fontFace'] );
// Save wp_font_face posts within the family.
@@ -299,7 +312,7 @@ function gutenberg_convert_legacy_font_family_format() {
$font_face_id = wp_insert_post( wp_slash( $args ) );
- $file_urls = (array) $font_face['src'] ?? array();
+ $file_urls = (array) ( isset( $font_face['src'] ) ? $font_face['src'] : array() );
foreach ( $file_urls as $file_url ) {
// continue if the file is not local.
@@ -315,7 +328,7 @@ function gutenberg_convert_legacy_font_family_format() {
// Update the font family post to remove the font face data.
$args = array();
$args['ID'] = $font_family->ID;
- $args['post_title'] = $font_family_json['name'] ?? '';
+ $args['post_title'] = isset( $font_family_json['name'] ) ? $font_family_json['name'] : '';
$args['post_name'] = sanitize_title( $font_family_json['slug'] );
unset( $font_family_json['name'] );
diff --git a/lib/compat/wordpress-6.5/interactivity-api/class-wp-interactivity-api.php b/lib/compat/wordpress-6.5/interactivity-api/class-wp-interactivity-api.php
index ad9e5d7c439533..9cbbfb1d6b6540 100644
--- a/lib/compat/wordpress-6.5/interactivity-api/class-wp-interactivity-api.php
+++ b/lib/compat/wordpress-6.5/interactivity-api/class-wp-interactivity-api.php
@@ -18,12 +18,13 @@ class WP_Interactivity_API {
* @var array
*/
private static $directive_processors = array(
- 'data-wp-interactive' => 'data_wp_interactive_processor',
- 'data-wp-context' => 'data_wp_context_processor',
- 'data-wp-bind' => 'data_wp_bind_processor',
- 'data-wp-class' => 'data_wp_class_processor',
- 'data-wp-style' => 'data_wp_style_processor',
- 'data-wp-text' => 'data_wp_text_processor',
+ 'data-wp-interactive' => 'data_wp_interactive_processor',
+ 'data-wp-router-region' => 'data_wp_router_region_processor',
+ 'data-wp-context' => 'data_wp_context_processor',
+ 'data-wp-bind' => 'data_wp_bind_processor',
+ 'data-wp-class' => 'data_wp_class_processor',
+ 'data-wp-style' => 'data_wp_style_processor',
+ 'data-wp-text' => 'data_wp_text_processor',
);
/**
@@ -49,6 +50,21 @@ class WP_Interactivity_API {
*/
private $config_data = array();
+ /**
+ * Flag that indicates whether the `data-wp-router-region` directive has
+ * been found in the HTML and processed.
+ *
+ * The value is saved in a private property of the WP_Interactivity_API
+ * instance instead of using a static variable inside the processor
+ * function, which would hold the same value for all instances
+ * independently of whether they have processed any
+ * `data-wp-router-region` directive or not.
+ *
+ * @since 6.5.0
+ * @var bool
+ */
+ private $has_processed_router_region = false;
+
/**
* Gets and/or sets the initial state of an Interactivity API store for a
* given namespace.
@@ -673,6 +689,88 @@ private function data_wp_text_processor( WP_Interactivity_API_Directives_Process
}
}
}
+
+ /**
+ * Processes the `data-wp-router-region` directive.
+ *
+ * It renders in the footer a set of HTML elements to notify users about
+ * client-side navigations. More concretely, the elements added are 1) a
+ * top loading bar to visually inform that a navigation is in progress
+ * and 2) an `aria-live` region for accessible navigation announcements.
+ *
+ * @since 6.5.0
+ *
+ * @param WP_Interactivity_API_Directives_Processor $p The directives processor instance.
+ */
+ private function data_wp_router_region_processor( WP_Interactivity_API_Directives_Processor $p ) {
+ if ( ! $p->is_tag_closer() && ! $this->has_processed_router_region ) {
+ $this->has_processed_router_region = true;
+
+ // Initialize the `core/router` store.
+ $this->state(
+ 'core/router',
+ array(
+ 'navigation' => array(
+ 'message' => '',
+ 'hasStarted' => false,
+ 'hasFinished' => false,
+ 'texts' => array(
+ 'loading' => __( 'Loading page, please wait.' ),
+ 'loaded' => __( 'Page Loaded.' ),
+ ),
+ ),
+ )
+ );
+
+ $callback = static function () {
+ echo <<
+.wp-interactivity-router_loading-bar {
+ position: fixed;
+ top: 0;
+ left: 0;
+ margin: 0;
+ padding: 0;
+ width: 100vw;
+ max-width: 100vw !important;
+ height: 4px;
+ background-color: var(--wp--preset--color--primary, #000);
+ opacity: 0
+}
+.wp-interactivity-router_loading-bar.start-animation {
+ animation: wp-interactivity-router_loading-bar-start-animation 30s cubic-bezier(0.03, 0.5, 0, 1) forwards
+}
+.wp-interactivity-router_loading-bar.finish-animation {
+ animation: wp-interactivity-router_loading-bar-finish-animation 300ms ease-in
+}
+
+@keyframes wp-interactivity-router_loading-bar-start-animation {
+ 0% { transform: scaleX(0); transform-origin: 0% 0%; opacity: 1 }
+ 100% { transform: scaleX(1); transform-origin: 0% 0%; opacity: 1 }
+}
+@keyframes wp-interactivity-router_loading-bar-finish-animation {
+ 0% { opacity: 1 }
+ 50% { opacity: 1 }
+ 100% { opacity: 0 }
+}
+
+
+
+HTML;
+ };
+ add_action( 'wp_footer', $callback );
+ }
+ }
}
}
diff --git a/lib/compat/wordpress-6.5/interactivity-api/interactivity-api.php b/lib/compat/wordpress-6.5/interactivity-api/interactivity-api.php
index cd7ca7fb902870..32900a78f6d691 100644
--- a/lib/compat/wordpress-6.5/interactivity-api/interactivity-api.php
+++ b/lib/compat/wordpress-6.5/interactivity-api/interactivity-api.php
@@ -31,7 +31,11 @@ function wp_interactivity_process_directives_of_interactive_blocks( $parsed_bloc
$block_name = $parsed_block['blockName'];
$block_type = WP_Block_Type_Registry::get_instance()->get_registered( $block_name );
- if ( isset( $block_name ) && isset( $block_type->supports['interactivity'] ) && $block_type->supports['interactivity'] ) {
+ if (
+ isset( $block_name ) &&
+ ( ( isset( $block_type->supports['interactivity'] ) && true === $block_type->supports['interactivity'] ) ||
+ ( isset( $block_type->supports['interactivity']['interactive'] ) && true === $block_type->supports['interactivity']['interactive'] ) )
+ ) {
// Annotates the root interactive block for processing.
$root_interactive_block = array( $block_name, md5( serialize( $parsed_block ) ) );
diff --git a/lib/compat/wordpress-6.5/scripts-modules.php b/lib/compat/wordpress-6.5/scripts-modules.php
index ba329b255b1965..740a16581ce7f1 100644
--- a/lib/compat/wordpress-6.5/scripts-modules.php
+++ b/lib/compat/wordpress-6.5/scripts-modules.php
@@ -20,13 +20,14 @@
* @return WP_Script_Modules The main WP_Script_Modules instance.
*/
function wp_script_modules(): WP_Script_Modules {
- static $instance = null;
- if ( is_null( $instance ) ) {
- $instance = new WP_Script_Modules();
- $instance->add_hooks();
+ global $wp_script_modules;
+
+ if ( ! ( $wp_script_modules instanceof WP_Script_Modules ) ) {
+ $wp_script_modules = new WP_Script_Modules();
}
- return $instance;
+ return $wp_script_modules;
}
+ wp_script_modules()->add_hooks();
}
if ( ! function_exists( 'wp_register_script_module' ) ) {
diff --git a/lib/experimental/fonts/font-face/bc-layer/class-gutenberg-fonts-api-bc-layer.php b/lib/experimental/font-face/bc-layer/class-gutenberg-fonts-api-bc-layer.php
similarity index 100%
rename from lib/experimental/fonts/font-face/bc-layer/class-gutenberg-fonts-api-bc-layer.php
rename to lib/experimental/font-face/bc-layer/class-gutenberg-fonts-api-bc-layer.php
diff --git a/lib/experimental/fonts/font-face/bc-layer/class-wp-fonts-provider-local.php b/lib/experimental/font-face/bc-layer/class-wp-fonts-provider-local.php
similarity index 100%
rename from lib/experimental/fonts/font-face/bc-layer/class-wp-fonts-provider-local.php
rename to lib/experimental/font-face/bc-layer/class-wp-fonts-provider-local.php
diff --git a/lib/experimental/fonts/font-face/bc-layer/class-wp-fonts-provider.php b/lib/experimental/font-face/bc-layer/class-wp-fonts-provider.php
similarity index 100%
rename from lib/experimental/fonts/font-face/bc-layer/class-wp-fonts-provider.php
rename to lib/experimental/font-face/bc-layer/class-wp-fonts-provider.php
diff --git a/lib/experimental/fonts/font-face/bc-layer/class-wp-fonts-resolver.php b/lib/experimental/font-face/bc-layer/class-wp-fonts-resolver.php
similarity index 100%
rename from lib/experimental/fonts/font-face/bc-layer/class-wp-fonts-resolver.php
rename to lib/experimental/font-face/bc-layer/class-wp-fonts-resolver.php
diff --git a/lib/experimental/fonts/font-face/bc-layer/class-wp-fonts-utils.php b/lib/experimental/font-face/bc-layer/class-wp-fonts-utils.php
similarity index 100%
rename from lib/experimental/fonts/font-face/bc-layer/class-wp-fonts-utils.php
rename to lib/experimental/font-face/bc-layer/class-wp-fonts-utils.php
diff --git a/lib/experimental/fonts/font-face/bc-layer/class-wp-fonts.php b/lib/experimental/font-face/bc-layer/class-wp-fonts.php
similarity index 100%
rename from lib/experimental/fonts/font-face/bc-layer/class-wp-fonts.php
rename to lib/experimental/font-face/bc-layer/class-wp-fonts.php
diff --git a/lib/experimental/fonts/font-face/bc-layer/class-wp-web-fonts.php b/lib/experimental/font-face/bc-layer/class-wp-web-fonts.php
similarity index 100%
rename from lib/experimental/fonts/font-face/bc-layer/class-wp-web-fonts.php
rename to lib/experimental/font-face/bc-layer/class-wp-web-fonts.php
diff --git a/lib/experimental/fonts/font-face/bc-layer/class-wp-webfonts-provider-local.php b/lib/experimental/font-face/bc-layer/class-wp-webfonts-provider-local.php
similarity index 100%
rename from lib/experimental/fonts/font-face/bc-layer/class-wp-webfonts-provider-local.php
rename to lib/experimental/font-face/bc-layer/class-wp-webfonts-provider-local.php
diff --git a/lib/experimental/fonts/font-face/bc-layer/class-wp-webfonts-provider.php b/lib/experimental/font-face/bc-layer/class-wp-webfonts-provider.php
similarity index 100%
rename from lib/experimental/fonts/font-face/bc-layer/class-wp-webfonts-provider.php
rename to lib/experimental/font-face/bc-layer/class-wp-webfonts-provider.php
diff --git a/lib/experimental/fonts/font-face/bc-layer/class-wp-webfonts-utils.php b/lib/experimental/font-face/bc-layer/class-wp-webfonts-utils.php
similarity index 100%
rename from lib/experimental/fonts/font-face/bc-layer/class-wp-webfonts-utils.php
rename to lib/experimental/font-face/bc-layer/class-wp-webfonts-utils.php
diff --git a/lib/experimental/fonts/font-face/bc-layer/class-wp-webfonts.php b/lib/experimental/font-face/bc-layer/class-wp-webfonts.php
similarity index 100%
rename from lib/experimental/fonts/font-face/bc-layer/class-wp-webfonts.php
rename to lib/experimental/font-face/bc-layer/class-wp-webfonts.php
diff --git a/lib/experimental/fonts/font-face/bc-layer/webfonts-deprecations.php b/lib/experimental/font-face/bc-layer/webfonts-deprecations.php
similarity index 100%
rename from lib/experimental/fonts/font-face/bc-layer/webfonts-deprecations.php
rename to lib/experimental/font-face/bc-layer/webfonts-deprecations.php
diff --git a/lib/experimental/fonts/font-library/class-wp-font-collection.php b/lib/experimental/fonts/font-library/class-wp-font-collection.php
deleted file mode 100644
index 654b23c98497f1..00000000000000
--- a/lib/experimental/fonts/font-library/class-wp-font-collection.php
+++ /dev/null
@@ -1,216 +0,0 @@
-slug = sanitize_title( $slug );
- $this->name = isset( $args['name'] ) ? $args['name'] : __( 'Unnamed Font Collection', 'gutenberg' );
- $this->description = isset( $args['description'] ) ? $args['description'] : '';
- $this->font_families = isset( $args['font_families'] ) ? $args['font_families'] : array();
- $this->categories = isset( $args['categories'] ) ? $args['categories'] : array();
-
- if ( $this->slug !== $slug ) {
- _doing_it_wrong(
- __METHOD__,
- /* translators: %s: Font collection slug. */
- sprintf( __( 'Font collection slug "%s" is not valid. Slugs must use only alphanumeric characters, dashes, and underscores.', 'gutenberg' ), $slug ),
- '6.5.0'
- );
- }
-
- if ( empty( $args['font_families'] ) ) {
- _doing_it_wrong(
- __METHOD__,
- /* translators: %s: Font collection slug. */
- sprintf( __( 'Font collection "%s" does not contain any font families.', 'gutenberg' ), $slug ),
- '6.5.0'
- );
- }
-
- return true;
- }
-
- /**
- * Loads the font collection data from a json file path or url.
- *
- * @since 6.5.0
- *
- * @param string $file_or_url File path or url to a json file containing the font collection data.
- * @return array|WP_Error An array containing the font collection data on success,
- * else an instance of WP_Error on failure.
- */
- public static function load_from_json( $file_or_url ) {
- $url = wp_http_validate_url( $file_or_url );
- $file = file_exists( $file_or_url ) ? wp_normalize_path( realpath( $file_or_url ) ) : false;
-
- if ( ! $url && ! $file ) {
- // translators: %s: File path or url to font collection json file.
- $message = sprintf( __( 'Font collection JSON file "%s" is invalid or does not exist.', 'gutenberg' ), $file_or_url );
- _doing_it_wrong( __METHOD__, $message, '6.5.0' );
- return new WP_Error( 'font_collection_json_missing', $message );
- }
-
- return $url ? self::load_from_url( $url ) : self::load_from_file( $file );
- }
-
- /**
- * Loads the font collection data from a json file path.
- *
- * @since 6.5.0
- *
- * @param string $file File path to a json file containing the font collection data.
- * @return array|WP_Error An array containing the font collection data on success,
- * else an instance of WP_Error on failure.
- */
- private static function load_from_file( $file ) {
- if ( array_key_exists( $file, static::$collection_json_cache ) ) {
- return static::$collection_json_cache[ $file ];
- }
-
- $data = wp_json_file_decode( $file, array( 'associative' => true ) );
- if ( empty( $data ) ) {
- return new WP_Error( 'font_collection_decode_error', __( 'Error decoding the font collection JSON file contents.', 'gutenberg' ) );
- }
-
- if ( empty( $data['slug'] ) ) {
- // translators: %s: Font collection JSON URL.
- $message = sprintf( __( 'Font collection JSON file "%s" requires a slug.', 'gutenberg' ), $file );
- _doing_it_wrong( __METHOD__, $message, '6.5.0' );
- return new WP_Error( 'font_collection_invalid_json', $message );
- }
-
- static::$collection_json_cache[ $file ] = $data;
-
- return $data;
- }
-
- /**
- * Loads the font collection data from a json file url.
- *
- * @since 6.5.0
- *
- * @param string $url Url to a json file containing the font collection data.
- * @return array|WP_Error An array containing the font collection data on success,
- * else an instance of WP_Error on failure.
- */
- private static function load_from_url( $url ) {
- if ( array_key_exists( $url, static::$collection_json_cache ) ) {
- return static::$collection_json_cache[ $url ];
- }
-
- // Limit key to 167 characters to avoid failure in the case of a long url.
- $transient_key = substr( 'wp_font_collection_url_' . $url, 0, 167 );
- $data = get_site_transient( $transient_key );
-
- if ( false === $data ) {
- $response = wp_safe_remote_get( $url );
- if ( is_wp_error( $response ) || 200 !== wp_remote_retrieve_response_code( $response ) ) {
- // translators: %s: Font collection url.
- return new WP_Error( 'font_collection_request_error', sprintf( __( 'Error fetching the font collection data from "%s".', 'gutenberg' ), $url ) );
- }
-
- $data = json_decode( wp_remote_retrieve_body( $response ), true );
- if ( empty( $data ) ) {
- return new WP_Error( 'font_collection_decode_error', __( 'Error decoding the font collection data from the REST response JSON.', 'gutenberg' ) );
- }
-
- if ( empty( $data['slug'] ) ) {
- // translators: %s: Font collection JSON URL.
- $message = sprintf( __( 'Font collection JSON file "%s" requires a slug.', 'gutenberg' ), $url );
- _doing_it_wrong( __METHOD__, $message, '6.5.0' );
- return new WP_Error( 'font_collection_invalid_json', $message );
- }
-
- set_site_transient( $transient_key, $data, DAY_IN_SECONDS );
- }
-
- static::$collection_json_cache[ $url ] = $data;
-
- return $data;
- }
- }
-}
diff --git a/lib/load.php b/lib/load.php
index f5c606727f9f47..4fc9b300606d8f 100644
--- a/lib/load.php
+++ b/lib/load.php
@@ -137,13 +137,13 @@ function gutenberg_is_experiment_enabled( $name ) {
remove_action( 'plugins_loaded', '_wp_theme_json_webfonts_handler' ); // Turns off WordPress 6.0's stopgap handler.
// Loads the Font Library.
-require __DIR__ . '/experimental/fonts/font-library/class-wp-font-collection.php';
-require __DIR__ . '/experimental/fonts/font-library/class-wp-font-library.php';
-require __DIR__ . '/experimental/fonts/font-library/class-wp-font-utils.php';
-require __DIR__ . '/experimental/fonts/font-library/class-wp-rest-font-families-controller.php';
-require __DIR__ . '/experimental/fonts/font-library/class-wp-rest-font-faces-controller.php';
-require __DIR__ . '/experimental/fonts/font-library/class-wp-rest-font-collections-controller.php';
-require __DIR__ . '/experimental/fonts/font-library/font-library.php';
+require __DIR__ . '/compat/wordpress-6.5/fonts/class-wp-font-collection.php';
+require __DIR__ . '/compat/wordpress-6.5/fonts/class-wp-font-library.php';
+require __DIR__ . '/compat/wordpress-6.5/fonts/class-wp-font-utils.php';
+require __DIR__ . '/compat/wordpress-6.5/fonts/class-wp-rest-font-families-controller.php';
+require __DIR__ . '/compat/wordpress-6.5/fonts/class-wp-rest-font-faces-controller.php';
+require __DIR__ . '/compat/wordpress-6.5/fonts/class-wp-rest-font-collections-controller.php';
+require __DIR__ . '/compat/wordpress-6.5/fonts/fonts.php';
// Load the Font Face and Font Face Resolver, if not already loaded by WordPress Core.
if ( ! class_exists( 'WP_Font_Face' ) ) {
@@ -160,18 +160,18 @@ function gutenberg_is_experiment_enabled( $name ) {
// Load the BC Layer to avoid fatal errors of extenders using the Fonts API.
// @core-merge: do not merge the BC layer files into WordPress Core.
-require __DIR__ . '/experimental/fonts/font-face/bc-layer/class-wp-fonts-provider.php';
-require __DIR__ . '/experimental/fonts/font-face/bc-layer/class-wp-fonts-utils.php';
-require __DIR__ . '/experimental/fonts/font-face/bc-layer/class-wp-fonts.php';
-require __DIR__ . '/experimental/fonts/font-face/bc-layer/class-wp-fonts-provider-local.php';
-require __DIR__ . '/experimental/fonts/font-face/bc-layer/class-wp-fonts-resolver.php';
-require __DIR__ . '/experimental/fonts/font-face/bc-layer/class-gutenberg-fonts-api-bc-layer.php';
-require __DIR__ . '/experimental/fonts/font-face/bc-layer/webfonts-deprecations.php';
-require __DIR__ . '/experimental/fonts/font-face/bc-layer/class-wp-webfonts-utils.php';
-require __DIR__ . '/experimental/fonts/font-face/bc-layer/class-wp-webfonts-provider.php';
-require __DIR__ . '/experimental/fonts/font-face/bc-layer/class-wp-webfonts-provider-local.php';
-require __DIR__ . '/experimental/fonts/font-face/bc-layer/class-wp-webfonts.php';
-require __DIR__ . '/experimental/fonts/font-face/bc-layer/class-wp-web-fonts.php';
+require __DIR__ . '/experimental/font-face/bc-layer/class-wp-fonts-provider.php';
+require __DIR__ . '/experimental/font-face/bc-layer/class-wp-fonts-utils.php';
+require __DIR__ . '/experimental/font-face/bc-layer/class-wp-fonts.php';
+require __DIR__ . '/experimental/font-face/bc-layer/class-wp-fonts-provider-local.php';
+require __DIR__ . '/experimental/font-face/bc-layer/class-wp-fonts-resolver.php';
+require __DIR__ . '/experimental/font-face/bc-layer/class-gutenberg-fonts-api-bc-layer.php';
+require __DIR__ . '/experimental/font-face/bc-layer/webfonts-deprecations.php';
+require __DIR__ . '/experimental/font-face/bc-layer/class-wp-webfonts-utils.php';
+require __DIR__ . '/experimental/font-face/bc-layer/class-wp-webfonts-provider.php';
+require __DIR__ . '/experimental/font-face/bc-layer/class-wp-webfonts-provider-local.php';
+require __DIR__ . '/experimental/font-face/bc-layer/class-wp-webfonts.php';
+require __DIR__ . '/experimental/font-face/bc-layer/class-wp-web-fonts.php';
// Plugin specific code.
require __DIR__ . '/script-loader.php';
@@ -179,6 +179,7 @@ function gutenberg_is_experiment_enabled( $name ) {
require __DIR__ . '/class-wp-theme-json-data-gutenberg.php';
require __DIR__ . '/class-wp-theme-json-gutenberg.php';
require __DIR__ . '/class-wp-theme-json-resolver-gutenberg.php';
+require __DIR__ . '/class-wp-theme-json-schema-gutenberg.php';
require __DIR__ . '/class-wp-duotone-gutenberg.php';
require __DIR__ . '/blocks.php';
require __DIR__ . '/block-editor-settings.php';
diff --git a/package-lock.json b/package-lock.json
index bfb99d54916a2f..e79fd2b4534086 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -55551,7 +55551,7 @@
},
"packages/react-native-aztec": {
"name": "@wordpress/react-native-aztec",
- "version": "1.111.2",
+ "version": "1.112.0",
"license": "GPL-2.0-or-later",
"dependencies": {
"@wordpress/element": "file:../element",
@@ -55564,7 +55564,7 @@
},
"packages/react-native-bridge": {
"name": "@wordpress/react-native-bridge",
- "version": "1.111.2",
+ "version": "1.112.0",
"license": "GPL-2.0-or-later",
"dependencies": {
"@wordpress/react-native-aztec": "file:../react-native-aztec"
@@ -55575,7 +55575,7 @@
},
"packages/react-native-editor": {
"name": "@wordpress/react-native-editor",
- "version": "1.111.2",
+ "version": "1.112.0",
"hasInstallScript": true,
"license": "GPL-2.0-or-later",
"dependencies": {
diff --git a/packages/block-editor/src/components/block-list-appender/index.js b/packages/block-editor/src/components/block-list-appender/index.js
index 68f36f7dd25058..928f9fc29d1707 100644
--- a/packages/block-editor/src/components/block-list-appender/index.js
+++ b/packages/block-editor/src/components/block-list-appender/index.js
@@ -39,77 +39,12 @@ function DefaultAppender( { rootClientId } ) {
);
}
-function useAppender( rootClientId, CustomAppender ) {
- const isVisible = useSelect(
- ( select ) => {
- const {
- getTemplateLock,
- getSelectedBlockClientId,
- __unstableGetEditorMode,
- getBlockEditingMode,
- } = select( blockEditorStore );
-
- if ( ! CustomAppender ) {
- const selectedBlockClientId = getSelectedBlockClientId();
- const isParentSelected =
- rootClientId === selectedBlockClientId ||
- ( ! rootClientId && ! selectedBlockClientId );
- if ( ! isParentSelected ) {
- return false;
- }
- }
-
- if (
- getTemplateLock( rootClientId ) ||
- getBlockEditingMode( rootClientId ) === 'disabled' ||
- __unstableGetEditorMode() === 'zoom-out'
- ) {
- return false;
- }
-
- return true;
- },
- [ rootClientId, CustomAppender ]
- );
-
- if ( ! isVisible ) {
- return null;
- }
-
- return CustomAppender ? (
-
- ) : (
-
- );
-}
-
-function BlockListAppender( {
+export default function BlockListAppender( {
rootClientId,
- renderAppender,
+ CustomAppender,
className,
tagName: TagName = 'div',
} ) {
- if ( renderAppender === false ) {
- return null;
- }
-
- return (
-
- );
-}
-
-function BlockListAppenderInner( {
- rootClientId,
- renderAppender,
- className,
- tagName: TagName,
-} ) {
- const appender = useAppender( rootClientId, renderAppender );
const isDragOver = useSelect(
( select ) => {
const {
@@ -130,10 +65,6 @@ function BlockListAppenderInner( {
[ rootClientId ]
);
- if ( ! appender ) {
- return null;
- }
-
return (
- { appender }
+ { CustomAppender ? (
+
);
}
-
-export default BlockListAppender;
diff --git a/packages/block-editor/src/components/block-list/index.js b/packages/block-editor/src/components/block-list/index.js
index 09a4712a3dd6dd..a966c2850289de 100644
--- a/packages/block-editor/src/components/block-list/index.js
+++ b/packages/block-editor/src/components/block-list/index.js
@@ -151,29 +151,51 @@ export default function BlockList( settings ) {
function Items( {
placeholder,
rootClientId,
- renderAppender,
+ renderAppender: CustomAppender,
__experimentalAppenderTagName,
layout = defaultLayout,
} ) {
- const { order, selectedBlocks, visibleBlocks, temporarilyEditingAsBlocks } =
- useSelect(
- ( select ) => {
- const {
- getBlockOrder,
- getSelectedBlockClientIds,
- __unstableGetVisibleBlocks,
- __unstableGetTemporarilyEditingAsBlocks,
- } = select( blockEditorStore );
- return {
- order: getBlockOrder( rootClientId ),
- selectedBlocks: getSelectedBlockClientIds(),
- visibleBlocks: __unstableGetVisibleBlocks(),
- temporarilyEditingAsBlocks:
- __unstableGetTemporarilyEditingAsBlocks(),
- };
- },
- [ rootClientId ]
- );
+ // Avoid passing CustomAppender to useSelect because it could be a new
+ // function on every render.
+ const hasAppender = CustomAppender !== false;
+ const hasCustomAppender = !! CustomAppender;
+ const {
+ order,
+ selectedBlocks,
+ visibleBlocks,
+ temporarilyEditingAsBlocks,
+ shouldRenderAppender,
+ } = useSelect(
+ ( select ) => {
+ const {
+ getBlockOrder,
+ getSelectedBlockClientId,
+ getSelectedBlockClientIds,
+ __unstableGetVisibleBlocks,
+ __unstableGetTemporarilyEditingAsBlocks,
+ getTemplateLock,
+ getBlockEditingMode,
+ __unstableGetEditorMode,
+ } = select( blockEditorStore );
+ const selectedBlockClientId = getSelectedBlockClientId();
+ return {
+ order: getBlockOrder( rootClientId ),
+ selectedBlocks: getSelectedBlockClientIds(),
+ visibleBlocks: __unstableGetVisibleBlocks(),
+ temporarilyEditingAsBlocks:
+ __unstableGetTemporarilyEditingAsBlocks(),
+ shouldRenderAppender:
+ hasAppender &&
+ ( hasCustomAppender
+ ? ! getTemplateLock( rootClientId ) &&
+ getBlockEditingMode( rootClientId ) !== 'disabled' &&
+ __unstableGetEditorMode() !== 'zoom-out'
+ : rootClientId === selectedBlockClientId ||
+ ( ! rootClientId && ! selectedBlockClientId ) ),
+ };
+ },
+ [ rootClientId, hasAppender, hasCustomAppender ]
+ );
return (
@@ -199,11 +221,13 @@ function Items( {
clientId={ temporarilyEditingAsBlocks }
/>
) }
-
);
}
diff --git a/packages/block-editor/src/components/block-switcher/index.js b/packages/block-editor/src/components/block-switcher/index.js
index f73a5de543bd4a..8a8d1908f38544 100644
--- a/packages/block-editor/src/components/block-switcher/index.js
+++ b/packages/block-editor/src/components/block-switcher/index.js
@@ -21,7 +21,6 @@ import { copy } from '@wordpress/icons';
* Internal dependencies
*/
import { store as blockEditorStore } from '../../store';
-import useBlockDisplayInformation from '../use-block-display-information';
import BlockIcon from '../block-icon';
import BlockTransformationsMenu from './block-transformations-menu';
import { useBlockVariationTransforms } from './block-variation-transformations';
@@ -162,7 +161,6 @@ function BlockSwitcherDropdownMenuContents( {
}
export const BlockSwitcher = ( { clientIds } ) => {
- const blockInformation = useBlockDisplayInformation( clientIds?.[ 0 ] );
const {
canRemove,
hasBlockStyles,
@@ -175,9 +173,11 @@ export const BlockSwitcher = ( { clientIds } ) => {
const {
getBlockRootClientId,
getBlocksByClientId,
+ getBlockAttributes,
canRemoveBlocks,
} = select( blockEditorStore );
- const { getBlockStyles, getBlockType } = select( blocksStore );
+ const { getBlockStyles, getBlockType, getActiveBlockVariation } =
+ select( blocksStore );
const _blocks = getBlocksByClientId( clientIds );
if ( ! _blocks.length || _blocks.some( ( block ) => ! block ) ) {
return { invalidBlocks: true };
@@ -185,18 +185,24 @@ export const BlockSwitcher = ( { clientIds } ) => {
const rootClientId = getBlockRootClientId( clientIds );
const [ { name: firstBlockName } ] = _blocks;
const _isSingleBlockSelected = _blocks.length === 1;
+ const blockType = getBlockType( firstBlockName );
+
let _icon;
if ( _isSingleBlockSelected ) {
- _icon = blockInformation?.icon; // Take into account active block variations.
+ const match = getActiveBlockVariation(
+ firstBlockName,
+ getBlockAttributes( clientIds[ 0 ] )
+ );
+ // Take into account active block variations.
+ _icon = match?.icon || blockType.icon;
} else {
const isSelectionOfSameType =
new Set( _blocks.map( ( { name } ) => name ) ).size === 1;
// When selection consists of blocks of multiple types, display an
// appropriate icon to communicate the non-uniformity.
- _icon = isSelectionOfSameType
- ? getBlockType( firstBlockName )?.icon
- : copy;
+ _icon = isSelectionOfSameType ? blockType.icon : copy;
}
+
return {
canRemove: canRemoveBlocks( clientIds, rootClientId ),
hasBlockStyles:
@@ -209,7 +215,7 @@ export const BlockSwitcher = ( { clientIds } ) => {
_isSingleBlockSelected && isTemplatePart( _blocks[ 0 ] ),
};
},
- [ clientIds, blockInformation?.icon ]
+ [ clientIds ]
);
const blockTitle = useBlockDisplayTitle( {
clientId: clientIds?.[ 0 ],
diff --git a/packages/block-editor/src/components/inner-blocks/index.js b/packages/block-editor/src/components/inner-blocks/index.js
index 5233c063ba2094..76f3d70041464f 100644
--- a/packages/block-editor/src/components/inner-blocks/index.js
+++ b/packages/block-editor/src/components/inner-blocks/index.js
@@ -7,7 +7,7 @@ import classnames from 'classnames';
* WordPress dependencies
*/
import { useMergeRefs } from '@wordpress/compose';
-import { forwardRef, useMemo } from '@wordpress/element';
+import { forwardRef, useMemo, memo } from '@wordpress/element';
import { useSelect } from '@wordpress/data';
import {
getBlockSupport,
@@ -42,6 +42,8 @@ function BlockContext( { children, clientId } ) {
);
}
+const BlockListItemsMemo = memo( BlockListItems );
+
/**
* InnerBlocks is a component which allows a single block to have multiple blocks
* as children. The UncontrolledInnerBlocks component is used whenever the inner
@@ -117,8 +119,10 @@ function UncontrolledInnerBlocks( props ) {
[ defaultLayout, usedLayout, allowSizingOnChildren ]
);
+ // For controlled inner blocks, we don't want a change in blocks to
+ // re-render the blocks list.
const items = (
-
{
return getBlockOrder( state, clientId ).every( isChildSubtreeDisabled );
};
+function getEnabledClientIdsTreeUnmemoized( state, rootClientId ) {
+ const blockOrder = getBlockOrder( state, rootClientId );
+ const result = [];
+
+ for ( const clientId of blockOrder ) {
+ const innerBlocks = getEnabledClientIdsTreeUnmemoized(
+ state,
+ clientId
+ );
+ if ( getBlockEditingMode( state, clientId ) !== 'disabled' ) {
+ result.push( { clientId, innerBlocks } );
+ } else {
+ result.push( ...innerBlocks );
+ }
+ }
+
+ return result;
+}
+
/**
* Returns a tree of block objects with only clientID and innerBlocks set.
* Blocks with a 'disabled' editing mode are not included.
@@ -81,19 +100,7 @@ export const isBlockSubtreeDisabled = ( state, clientId ) => {
* @return {Object[]} Tree of block objects with only clientID and innerBlocks set.
*/
export const getEnabledClientIdsTree = createSelector(
- ( state, rootClientId = '' ) => {
- return getBlockOrder( state, rootClientId ).flatMap( ( clientId ) => {
- if ( getBlockEditingMode( state, clientId ) !== 'disabled' ) {
- return [
- {
- clientId,
- innerBlocks: getEnabledClientIdsTree( state, clientId ),
- },
- ];
- }
- return getEnabledClientIdsTree( state, clientId );
- } );
- },
+ getEnabledClientIdsTreeUnmemoized,
( state ) => [
state.blocks.order,
state.blockEditingModes,
diff --git a/packages/block-library/src/archives/block.json b/packages/block-library/src/archives/block.json
index 7e0f5181d2c3dd..e36691f3143c22 100644
--- a/packages/block-library/src/archives/block.json
+++ b/packages/block-library/src/archives/block.json
@@ -47,6 +47,9 @@
"__experimentalDefaultControls": {
"fontSize": true
}
+ },
+ "interactivity": {
+ "clientNavigation": true
}
},
"editorStyle": "wp-block-archives-editor"
diff --git a/packages/block-library/src/audio/block.json b/packages/block-library/src/audio/block.json
index 04df268a74a630..14b44704fb7e8f 100644
--- a/packages/block-library/src/audio/block.json
+++ b/packages/block-library/src/audio/block.json
@@ -54,6 +54,9 @@
"margin": false,
"padding": false
}
+ },
+ "interactivity": {
+ "clientNavigation": true
}
},
"editorStyle": "wp-block-audio-editor",
diff --git a/packages/block-library/src/avatar/block.json b/packages/block-library/src/avatar/block.json
index fa86541b2963f2..f949e60e0ace15 100644
--- a/packages/block-library/src/avatar/block.json
+++ b/packages/block-library/src/avatar/block.json
@@ -50,6 +50,9 @@
"text": false,
"background": false,
"__experimentalDuotone": "img"
+ },
+ "interactivity": {
+ "clientNavigation": true
}
},
"selectors": {
diff --git a/packages/block-library/src/block/block.json b/packages/block-library/src/block/block.json
index 7eac2b705ba1f2..0e5565233ef3c2 100644
--- a/packages/block-library/src/block/block.json
+++ b/packages/block-library/src/block/block.json
@@ -19,6 +19,9 @@
"customClassName": false,
"html": false,
"inserter": false,
- "renaming": false
+ "renaming": false,
+ "interactivity": {
+ "clientNavigation": true
+ }
}
}
diff --git a/packages/block-library/src/button/block.json b/packages/block-library/src/button/block.json
index f04d4642bb98e8..aa5d81c65bad31 100644
--- a/packages/block-library/src/button/block.json
+++ b/packages/block-library/src/button/block.json
@@ -119,7 +119,10 @@
"width": true
}
},
- "__experimentalSelector": ".wp-block-button .wp-block-button__link"
+ "__experimentalSelector": ".wp-block-button .wp-block-button__link",
+ "interactivity": {
+ "clientNavigation": true
+ }
},
"styles": [
{ "name": "fill", "label": "Fill", "isDefault": true },
diff --git a/packages/block-library/src/buttons/block.json b/packages/block-library/src/buttons/block.json
index fde85ae72a316d..015290a4c7cc58 100644
--- a/packages/block-library/src/buttons/block.json
+++ b/packages/block-library/src/buttons/block.json
@@ -39,6 +39,9 @@
"default": {
"type": "flex"
}
+ },
+ "interactivity": {
+ "clientNavigation": true
}
},
"editorStyle": "wp-block-buttons-editor",
diff --git a/packages/block-library/src/calendar/block.json b/packages/block-library/src/calendar/block.json
index 974d47ff8ec2ca..6ba8f7d725e6e5 100644
--- a/packages/block-library/src/calendar/block.json
+++ b/packages/block-library/src/calendar/block.json
@@ -37,6 +37,9 @@
"__experimentalDefaultControls": {
"fontSize": true
}
+ },
+ "interactivity": {
+ "clientNavigation": true
}
},
"style": "wp-block-calendar"
diff --git a/packages/block-library/src/categories/block.json b/packages/block-library/src/categories/block.json
index 5014da82980493..820ac8945f50f1 100644
--- a/packages/block-library/src/categories/block.json
+++ b/packages/block-library/src/categories/block.json
@@ -51,6 +51,9 @@
"__experimentalDefaultControls": {
"fontSize": true
}
+ },
+ "interactivity": {
+ "clientNavigation": true
}
},
"editorStyle": "wp-block-categories-editor",
diff --git a/packages/block-library/src/code/block.json b/packages/block-library/src/code/block.json
index bd5db3c918b963..4465c8554fc125 100644
--- a/packages/block-library/src/code/block.json
+++ b/packages/block-library/src/code/block.json
@@ -56,6 +56,9 @@
"background": true,
"text": true
}
+ },
+ "interactivity": {
+ "clientNavigation": true
}
},
"style": "wp-block-code"
diff --git a/packages/block-library/src/column/block.json b/packages/block-library/src/column/block.json
index 7f61f307fab159..40444d04b93e7c 100644
--- a/packages/block-library/src/column/block.json
+++ b/packages/block-library/src/column/block.json
@@ -68,6 +68,9 @@
"fontSize": true
}
},
- "layout": true
+ "layout": true,
+ "interactivity": {
+ "clientNavigation": true
+ }
}
}
diff --git a/packages/block-library/src/columns/block.json b/packages/block-library/src/columns/block.json
index a35e6a5e284893..22db5b1b4ac239 100644
--- a/packages/block-library/src/columns/block.json
+++ b/packages/block-library/src/columns/block.json
@@ -79,6 +79,9 @@
"__experimentalDefaultControls": {
"fontSize": true
}
+ },
+ "interactivity": {
+ "clientNavigation": true
}
},
"editorStyle": "wp-block-columns-editor",
diff --git a/packages/block-library/src/comment-author-avatar/block.json b/packages/block-library/src/comment-author-avatar/block.json
index 050d87c3b4634a..c74b057db2ea3a 100644
--- a/packages/block-library/src/comment-author-avatar/block.json
+++ b/packages/block-library/src/comment-author-avatar/block.json
@@ -39,6 +39,9 @@
"__experimentalSkipSerialization": true,
"margin": true,
"padding": true
+ },
+ "interactivity": {
+ "clientNavigation": true
}
}
}
diff --git a/packages/block-library/src/comment-author-name/block.json b/packages/block-library/src/comment-author-name/block.json
index 93350779fc8bd2..f3422faf0264df 100644
--- a/packages/block-library/src/comment-author-name/block.json
+++ b/packages/block-library/src/comment-author-name/block.json
@@ -48,6 +48,9 @@
"__experimentalDefaultControls": {
"fontSize": true
}
+ },
+ "interactivity": {
+ "clientNavigation": true
}
}
}
diff --git a/packages/block-library/src/comment-date/block.json b/packages/block-library/src/comment-date/block.json
index 7e4776c68ff2fa..ddc0281e6c668c 100644
--- a/packages/block-library/src/comment-date/block.json
+++ b/packages/block-library/src/comment-date/block.json
@@ -44,6 +44,9 @@
"__experimentalDefaultControls": {
"fontSize": true
}
+ },
+ "interactivity": {
+ "clientNavigation": true
}
}
}
diff --git a/packages/block-library/src/comment-edit-link/block.json b/packages/block-library/src/comment-edit-link/block.json
index 505305f60987ac..a49f9a23161b80 100644
--- a/packages/block-library/src/comment-edit-link/block.json
+++ b/packages/block-library/src/comment-edit-link/block.json
@@ -44,6 +44,9 @@
"__experimentalDefaultControls": {
"fontSize": true
}
+ },
+ "interactivity": {
+ "clientNavigation": true
}
}
}
diff --git a/packages/block-library/src/comment-template/block.json b/packages/block-library/src/comment-template/block.json
index 7b9bfc5e0340fd..70238c45a3d929 100644
--- a/packages/block-library/src/comment-template/block.json
+++ b/packages/block-library/src/comment-template/block.json
@@ -28,6 +28,9 @@
"__experimentalDefaultControls": {
"fontSize": true
}
+ },
+ "interactivity": {
+ "clientNavigation": true
}
},
"style": "wp-block-comment-template"
diff --git a/packages/block-library/src/comments-pagination-next/block.json b/packages/block-library/src/comments-pagination-next/block.json
index d619865ebd6f5e..22e20bfa8dbf2d 100644
--- a/packages/block-library/src/comments-pagination-next/block.json
+++ b/packages/block-library/src/comments-pagination-next/block.json
@@ -35,6 +35,9 @@
"__experimentalDefaultControls": {
"fontSize": true
}
+ },
+ "interactivity": {
+ "clientNavigation": true
}
}
}
diff --git a/packages/block-library/src/comments-pagination-numbers/block.json b/packages/block-library/src/comments-pagination-numbers/block.json
index fcebb52763870e..9e9017af631978 100644
--- a/packages/block-library/src/comments-pagination-numbers/block.json
+++ b/packages/block-library/src/comments-pagination-numbers/block.json
@@ -30,6 +30,9 @@
"__experimentalDefaultControls": {
"fontSize": true
}
+ },
+ "interactivity": {
+ "clientNavigation": true
}
}
}
diff --git a/packages/block-library/src/comments-pagination-previous/block.json b/packages/block-library/src/comments-pagination-previous/block.json
index 2dab1e9dd73674..0871b000c569dd 100644
--- a/packages/block-library/src/comments-pagination-previous/block.json
+++ b/packages/block-library/src/comments-pagination-previous/block.json
@@ -35,6 +35,9 @@
"__experimentalDefaultControls": {
"fontSize": true
}
+ },
+ "interactivity": {
+ "clientNavigation": true
}
}
}
diff --git a/packages/block-library/src/comments-pagination/block.json b/packages/block-library/src/comments-pagination/block.json
index e4a1a3c3a15d97..28f6c9fdfdb5d9 100644
--- a/packages/block-library/src/comments-pagination/block.json
+++ b/packages/block-library/src/comments-pagination/block.json
@@ -53,6 +53,9 @@
"__experimentalDefaultControls": {
"fontSize": true
}
+ },
+ "interactivity": {
+ "clientNavigation": true
}
},
"editorStyle": "wp-block-comments-pagination-editor",
diff --git a/packages/block-library/src/comments-title/block.json b/packages/block-library/src/comments-title/block.json
index 4107f5d590cdee..f8a02f2e5089b5 100644
--- a/packages/block-library/src/comments-title/block.json
+++ b/packages/block-library/src/comments-title/block.json
@@ -61,6 +61,9 @@
"__experimentalFontStyle": true,
"__experimentalFontWeight": true
}
+ },
+ "interactivity": {
+ "clientNavigation": true
}
}
}
diff --git a/packages/block-library/src/cover/block.json b/packages/block-library/src/cover/block.json
index 80562da3098997..eb55a8dbabec1c 100644
--- a/packages/block-library/src/cover/block.json
+++ b/packages/block-library/src/cover/block.json
@@ -132,6 +132,9 @@
},
"layout": {
"allowJustification": false
+ },
+ "interactivity": {
+ "clientNavigation": true
}
},
"editorStyle": "wp-block-cover-editor",
diff --git a/packages/block-library/src/details/block.json b/packages/block-library/src/details/block.json
index a71d3af2a5ed39..868307d6d22a15 100644
--- a/packages/block-library/src/details/block.json
+++ b/packages/block-library/src/details/block.json
@@ -58,6 +58,9 @@
},
"layout": {
"allowEditing": false
+ },
+ "interactivity": {
+ "clientNavigation": true
}
},
"editorStyle": "wp-block-details-editor",
diff --git a/packages/block-library/src/embed/block.json b/packages/block-library/src/embed/block.json
index 5aac8bbd6b8cab..a42aafbab4b0b9 100644
--- a/packages/block-library/src/embed/block.json
+++ b/packages/block-library/src/embed/block.json
@@ -44,6 +44,9 @@
"align": true,
"spacing": {
"margin": true
+ },
+ "interactivity": {
+ "clientNavigation": true
}
},
"editorStyle": "wp-block-embed-editor",
diff --git a/packages/block-library/src/footnotes/block.json b/packages/block-library/src/footnotes/block.json
index 3192df77969781..1fe74abb471ee5 100644
--- a/packages/block-library/src/footnotes/block.json
+++ b/packages/block-library/src/footnotes/block.json
@@ -55,6 +55,9 @@
"__experimentalDefaultControls": {
"fontSize": true
}
+ },
+ "interactivity": {
+ "clientNavigation": true
}
},
"style": "wp-block-footnotes"
diff --git a/packages/block-library/src/gallery/block.json b/packages/block-library/src/gallery/block.json
index bfeeb792a7fa02..e9018704bf6bf2 100644
--- a/packages/block-library/src/gallery/block.json
+++ b/packages/block-library/src/gallery/block.json
@@ -137,6 +137,9 @@
"default": {
"type": "flex"
}
+ },
+ "interactivity": {
+ "clientNavigation": true
}
},
"editorStyle": "wp-block-gallery-editor",
diff --git a/packages/block-library/src/group/block.json b/packages/block-library/src/group/block.json
index df59c25a7751fb..db7d09c55d2c0d 100644
--- a/packages/block-library/src/group/block.json
+++ b/packages/block-library/src/group/block.json
@@ -87,6 +87,9 @@
},
"layout": {
"allowSizingOnChildren": true
+ },
+ "interactivity": {
+ "clientNavigation": true
}
},
"editorStyle": "wp-block-group-editor",
diff --git a/packages/block-library/src/heading/block.json b/packages/block-library/src/heading/block.json
index a1eb3fce32ef15..90ef0d383af2c5 100644
--- a/packages/block-library/src/heading/block.json
+++ b/packages/block-library/src/heading/block.json
@@ -61,7 +61,10 @@
}
},
"__unstablePasteTextInline": true,
- "__experimentalSlashInserter": true
+ "__experimentalSlashInserter": true,
+ "interactivity": {
+ "clientNavigation": true
+ }
},
"editorStyle": "wp-block-heading-editor",
"style": "wp-block-heading"
diff --git a/packages/block-library/src/home-link/block.json b/packages/block-library/src/home-link/block.json
index a9827b7718b9be..b19fcf43ce6880 100644
--- a/packages/block-library/src/home-link/block.json
+++ b/packages/block-library/src/home-link/block.json
@@ -36,6 +36,9 @@
"__experimentalDefaultControls": {
"fontSize": true
}
+ },
+ "interactivity": {
+ "clientNavigation": true
}
},
"editorStyle": "wp-block-home-link-editor",
diff --git a/packages/block-library/src/html/block.json b/packages/block-library/src/html/block.json
index b1a2ad60625d12..08587f69bbd460 100644
--- a/packages/block-library/src/html/block.json
+++ b/packages/block-library/src/html/block.json
@@ -16,7 +16,10 @@
"supports": {
"customClassName": false,
"className": false,
- "html": false
+ "html": false,
+ "interactivity": {
+ "clientNavigation": true
+ }
},
"editorStyle": "wp-block-html-editor"
}
diff --git a/packages/block-library/src/latest-comments/block.json b/packages/block-library/src/latest-comments/block.json
index 0b213e9b7903a4..aee42f1d15b486 100644
--- a/packages/block-library/src/latest-comments/block.json
+++ b/packages/block-library/src/latest-comments/block.json
@@ -46,6 +46,9 @@
"__experimentalDefaultControls": {
"fontSize": true
}
+ },
+ "interactivity": {
+ "clientNavigation": true
}
},
"editorStyle": "wp-block-latest-comments-editor",
diff --git a/packages/block-library/src/latest-posts/block.json b/packages/block-library/src/latest-posts/block.json
index f36164614dd506..bb8c2d24962f3f 100644
--- a/packages/block-library/src/latest-posts/block.json
+++ b/packages/block-library/src/latest-posts/block.json
@@ -110,6 +110,9 @@
"__experimentalDefaultControls": {
"fontSize": true
}
+ },
+ "interactivity": {
+ "clientNavigation": true
}
},
"editorStyle": "wp-block-latest-posts-editor",
diff --git a/packages/block-library/src/list-item/block.json b/packages/block-library/src/list-item/block.json
index 0857aaac45d9a2..61c6eec4bb26f4 100644
--- a/packages/block-library/src/list-item/block.json
+++ b/packages/block-library/src/list-item/block.json
@@ -42,6 +42,9 @@
"__experimentalDefaultControls": {
"fontSize": true
}
+ },
+ "interactivity": {
+ "clientNavigation": true
}
}
}
diff --git a/packages/block-library/src/list/block.json b/packages/block-library/src/list/block.json
index a7dcf36cf4ad74..7d2de9567cc54a 100644
--- a/packages/block-library/src/list/block.json
+++ b/packages/block-library/src/list/block.json
@@ -71,7 +71,10 @@
"__unstablePasteTextInline": true,
"__experimentalSelector": "ol,ul",
"__experimentalOnMerge": true,
- "__experimentalSlashInserter": true
+ "__experimentalSlashInserter": true,
+ "interactivity": {
+ "clientNavigation": true
+ }
},
"editorStyle": "wp-block-list-editor",
"style": "wp-block-list"
diff --git a/packages/block-library/src/loginout/block.json b/packages/block-library/src/loginout/block.json
index 59fceec596e37c..86633003432539 100644
--- a/packages/block-library/src/loginout/block.json
+++ b/packages/block-library/src/loginout/block.json
@@ -39,6 +39,9 @@
"__experimentalDefaultControls": {
"fontSize": true
}
+ },
+ "interactivity": {
+ "clientNavigation": true
}
}
}
diff --git a/packages/block-library/src/media-text/block.json b/packages/block-library/src/media-text/block.json
index cdeb4ce13e8f51..e320101bbd8475 100644
--- a/packages/block-library/src/media-text/block.json
+++ b/packages/block-library/src/media-text/block.json
@@ -123,6 +123,9 @@
"__experimentalDefaultControls": {
"fontSize": true
}
+ },
+ "interactivity": {
+ "clientNavigation": true
}
},
"editorStyle": "wp-block-media-text-editor",
diff --git a/packages/block-library/src/missing/block.json b/packages/block-library/src/missing/block.json
index 242a1d2c6b21a8..f9b3efe594753e 100644
--- a/packages/block-library/src/missing/block.json
+++ b/packages/block-library/src/missing/block.json
@@ -23,6 +23,9 @@
"customClassName": false,
"inserter": false,
"html": false,
- "reusable": false
+ "reusable": false,
+ "interactivity": {
+ "clientNavigation": true
+ }
}
}
diff --git a/packages/block-library/src/more/block.json b/packages/block-library/src/more/block.json
index bfd95652ea1767..b071f6ba5d7ef7 100644
--- a/packages/block-library/src/more/block.json
+++ b/packages/block-library/src/more/block.json
@@ -20,7 +20,10 @@
"customClassName": false,
"className": false,
"html": false,
- "multiple": false
+ "multiple": false,
+ "interactivity": {
+ "clientNavigation": true
+ }
},
"editorStyle": "wp-block-more-editor"
}
diff --git a/packages/block-library/src/navigation-link/block.json b/packages/block-library/src/navigation-link/block.json
index 94a11217d51393..2762bd24e446a6 100644
--- a/packages/block-library/src/navigation-link/block.json
+++ b/packages/block-library/src/navigation-link/block.json
@@ -77,7 +77,10 @@
"fontSize": true
}
},
- "renaming": false
+ "renaming": false,
+ "interactivity": {
+ "clientNavigation": true
+ }
},
"editorStyle": "wp-block-navigation-link-editor",
"style": "wp-block-navigation-link"
diff --git a/packages/block-library/src/navigation-link/index.php b/packages/block-library/src/navigation-link/index.php
index 749bae7aec64e4..9a1421a663fb78 100644
--- a/packages/block-library/src/navigation-link/index.php
+++ b/packages/block-library/src/navigation-link/index.php
@@ -375,12 +375,11 @@ function block_core_navigation_link_unregister_variation( $name ) {
}
/**
- * Register the navigation link block.
* Returns an array of variations for the navigation link block.
*
* @return array
*/
-function build_navigation_link_block_variations() {
+function block_core_navigation_link_build_variations() {
// This will only handle post types and taxonomies registered until this point (init on priority 9).
// See action hooks below for other post types and taxonomies.
// See https://github.com/WordPress/gutenberg/issues/53826 for details.
@@ -429,7 +428,7 @@ function register_block_core_navigation_link() {
__DIR__ . '/navigation-link',
array(
'render_callback' => 'render_block_core_navigation_link',
- 'variation_callback' => 'build_navigation_link_block_variations',
+ 'variation_callback' => 'block_core_navigation_link_build_variations',
)
);
}
diff --git a/packages/block-library/src/navigation-submenu/block.json b/packages/block-library/src/navigation-submenu/block.json
index 91364109ea7400..0bcf8a1a47f384 100644
--- a/packages/block-library/src/navigation-submenu/block.json
+++ b/packages/block-library/src/navigation-submenu/block.json
@@ -58,7 +58,10 @@
],
"supports": {
"reusable": false,
- "html": false
+ "html": false,
+ "interactivity": {
+ "clientNavigation": true
+ }
},
"editorStyle": "wp-block-navigation-submenu-editor",
"style": "wp-block-navigation-submenu"
diff --git a/packages/block-library/src/navigation/index.php b/packages/block-library/src/navigation/index.php
index bd8cfebb5bf70f..4fa954b8deb4bc 100644
--- a/packages/block-library/src/navigation/index.php
+++ b/packages/block-library/src/navigation/index.php
@@ -9,6 +9,12 @@
* Helper functions used to render the navigation block.
*/
class WP_Navigation_Block_Renderer {
+
+ /**
+ * Used to determine whether or not a navigation has submenus.
+ */
+ private static $has_submenus = false;
+
/**
* Used to determine which blocks are wrapped in an .
*
@@ -58,22 +64,37 @@ private static function is_responsive( $attributes ) {
* Returns whether or not a navigation has a submenu.
*
* @param WP_Block_List $inner_blocks The list of inner blocks.
- * @return bool Returns whether or not a navigation has a submenu.
+ * @return bool Returns whether or not a navigation has a submenu and also sets the member variable.
*/
private static function has_submenus( $inner_blocks ) {
+ if ( true === static::$has_submenus ) {
+ return static::$has_submenus;
+ }
+
foreach ( $inner_blocks as $inner_block ) {
- $inner_block_content = $inner_block->render();
- $p = new WP_HTML_Tag_Processor( $inner_block_content );
- if ( $p->next_tag(
- array(
- 'name' => 'LI',
- 'class_name' => 'has-child',
- )
- ) ) {
- return true;
+ // If this is a page list then work out if any of the pages have children.
+ if ( 'core/page-list' === $inner_block->name ) {
+ $all_pages = get_pages(
+ array(
+ 'sort_column' => 'menu_order,post_title',
+ 'order' => 'asc',
+ )
+ );
+ foreach ( (array) $all_pages as $page ) {
+ if ( $page->post_parent ) {
+ static::$has_submenus = true;
+ break;
+ }
+ }
+ }
+ // If this is a navigation submenu then we know we have submenus.
+ if ( 'core/navigation-submenu' === $inner_block->name ) {
+ static::$has_submenus = true;
+ break;
}
}
- return false;
+
+ return static::$has_submenus;
}
/**
@@ -968,7 +989,9 @@ function block_core_navigation_block_contains_core_navigation( $inner_blocks ) {
function block_core_navigation_get_fallback_blocks() {
$page_list_fallback = array(
array(
- 'blockName' => 'core/page-list',
+ 'blockName' => 'core/page-list',
+ 'innerContent' => array(),
+ 'attrs' => array(),
),
);
diff --git a/packages/block-library/src/nextpage/block.json b/packages/block-library/src/nextpage/block.json
index ab88d4a7be4f0b..3dd1a24d36e59d 100644
--- a/packages/block-library/src/nextpage/block.json
+++ b/packages/block-library/src/nextpage/block.json
@@ -11,7 +11,10 @@
"supports": {
"customClassName": false,
"className": false,
- "html": false
+ "html": false,
+ "interactivity": {
+ "clientNavigation": true
+ }
},
"editorStyle": "wp-block-nextpage-editor"
}
diff --git a/packages/block-library/src/page-list-item/block.json b/packages/block-library/src/page-list-item/block.json
index abd86924949ab6..7890771f639219 100644
--- a/packages/block-library/src/page-list-item/block.json
+++ b/packages/block-library/src/page-list-item/block.json
@@ -45,7 +45,10 @@
"html": false,
"lock": false,
"inserter": false,
- "__experimentalToolbar": false
+ "__experimentalToolbar": false,
+ "interactivity": {
+ "clientNavigation": true
+ }
},
"editorStyle": "wp-block-page-list-editor",
"style": "wp-block-page-list"
diff --git a/packages/block-library/src/page-list/block.json b/packages/block-library/src/page-list/block.json
index 5035d5611e32e7..b465e4ef5dc3d0 100644
--- a/packages/block-library/src/page-list/block.json
+++ b/packages/block-library/src/page-list/block.json
@@ -48,6 +48,9 @@
"__experimentalDefaultControls": {
"fontSize": true
}
+ },
+ "interactivity": {
+ "clientNavigation": true
}
},
"editorStyle": "wp-block-page-list-editor",
diff --git a/packages/block-library/src/paragraph/block.json b/packages/block-library/src/paragraph/block.json
index 25a9a36fa8bf0a..2f23d41cd03726 100644
--- a/packages/block-library/src/paragraph/block.json
+++ b/packages/block-library/src/paragraph/block.json
@@ -64,7 +64,10 @@
}
},
"__experimentalSelector": "p",
- "__unstablePasteTextInline": true
+ "__unstablePasteTextInline": true,
+ "interactivity": {
+ "clientNavigation": true
+ }
},
"editorStyle": "wp-block-paragraph-editor",
"style": "wp-block-paragraph"
diff --git a/packages/block-library/src/pattern/block.json b/packages/block-library/src/pattern/block.json
index da02f7b72747e4..13fc9d154b15a4 100644
--- a/packages/block-library/src/pattern/block.json
+++ b/packages/block-library/src/pattern/block.json
@@ -8,7 +8,10 @@
"supports": {
"html": false,
"inserter": false,
- "renaming": false
+ "renaming": false,
+ "interactivity": {
+ "clientNavigation": true
+ }
},
"textdomain": "default",
"attributes": {
diff --git a/packages/block-library/src/post-author-biography/block.json b/packages/block-library/src/post-author-biography/block.json
index 5d7a4d4585747d..8e0ff61c29dfc9 100644
--- a/packages/block-library/src/post-author-biography/block.json
+++ b/packages/block-library/src/post-author-biography/block.json
@@ -37,6 +37,9 @@
"__experimentalDefaultControls": {
"fontSize": true
}
+ },
+ "interactivity": {
+ "clientNavigation": true
}
}
}
diff --git a/packages/block-library/src/post-author-name/block.json b/packages/block-library/src/post-author-name/block.json
index 89e4b38de2c281..7889fed37b9d34 100644
--- a/packages/block-library/src/post-author-name/block.json
+++ b/packages/block-library/src/post-author-name/block.json
@@ -47,6 +47,9 @@
"__experimentalDefaultControls": {
"fontSize": true
}
+ },
+ "interactivity": {
+ "clientNavigation": true
}
}
}
diff --git a/packages/block-library/src/post-author/block.json b/packages/block-library/src/post-author/block.json
index 47dceef55604f6..6f814810744c6d 100644
--- a/packages/block-library/src/post-author/block.json
+++ b/packages/block-library/src/post-author/block.json
@@ -61,6 +61,9 @@
"background": true,
"text": true
}
+ },
+ "interactivity": {
+ "clientNavigation": true
}
},
"style": "wp-block-post-author"
diff --git a/packages/block-library/src/post-comment/block.json b/packages/block-library/src/post-comment/block.json
index 558f0e3496eff8..071ef550deb9bc 100644
--- a/packages/block-library/src/post-comment/block.json
+++ b/packages/block-library/src/post-comment/block.json
@@ -25,6 +25,9 @@
},
"supports": {
"html": false,
- "inserter": false
+ "inserter": false,
+ "interactivity": {
+ "clientNavigation": true
+ }
}
}
diff --git a/packages/block-library/src/post-comments-count/block.json b/packages/block-library/src/post-comments-count/block.json
index 43c1aaf713776f..796e6e3830236c 100644
--- a/packages/block-library/src/post-comments-count/block.json
+++ b/packages/block-library/src/post-comments-count/block.json
@@ -38,6 +38,9 @@
"__experimentalDefaultControls": {
"fontSize": true
}
+ },
+ "interactivity": {
+ "clientNavigation": true
}
}
}
diff --git a/packages/block-library/src/post-comments-link/block.json b/packages/block-library/src/post-comments-link/block.json
index 74e268c3c20b19..67831b1d15c5d5 100644
--- a/packages/block-library/src/post-comments-link/block.json
+++ b/packages/block-library/src/post-comments-link/block.json
@@ -39,6 +39,9 @@
"__experimentalDefaultControls": {
"fontSize": true
}
+ },
+ "interactivity": {
+ "clientNavigation": true
}
}
}
diff --git a/packages/block-library/src/post-date/block.json b/packages/block-library/src/post-date/block.json
index 11ebc32d9cabec..176e5b6b0ee616 100644
--- a/packages/block-library/src/post-date/block.json
+++ b/packages/block-library/src/post-date/block.json
@@ -50,6 +50,9 @@
"__experimentalDefaultControls": {
"fontSize": true
}
+ },
+ "interactivity": {
+ "clientNavigation": true
}
}
}
diff --git a/packages/block-library/src/post-excerpt/block.json b/packages/block-library/src/post-excerpt/block.json
index 33b7818ebed9f2..4bbc962c9838ef 100644
--- a/packages/block-library/src/post-excerpt/block.json
+++ b/packages/block-library/src/post-excerpt/block.json
@@ -50,6 +50,9 @@
"__experimentalDefaultControls": {
"fontSize": true
}
+ },
+ "interactivity": {
+ "clientNavigation": true
}
},
"editorStyle": "wp-block-post-excerpt-editor",
diff --git a/packages/block-library/src/post-featured-image/block.json b/packages/block-library/src/post-featured-image/block.json
index 4c4ba6919eaff6..75f5bec3ff451d 100644
--- a/packages/block-library/src/post-featured-image/block.json
+++ b/packages/block-library/src/post-featured-image/block.json
@@ -81,6 +81,9 @@
"spacing": {
"margin": true,
"padding": true
+ },
+ "interactivity": {
+ "clientNavigation": true
}
},
"editorStyle": "wp-block-post-featured-image-editor",
diff --git a/packages/block-library/src/post-navigation-link/block.json b/packages/block-library/src/post-navigation-link/block.json
index cdfecf6c627ca1..ce733759846fee 100644
--- a/packages/block-library/src/post-navigation-link/block.json
+++ b/packages/block-library/src/post-navigation-link/block.json
@@ -54,6 +54,9 @@
"__experimentalDefaultControls": {
"fontSize": true
}
+ },
+ "interactivity": {
+ "clientNavigation": true
}
},
"style": "wp-block-post-navigation-link"
diff --git a/packages/block-library/src/post-template/block.json b/packages/block-library/src/post-template/block.json
index d2f7c09693121c..6a575855583527 100644
--- a/packages/block-library/src/post-template/block.json
+++ b/packages/block-library/src/post-template/block.json
@@ -48,6 +48,9 @@
"__experimentalDefaultControls": {
"blockGap": true
}
+ },
+ "interactivity": {
+ "clientNavigation": true
}
},
"style": "wp-block-post-template",
diff --git a/packages/block-library/src/post-terms/block.json b/packages/block-library/src/post-terms/block.json
index 0da7fb02f8134f..538768fd7e5113 100644
--- a/packages/block-library/src/post-terms/block.json
+++ b/packages/block-library/src/post-terms/block.json
@@ -54,6 +54,9 @@
"__experimentalDefaultControls": {
"fontSize": true
}
+ },
+ "interactivity": {
+ "clientNavigation": true
}
},
"style": "wp-block-post-terms"
diff --git a/packages/block-library/src/post-terms/index.php b/packages/block-library/src/post-terms/index.php
index 44291038383d42..c919db9cda2e4c 100644
--- a/packages/block-library/src/post-terms/index.php
+++ b/packages/block-library/src/post-terms/index.php
@@ -63,7 +63,7 @@ function render_block_core_post_terms( $attributes, $content, $block ) {
*
* @return array The available variations for the block.
*/
-function build_post_term_block_variations() {
+function block_core_post_terms_build_variations() {
$taxonomies = get_taxonomies(
array(
'publicly_queryable' => true,
@@ -116,7 +116,7 @@ function register_block_core_post_terms() {
__DIR__ . '/post-terms',
array(
'render_callback' => 'render_block_core_post_terms',
- 'variation_callback' => 'build_post_term_block_variations',
+ 'variation_callback' => 'block_core_post_terms_build_variations',
)
);
}
diff --git a/packages/block-library/src/post-time-to-read/block.json b/packages/block-library/src/post-time-to-read/block.json
index 281e9bb1f1b210..d19c6e553046c8 100644
--- a/packages/block-library/src/post-time-to-read/block.json
+++ b/packages/block-library/src/post-time-to-read/block.json
@@ -42,6 +42,9 @@
"__experimentalDefaultControls": {
"fontSize": true
}
+ },
+ "interactivity": {
+ "clientNavigation": true
}
}
}
diff --git a/packages/block-library/src/post-title/block.json b/packages/block-library/src/post-title/block.json
index 75a4fa3c3a60fa..b56adecce52b11 100644
--- a/packages/block-library/src/post-title/block.json
+++ b/packages/block-library/src/post-title/block.json
@@ -57,6 +57,9 @@
"__experimentalDefaultControls": {
"fontSize": true
}
+ },
+ "interactivity": {
+ "clientNavigation": true
}
},
"style": "wp-block-post-title"
diff --git a/packages/block-library/src/preformatted/block.json b/packages/block-library/src/preformatted/block.json
index def870e7ad2fb7..fbec3581bc9d42 100644
--- a/packages/block-library/src/preformatted/block.json
+++ b/packages/block-library/src/preformatted/block.json
@@ -40,6 +40,9 @@
"__experimentalDefaultControls": {
"fontSize": true
}
+ },
+ "interactivity": {
+ "clientNavigation": true
}
},
"style": "wp-block-preformatted"
diff --git a/packages/block-library/src/pullquote/block.json b/packages/block-library/src/pullquote/block.json
index f041d46cda8cdd..410b477dd9939e 100644
--- a/packages/block-library/src/pullquote/block.json
+++ b/packages/block-library/src/pullquote/block.json
@@ -69,6 +69,9 @@
"fontSize": "1.5em",
"lineHeight": "1.6"
}
+ },
+ "interactivity": {
+ "clientNavigation": true
}
},
"editorStyle": "wp-block-pullquote-editor",
diff --git a/packages/block-library/src/query-no-results/block.json b/packages/block-library/src/query-no-results/block.json
index 32088752bb0606..8f3ba56adcc36a 100644
--- a/packages/block-library/src/query-no-results/block.json
+++ b/packages/block-library/src/query-no-results/block.json
@@ -28,6 +28,9 @@
"__experimentalDefaultControls": {
"fontSize": true
}
+ },
+ "interactivity": {
+ "clientNavigation": true
}
}
}
diff --git a/packages/block-library/src/query-pagination-next/block.json b/packages/block-library/src/query-pagination-next/block.json
index 95b1169dc992fd..ec56125ee3b766 100644
--- a/packages/block-library/src/query-pagination-next/block.json
+++ b/packages/block-library/src/query-pagination-next/block.json
@@ -41,6 +41,9 @@
"__experimentalDefaultControls": {
"fontSize": true
}
+ },
+ "interactivity": {
+ "clientNavigation": true
}
}
}
diff --git a/packages/block-library/src/query-pagination-numbers/block.json b/packages/block-library/src/query-pagination-numbers/block.json
index f22d88115d68cd..8a9f0ee69f14e4 100644
--- a/packages/block-library/src/query-pagination-numbers/block.json
+++ b/packages/block-library/src/query-pagination-numbers/block.json
@@ -36,6 +36,9 @@
"__experimentalDefaultControls": {
"fontSize": true
}
+ },
+ "interactivity": {
+ "clientNavigation": true
}
},
"editorStyle": "wp-block-query-pagination-numbers-editor"
diff --git a/packages/block-library/src/query-pagination-previous/block.json b/packages/block-library/src/query-pagination-previous/block.json
index fbaac543c1da35..d1e34c8630250d 100644
--- a/packages/block-library/src/query-pagination-previous/block.json
+++ b/packages/block-library/src/query-pagination-previous/block.json
@@ -41,6 +41,9 @@
"__experimentalDefaultControls": {
"fontSize": true
}
+ },
+ "interactivity": {
+ "clientNavigation": true
}
}
}
diff --git a/packages/block-library/src/query-pagination/block.json b/packages/block-library/src/query-pagination/block.json
index 973e9486bce6a0..355b188e442d8d 100644
--- a/packages/block-library/src/query-pagination/block.json
+++ b/packages/block-library/src/query-pagination/block.json
@@ -4,7 +4,7 @@
"name": "core/query-pagination",
"title": "Pagination",
"category": "theme",
- "parent": [ "core/query" ],
+ "ancestor": [ "core/query" ],
"allowedBlocks": [
"core/query-pagination-previous",
"core/query-pagination-numbers",
@@ -59,6 +59,9 @@
"__experimentalDefaultControls": {
"fontSize": true
}
+ },
+ "interactivity": {
+ "clientNavigation": true
}
},
"editorStyle": "wp-block-query-pagination-editor",
diff --git a/packages/block-library/src/query-title/block.json b/packages/block-library/src/query-title/block.json
index 65eb03d310c12d..674daadee3bb69 100644
--- a/packages/block-library/src/query-title/block.json
+++ b/packages/block-library/src/query-title/block.json
@@ -52,6 +52,9 @@
"__experimentalDefaultControls": {
"fontSize": true
}
+ },
+ "interactivity": {
+ "clientNavigation": true
}
},
"style": "wp-block-query-title"
diff --git a/packages/block-library/src/query/block.json b/packages/block-library/src/query/block.json
index 26d194dcd1f23b..b602032df36005 100644
--- a/packages/block-library/src/query/block.json
+++ b/packages/block-library/src/query/block.json
@@ -47,11 +47,10 @@
"enhancedPagination": "enhancedPagination"
},
"supports": {
- "interactivity": true,
"align": [ "wide", "full" ],
"html": false,
- "layout": true
+ "layout": true,
+ "interactivity": true
},
- "editorStyle": "wp-block-query-editor",
- "style": "wp-block-query"
+ "editorStyle": "wp-block-query-editor"
}
diff --git a/packages/block-library/src/query/index.php b/packages/block-library/src/query/index.php
index 35b3538a725617..a33a1b59f989c9 100644
--- a/packages/block-library/src/query/index.php
+++ b/packages/block-library/src/query/index.php
@@ -17,7 +17,9 @@
* @return string Returns the modified output of the query block.
*/
function render_block_core_query( $attributes, $content, $block ) {
- $is_interactive = isset( $attributes['enhancedPagination'] ) && true === $attributes['enhancedPagination'] && isset( $attributes['queryId'] );
+ $is_interactive = isset( $attributes['enhancedPagination'] )
+ && true === $attributes['enhancedPagination']
+ && isset( $attributes['queryId'] );
// Enqueue the script module and add the necessary directives if the block is
// interactive.
@@ -30,43 +32,8 @@ function render_block_core_query( $attributes, $content, $block ) {
$p->set_attribute( 'data-wp-interactive', '{"namespace":"core/query"}' );
$p->set_attribute( 'data-wp-router-region', 'query-' . $attributes['queryId'] );
$p->set_attribute( 'data-wp-init', 'callbacks.setQueryRef' );
- // Use context to send translated strings.
- $p->set_attribute(
- 'data-wp-context',
- wp_json_encode(
- array(
- 'loadingText' => __( 'Loading page, please wait.' ),
- 'loadedText' => __( 'Page Loaded.' ),
- ),
- JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_AMP
- )
- );
+ $p->set_attribute( 'data-wp-context', '{}' );
$content = $p->get_updated_html();
-
- // Mark the block as interactive.
- $block->block_type->supports['interactivity'] = true;
-
- // Add a div to announce messages using `aria-live`.
- $html_tag = 'div';
- if ( ! empty( $attributes['tagName'] ) ) {
- $html_tag = esc_attr( $attributes['tagName'] );
- }
- $last_tag_position = strripos( $content, '' );
- $content = substr_replace(
- $content,
- '
- ',
- $last_tag_position,
- 0
- );
}
}
@@ -137,10 +104,18 @@ function block_core_query_disable_enhanced_pagination( $parsed_block ) {
static $dirty_enhanced_queries = array();
static $render_query_callback = null;
- $is_interactive = isset( $parsed_block['attrs']['enhancedPagination'] ) && true === $parsed_block['attrs']['enhancedPagination'] && isset( $parsed_block['attrs']['queryId'] );
- $block_name = $parsed_block['blockName'];
-
- if ( 'core/query' === $block_name && $is_interactive ) {
+ $block_name = $parsed_block['blockName'];
+ $block_type = WP_Block_Type_Registry::get_instance()->get_registered( $block_name );
+ $has_enhanced_pagination = isset( $parsed_block['attrs']['enhancedPagination'] ) && true === $parsed_block['attrs']['enhancedPagination'] && isset( $parsed_block['attrs']['queryId'] );
+ /*
+ * Client side navigation can be true in two states:
+ * - supports.interactivity = true;
+ * - supports.interactivity.clientNavigation = true;
+ */
+ $supports_client_navigation = ( isset( $block_type->supports['interactivity']['clientNavigation'] ) && true === $block_type->supports['interactivity']['clientNavigation'] )
+ || ( isset( $block_type->supports['interactivity'] ) && true === $block_type->supports['interactivity'] );
+
+ if ( 'core/query' === $block_name && $has_enhanced_pagination ) {
$enhanced_query_stack[] = $parsed_block['attrs']['queryId'];
if ( ! isset( $render_query_callback ) ) {
@@ -155,9 +130,9 @@ function block_core_query_disable_enhanced_pagination( $parsed_block ) {
* @return string Returns the modified output of the query block.
*/
$render_query_callback = static function ( $content, $block ) use ( &$enhanced_query_stack, &$dirty_enhanced_queries, &$render_query_callback ) {
- $is_interactive = isset( $block['attrs']['enhancedPagination'] ) && true === $block['attrs']['enhancedPagination'] && isset( $block['attrs']['queryId'] );
+ $has_enhanced_pagination = isset( $block['attrs']['enhancedPagination'] ) && true === $block['attrs']['enhancedPagination'] && isset( $block['attrs']['queryId'] );
- if ( ! $is_interactive ) {
+ if ( ! $has_enhanced_pagination ) {
return $content;
}
@@ -185,7 +160,7 @@ function block_core_query_disable_enhanced_pagination( $parsed_block ) {
} elseif (
! empty( $enhanced_query_stack ) &&
isset( $block_name ) &&
- ( ! str_starts_with( $block_name, 'core/' ) || 'core/post-content' === $block_name )
+ ( ! $supports_client_navigation )
) {
foreach ( $enhanced_query_stack as $query_id ) {
$dirty_enhanced_queries[ $query_id ] = true;
diff --git a/packages/block-library/src/query/style.scss b/packages/block-library/src/query/style.scss
deleted file mode 100644
index 4e9f4741beaed4..00000000000000
--- a/packages/block-library/src/query/style.scss
+++ /dev/null
@@ -1,52 +0,0 @@
-.wp-block-query__enhanced-pagination-animation {
- position: fixed;
- top: 0;
- left: 0;
- margin: 0;
- padding: 0;
- width: 100vw;
- max-width: 100vw !important;
- height: 4px;
- background-color: var(--wp--preset--color--primary, #000);
- opacity: 0;
-
- &.start-animation {
- animation:
- wp-block-query__enhanced-pagination-start-animation
- 30s
- cubic-bezier(0.03, 0.5, 0, 1)
- forwards;
- }
-
- &.finish-animation {
- animation:
- wp-block-query__enhanced-pagination-finish-animation
- 300ms
- ease-in;
- }
-}
-
-@keyframes wp-block-query__enhanced-pagination-start-animation {
- 0% {
- transform: scaleX(0);
- transform-origin: 0% 0%;
- opacity: 1;
- }
- 100% {
- transform: scaleX(1);
- transform-origin: 0% 0%;
- opacity: 1;
- }
-}
-
-@keyframes wp-block-query__enhanced-pagination-finish-animation {
- 0% {
- opacity: 1;
- }
- 50% {
- opacity: 1;
- }
- 100% {
- opacity: 0;
- }
-}
diff --git a/packages/block-library/src/query/view.js b/packages/block-library/src/query/view.js
index 85cd16d9e14225..dc82d7968dad45 100644
--- a/packages/block-library/src/query/view.js
+++ b/packages/block-library/src/query/view.js
@@ -19,14 +19,6 @@ const isValidEvent = ( event ) =>
! event.defaultPrevented;
store( 'core/query', {
- state: {
- get startAnimation() {
- return getContext().animation === 'start';
- },
- get finishAnimation() {
- return getContext().animation === 'finish';
- },
- },
actions: {
*navigate( event ) {
const ctx = getContext();
@@ -37,28 +29,10 @@ store( 'core/query', {
if ( isValidLink( ref ) && isValidEvent( event ) && ! isDisabled ) {
event.preventDefault();
- // Don't announce the navigation immediately, wait 400 ms.
- const timeout = setTimeout( () => {
- ctx.message = ctx.loadingText;
- ctx.animation = 'start';
- }, 400 );
-
const { actions } = yield import(
'@wordpress/interactivity-router'
);
yield actions.navigate( ref.href );
-
- // Dismiss loading message if it hasn't been added yet.
- clearTimeout( timeout );
-
- // Announce that the page has been loaded. If the message is the
- // same, we use a no-break space similar to the @wordpress/a11y
- // package: https://github.com/WordPress/gutenberg/blob/c395242b8e6ee20f8b06c199e4fc2920d7018af1/packages/a11y/src/filter-message.js#L20-L26
- ctx.message =
- ctx.loadedText +
- ( ctx.message === ctx.loadedText ? '\u00A0' : '' );
-
- ctx.animation = 'finish';
ctx.url = ref.href;
// Focus the first anchor of the Query block.
diff --git a/packages/block-library/src/quote/block.json b/packages/block-library/src/quote/block.json
index 9deca000efe06b..b66e64bce2eead 100644
--- a/packages/block-library/src/quote/block.json
+++ b/packages/block-library/src/quote/block.json
@@ -58,6 +58,9 @@
},
"spacing": {
"blockGap": true
+ },
+ "interactivity": {
+ "clientNavigation": true
}
},
"styles": [
diff --git a/packages/block-library/src/read-more/block.json b/packages/block-library/src/read-more/block.json
index d3386a49d66b82..9e4fc84d193f71 100644
--- a/packages/block-library/src/read-more/block.json
+++ b/packages/block-library/src/read-more/block.json
@@ -50,6 +50,9 @@
"__experimentalDefaultControls": {
"width": true
}
+ },
+ "interactivity": {
+ "clientNavigation": true
}
},
"style": "wp-block-read-more"
diff --git a/packages/block-library/src/rss/block.json b/packages/block-library/src/rss/block.json
index 2535eda5946fbd..36d70e7b7ccb98 100644
--- a/packages/block-library/src/rss/block.json
+++ b/packages/block-library/src/rss/block.json
@@ -43,7 +43,10 @@
},
"supports": {
"align": true,
- "html": false
+ "html": false,
+ "interactivity": {
+ "clientNavigation": true
+ }
},
"editorStyle": "wp-block-rss-editor",
"style": "wp-block-rss"
diff --git a/packages/block-library/src/separator/block.json b/packages/block-library/src/separator/block.json
index 970f6b5cbb5821..484627aaa1612a 100644
--- a/packages/block-library/src/separator/block.json
+++ b/packages/block-library/src/separator/block.json
@@ -28,6 +28,9 @@
},
"spacing": {
"margin": [ "top", "bottom" ]
+ },
+ "interactivity": {
+ "clientNavigation": true
}
},
"styles": [
diff --git a/packages/block-library/src/site-logo/block.json b/packages/block-library/src/site-logo/block.json
index d1e3d1b20c3dad..3bdbdc1b809ab1 100644
--- a/packages/block-library/src/site-logo/block.json
+++ b/packages/block-library/src/site-logo/block.json
@@ -45,6 +45,9 @@
"margin": false,
"padding": false
}
+ },
+ "interactivity": {
+ "clientNavigation": true
}
},
"styles": [
diff --git a/packages/block-library/src/site-tagline/block.json b/packages/block-library/src/site-tagline/block.json
index 22fb59aab5ead7..2361be9ea3efca 100644
--- a/packages/block-library/src/site-tagline/block.json
+++ b/packages/block-library/src/site-tagline/block.json
@@ -43,6 +43,9 @@
"__experimentalDefaultControls": {
"fontSize": true
}
+ },
+ "interactivity": {
+ "clientNavigation": true
}
},
"editorStyle": "wp-block-site-tagline-editor"
diff --git a/packages/block-library/src/site-title/block.json b/packages/block-library/src/site-title/block.json
index 4a2685e6941fc6..6179452cd15b7a 100644
--- a/packages/block-library/src/site-title/block.json
+++ b/packages/block-library/src/site-title/block.json
@@ -58,6 +58,9 @@
"__experimentalDefaultControls": {
"fontSize": true
}
+ },
+ "interactivity": {
+ "clientNavigation": true
}
},
"editorStyle": "wp-block-site-title-editor",
diff --git a/packages/block-library/src/social-link/block.json b/packages/block-library/src/social-link/block.json
index 50e95efedb630c..d487465ef79664 100644
--- a/packages/block-library/src/social-link/block.json
+++ b/packages/block-library/src/social-link/block.json
@@ -31,7 +31,10 @@
],
"supports": {
"reusable": false,
- "html": false
+ "html": false,
+ "interactivity": {
+ "clientNavigation": true
+ }
},
"editorStyle": "wp-block-social-link-editor"
}
diff --git a/packages/block-library/src/social-links/block.json b/packages/block-library/src/social-links/block.json
index 1aea3684d0c63d..0c8c7be1eba9a5 100644
--- a/packages/block-library/src/social-links/block.json
+++ b/packages/block-library/src/social-links/block.json
@@ -78,6 +78,9 @@
"margin": true,
"padding": false
}
+ },
+ "interactivity": {
+ "clientNavigation": true
}
},
"styles": [
diff --git a/packages/block-library/src/spacer/block.json b/packages/block-library/src/spacer/block.json
index a9da8d537f1b61..447ea99cc0b677 100644
--- a/packages/block-library/src/spacer/block.json
+++ b/packages/block-library/src/spacer/block.json
@@ -23,6 +23,9 @@
"__experimentalDefaultControls": {
"margin": true
}
+ },
+ "interactivity": {
+ "clientNavigation": true
}
},
"editorStyle": "wp-block-spacer-editor",
diff --git a/packages/block-library/src/table-of-contents/block.json b/packages/block-library/src/table-of-contents/block.json
index 5fa7e37e6acbdf..7857744d91c4eb 100644
--- a/packages/block-library/src/table-of-contents/block.json
+++ b/packages/block-library/src/table-of-contents/block.json
@@ -45,6 +45,9 @@
"__experimentalDefaultControls": {
"fontSize": true
}
+ },
+ "interactivity": {
+ "clientNavigation": true
}
},
"example": {}
diff --git a/packages/block-library/src/table/block.json b/packages/block-library/src/table/block.json
index 470886a1247fe1..44177ef50a7e20 100644
--- a/packages/block-library/src/table/block.json
+++ b/packages/block-library/src/table/block.json
@@ -195,7 +195,10 @@
"width": true
}
},
- "__experimentalSelector": ".wp-block-table > table"
+ "__experimentalSelector": ".wp-block-table > table",
+ "interactivity": {
+ "clientNavigation": true
+ }
},
"styles": [
{
diff --git a/packages/block-library/src/tag-cloud/block.json b/packages/block-library/src/tag-cloud/block.json
index 9481dc945666ad..b95e02204faa29 100644
--- a/packages/block-library/src/tag-cloud/block.json
+++ b/packages/block-library/src/tag-cloud/block.json
@@ -48,6 +48,9 @@
"__experimentalFontStyle": true,
"__experimentalTextTransform": true,
"__experimentalLetterSpacing": true
+ },
+ "interactivity": {
+ "clientNavigation": true
}
},
"editorStyle": "wp-block-tag-cloud-editor"
diff --git a/packages/block-library/src/template-part/block.json b/packages/block-library/src/template-part/block.json
index 3b0946718bcb9c..9710bdeee2e535 100644
--- a/packages/block-library/src/template-part/block.json
+++ b/packages/block-library/src/template-part/block.json
@@ -24,7 +24,10 @@
"align": true,
"html": false,
"reusable": false,
- "renaming": false
+ "renaming": false,
+ "interactivity": {
+ "clientNavigation": true
+ }
},
"editorStyle": "wp-block-template-part-editor"
}
diff --git a/packages/block-library/src/term-description/block.json b/packages/block-library/src/term-description/block.json
index fc91a4aff4c484..7a3f27c8063ab6 100644
--- a/packages/block-library/src/term-description/block.json
+++ b/packages/block-library/src/term-description/block.json
@@ -37,6 +37,9 @@
"__experimentalDefaultControls": {
"fontSize": true
}
+ },
+ "interactivity": {
+ "clientNavigation": true
}
}
}
diff --git a/packages/block-library/src/text-columns/block.json b/packages/block-library/src/text-columns/block.json
index 3af169fadbb3bd..2599df111d34bd 100644
--- a/packages/block-library/src/text-columns/block.json
+++ b/packages/block-library/src/text-columns/block.json
@@ -29,7 +29,10 @@
}
},
"supports": {
- "inserter": false
+ "inserter": false,
+ "interactivity": {
+ "clientNavigation": true
+ }
},
"editorStyle": "wp-block-text-columns-editor",
"style": "wp-block-text-columns"
diff --git a/packages/block-library/src/verse/block.json b/packages/block-library/src/verse/block.json
index 846a1dc99caafc..1d6b817c003023 100644
--- a/packages/block-library/src/verse/block.json
+++ b/packages/block-library/src/verse/block.json
@@ -55,6 +55,9 @@
"width": true,
"color": true,
"style": true
+ },
+ "interactivity": {
+ "clientNavigation": true
}
},
"style": "wp-block-verse",
diff --git a/packages/block-library/src/video/block.json b/packages/block-library/src/video/block.json
index 5d4680f39e79a8..2bc153bc1c6165 100644
--- a/packages/block-library/src/video/block.json
+++ b/packages/block-library/src/video/block.json
@@ -88,6 +88,9 @@
"margin": false,
"padding": false
}
+ },
+ "interactivity": {
+ "clientNavigation": true
}
},
"editorStyle": "wp-block-video-editor",
diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index 6080498d5e92ba..73b2482587ba3c 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -2,9 +2,13 @@
## Unreleased
+
### Enhancements
+- `Button`: Update secondary variant to show the border even in a disabled state. ([#58606](https://github.com/WordPress/gutenberg/pull/58606)).
- `ConfirmDialog`: Add `__next40pxDefaultSize` to buttons ([#58421](https://github.com/WordPress/gutenberg/pull/58421)).
+- `Snackbar`: Update the warning message ([#58591](https://github.com/WordPress/gutenberg/pull/58591)).
+- `Composite`: Implementing `useCompositeState` with Ariakit ([#57304](https://github.com/WordPress/gutenberg/pull/57304))
### Bug Fix
@@ -12,13 +16,24 @@
- `Placeholder`: Fix Placeholder component padding when body text font size is changed ([#58323](https://github.com/WordPress/gutenberg/pull/58323)).
- `Placeholder`: Fix Global Styles typography settings bleeding into placeholder component ([#58303](https://github.com/WordPress/gutenberg/pull/58303)).
- `PaletteEdit`: Fix palette item accessibility in details view ([#58214](https://github.com/WordPress/gutenberg/pull/58214)).
+- `Snackbar`: Fix the auto-dismissal timers ([#58604](https://github.com/WordPress/gutenberg/pull/58604)).
### Experimental
- `Guide`, `Modal`: Restore accent color themability ([#58098](https://github.com/WordPress/gutenberg/pull/58098)).
- `DropdownMenuV2`: Restore accent color themability ([#58130](https://github.com/WordPress/gutenberg/pull/58130)).
+- `Tabs`: improve controlled mode focus handling and keyboard navigation ([#57696](https://github.com/WordPress/gutenberg/pull/57696)).
+- `Tabs`: prevent internal focus from updating too early ([#58625](https://github.com/WordPress/gutenberg/pull/58625)).
- Expand theming support in the `COLORS` variable object ([#58097](https://github.com/WordPress/gutenberg/pull/58097)).
+### Enhancements
+
+- `CheckboxControl`: Remove ability for label prop to be false ([#58339](https://github.com/WordPress/gutenberg/pull/58339)).
+
+### Internal
+
+- `Composite`: Removing Reakit `Composite` implementation ([#58620](https://github.com/WordPress/gutenberg/pull/58620)).
+
## 25.16.0 (2024-01-24)
### Enhancements
diff --git a/packages/components/src/button/stories/e2e/index.story.tsx b/packages/components/src/button/stories/e2e/index.story.tsx
index c2ec8e237d3b2a..1baeb08fb73e23 100644
--- a/packages/components/src/button/stories/e2e/index.story.tsx
+++ b/packages/components/src/button/stories/e2e/index.story.tsx
@@ -40,6 +40,12 @@ export const VariantStates: StoryFn< typeof Button > = (
>
Ariakit docs for ${ name }`,
+ table: { type: { summary: undefined } },
+ },
+ };
+ },
+ },
+ },
+};
+export default meta;
+
+export const Default: StoryFn< typeof Composite > = ( { ...initialState } ) => {
+ const rtl = isRTL();
+ const store = useCompositeStore( { rtl, ...initialState } );
+
+ return (
+
+
+ Item A1
+ Item A2
+ Item A3
+
+
+ Item B1
+ Item B2
+ Item B3
+
+
+ Item C1
+ Item C2
+ Item C3
+
+
+ );
+};
diff --git a/packages/components/src/composite/current/stories/utils.tsx b/packages/components/src/composite/current/stories/utils.tsx
new file mode 100644
index 00000000000000..4b2d1bba4b312b
--- /dev/null
+++ b/packages/components/src/composite/current/stories/utils.tsx
@@ -0,0 +1,61 @@
+/**
+ * External dependencies
+ */
+import type { StoryContext } from '@storybook/react';
+
+/**
+ * Internal dependencies
+ */
+import type { CompositeStoreProps } from '..';
+
+export function UseCompositeStorePlaceholder( props: CompositeStoreProps ) {
+ return (
+
+ { Object.entries( props ).map( ( [ name, value ] ) => (
+ <>
+ { name }
+ { JSON.stringify( value ) }
+
+ ) ) }
+
+ );
+}
+UseCompositeStorePlaceholder.displayName = 'useCompositeStore';
+
+export function transform( code: string, context: StoryContext ) {
+ // The output generated by Storybook for these components is
+ // messy, so we apply this transform to make it more useful
+ // for anyone reading the docs.
+ const config = ` ${ JSON.stringify( context.args, null, 2 ) } `;
+ const state = config.replace( ' {} ', '' );
+ return [
+ // Include a setup line, showing how to make use of
+ // `useCompositeStore` to convert store options into
+ // a composite store prop.
+ `const store = useCompositeStore(${ state });`,
+ '',
+ 'return (',
+ ' ' +
+ code
+ // The generated output includes a full dump of everything
+ // in the store; the reader probably isn't interested in
+ // what that looks like, so instead we drop all of that
+ // in favor of the store generated above.
+ .replaceAll( /store=\{\{[\s\S]*?\}\}/g, 'store={ store }' )
+ // Now we tidy the output by removing any unnecessary
+ // whitespace...
+ .replaceAll( //g, ( match ) =>
+ match.replaceAll( /\s+\s/g, ' ' )
+ )
+ // ...including around children...
+ .replaceAll(
+ />\s*(\w[\w ]*?)\s*<\//g,
+ ( _, value ) => `>${ value }', '}>' )
+ // Finally we indent everything to make it more readable.
+ .replaceAll( /\n/g, '\n ' ),
+ ');',
+ ].join( '\n' );
+}
diff --git a/packages/components/src/composite/index.ts b/packages/components/src/composite/index.ts
index 2a4e3655426908..aa06a6adf36ef2 100644
--- a/packages/components/src/composite/index.ts
+++ b/packages/components/src/composite/index.ts
@@ -1,22 +1,7 @@
-/**
- * Composite is a component that may contain navigable items represented by
- * CompositeItem. It's inspired by the WAI-ARIA Composite Role and implements
- * all the keyboard navigation mechanisms to ensure that there's only one
- * tab stop for the whole Composite element. This means that it can behave as
- * a roving tabindex or aria-activedescendant container.
- *
- * @see https://reakit.io/docs/composite/
- *
- * The plan is to build own API that accounts for future breaking changes
- * in Reakit (https://github.com/WordPress/gutenberg/pull/28085).
- */
-/* eslint-disable-next-line no-restricted-imports */
-export {
- Composite,
- CompositeGroup,
- CompositeItem,
- useCompositeState,
-} from 'reakit';
+// Originally this pointed at a Reakit implementation of
+// `Composite`, but we are removing Reakit entirely from the
+// codebase. We will continue to support the Reakit API
+// through the 'legacy' version, which uses Ariakit under
+// the hood.
-/* eslint-disable-next-line no-restricted-imports */
-export type { CompositeStateReturn as CompositeState } from 'reakit';
+export * from './legacy';
diff --git a/packages/components/src/composite/legacy/index.tsx b/packages/components/src/composite/legacy/index.tsx
new file mode 100644
index 00000000000000..5c5c674b5086b8
--- /dev/null
+++ b/packages/components/src/composite/legacy/index.tsx
@@ -0,0 +1,191 @@
+/**
+ * Composite is a component that may contain navigable items represented by
+ * CompositeItem. It's inspired by the WAI-ARIA Composite Role and implements
+ * all the keyboard navigation mechanisms to ensure that there's only one
+ * tab stop for the whole Composite element. This means that it can behave as
+ * a roving tabindex or aria-activedescendant container.
+ *
+ * @see https://ariakit.org/components/composite
+ */
+
+/**
+ * WordPress dependencies
+ */
+import { forwardRef } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import * as Current from '../current';
+import { useInstanceId } from '@wordpress/compose';
+
+type Orientation = 'horizontal' | 'vertical';
+
+export interface LegacyStateOptions {
+ /**
+ * ID that will serve as a base for all the items IDs.
+ */
+ baseId?: string;
+ /**
+ * Determines how next and previous functions will behave. If `rtl` is set
+ * to `true`, they will be inverted. This only affects the composite widget
+ * behavior. You still need to set `dir="rtl"` on HTML/CSS.
+ *
+ * @default false
+ */
+ rtl?: boolean;
+ /**
+ * Defines the orientation of the composite widget. If the composite has a
+ * single row or column (one-dimensional), the orientation value determines
+ * which arrow keys can be used to move focus.
+ */
+ orientation?: Orientation;
+ /**
+ * The current focused item `id`.
+ */
+ currentId?: string;
+ /**
+ * Determines how focus moves from the start and end of rows and columns.
+ *
+ * @default false
+ */
+ loop?: boolean | Orientation;
+ /**
+ * If enabled, moving to the next item from the last one in a row or column
+ * will focus the first item in the next row or column and vice-versa.
+ *
+ * ** Has effect only on two-dimensional composites. **
+ *
+ * @default false
+ */
+ wrap?: boolean | Orientation;
+ /**
+ * If enabled, moving up or down when there's no next item or the next item
+ * is disabled will shift to the item right before it.
+ *
+ * ** Has effect only on two-dimensional composites. **
+ *
+ * @default false
+ */
+ shift?: boolean;
+ unstable_virtual?: boolean;
+}
+
+type Component = React.FunctionComponent< any >;
+
+type CompositeStore = ReturnType< typeof Current.useCompositeStore >;
+type CompositeStoreState = { store: CompositeStore };
+export type CompositeState = CompositeStoreState &
+ Required< Pick< LegacyStateOptions, 'baseId' > >;
+
+// Legacy composite components can either provide state through a
+// single `state` prop, or via individual props, usually through
+// spreading the state generated by `useCompositeState`.
+// That is, ``.
+export type CompositeStateProps =
+ | { state: CompositeState }
+ | ( CompositeState & { state?: never } );
+type ComponentProps< C extends Component > = React.ComponentPropsWithRef< C >;
+export type CompositeProps< C extends Component > = ComponentProps< C > &
+ CompositeStateProps;
+type CompositeComponent< C extends Component > = (
+ props: CompositeProps< C >
+) => React.ReactElement;
+type CompositeComponentProps = CompositeState &
+ (
+ | ComponentProps< typeof Current.CompositeGroup >
+ | ComponentProps< typeof Current.CompositeItem >
+ | ComponentProps< typeof Current.CompositeRow >
+ );
+
+function mapLegacyStatePropsToComponentProps(
+ legacyProps: CompositeStateProps
+): CompositeComponentProps {
+ // If a `state` prop is provided, we unpack that; otherwise,
+ // the necessary props are provided directly in `legacyProps`.
+ if ( legacyProps.state ) {
+ const { state, ...rest } = legacyProps;
+ const { store, ...props } =
+ mapLegacyStatePropsToComponentProps( state );
+ return { ...rest, ...props, store };
+ }
+
+ return legacyProps;
+}
+
+function proxyComposite< C extends Component >(
+ ProxiedComponent: C | React.ForwardRefExoticComponent< C >,
+ propMap: Record< string, string > = {}
+): CompositeComponent< C > {
+ const displayName = ProxiedComponent.displayName;
+ const Component = ( legacyProps: CompositeStateProps ) => {
+ const { store, ...rest } =
+ mapLegacyStatePropsToComponentProps( legacyProps );
+ const props = rest as ComponentProps< C >;
+ props.id = useInstanceId( store, props.baseId, props.id );
+
+ Object.entries( propMap ).forEach( ( [ from, to ] ) => {
+ if ( props.hasOwnProperty( from ) ) {
+ Object.assign( props, { [ to ]: props[ from ] } );
+ delete props[ from ];
+ }
+ } );
+
+ delete props.baseId;
+
+ return
+
+
+ Item A1
+
+
+ Item A2
+
+
+ Item A3
+
+
+
+
+ Item B1
+
+
+ Item B2
+
+
+ Item B3
+
+
+
+
+ Item C1
+
+
+ Item C2
+
+
+ Item C3
+
+
+
+ );
+};
+TwoDimensionsWithStateProp.args = {};
+
+export const TwoDimensionsWithSpreadProps: StoryFn<
+ typeof UseCompositeStatePlaceholder
+> = ( initialState ) => {
+ const state = useCompositeState( initialState );
+
+ return (
+
+
+
+ Item A1
+
+
+ Item A2
+
+
+ Item A3
+
+
+
+
+ Item B1
+
+
+ Item B2
+
+
+ Item B3
+
+
+
+
+ Item C1
+
+
+ Item C2
+
+
+ Item C3
+
+
+
+ );
+};
+TwoDimensionsWithSpreadProps.args = {};
+
+export const OneDimensionWithStateProp: StoryFn<
+ typeof UseCompositeStatePlaceholder
+> = ( initialState ) => {
+ const state = useCompositeState( initialState );
+
+ return (
+
+
+ Item 1
+
+
+ Item 2
+
+
+ Item 3
+
+
+ Item 4
+
+
+ Item 5
+
+
+ );
+};
+OneDimensionWithStateProp.args = {};
+
+export const OneDimensionWithSpreadProps: StoryFn<
+ typeof UseCompositeStatePlaceholder
+> = ( initialState ) => {
+ const state = useCompositeState( initialState );
+
+ return (
+
+
+ Item 1
+
+
+ Item 2
+
+
+ Item 3
+
+
+ Item 4
+
+
+ Item 5
+
+
+ );
+};
+OneDimensionWithSpreadProps.args = {};
diff --git a/packages/components/src/composite/legacy/stories/utils.tsx b/packages/components/src/composite/legacy/stories/utils.tsx
new file mode 100644
index 00000000000000..06edd348634695
--- /dev/null
+++ b/packages/components/src/composite/legacy/stories/utils.tsx
@@ -0,0 +1,67 @@
+/**
+ * External dependencies
+ */
+import type { StoryContext } from '@storybook/react';
+
+/**
+ * Internal dependencies
+ */
+import type { LegacyStateOptions } from '..';
+
+export function UseCompositeStatePlaceholder( props: LegacyStateOptions ) {
+ return (
+
+ { Object.entries( props ).map( ( [ name, value ] ) => (
+ <>
+ { name }
+ { JSON.stringify( value ) }
+
+ ) ) }
+
+ );
+}
+UseCompositeStatePlaceholder.displayName = 'useCompositeState';
+
+export function transform( code: string, context: StoryContext ) {
+ // The output generated by Storybook for these components is
+ // messy, so we apply this transform to make it more useful
+ // for anyone reading the docs.
+ const config = ` ${ JSON.stringify( context.args, null, 2 ) } `;
+ const state = config.replace( ' {} ', '' );
+ return [
+ // Include a setup line, showing how to make use of
+ // `useCompositeState` to convert state options into
+ // a composite state option.
+ `const state = useCompositeState(${ state });`,
+ '',
+ 'return (',
+ ' ' +
+ code
+ // The generated output includes a full dump of everything
+ // in the state; the reader probably isn't interested in
+ // what that looks like, so instead we drop all of that
+ // in favor of the state generated above.
+ .replaceAll( /state=\{\{[\s\S]*?\}\}/g, 'state={ state }' )
+ // The previous line only works for `state={ state }`, and
+ // doesn't replace spread props, so we do that separately.
+ .replaceAll( '=>', '' )
+ .replaceAll( /baseId=[^>]+?(\s*>)/g, ( _, close ) => {
+ return `{ ...state }${ close }`;
+ } )
+ // Now we tidy the output by removing any unnecessary
+ // whitespace...
+ .replaceAll( //g, ( match ) =>
+ match.replaceAll( /\s+\s/g, ' ' )
+ )
+ // ...including around children...
+ .replaceAll(
+ / >\s+([\w\s]*?)\s+<\//g,
+ ( _, value ) => `>${ value }', '}>' )
+ // Finally we indent everything to make it more readable.
+ .replaceAll( /\n/g, '\n ' ),
+ ');',
+ ].join( '\n' );
+}
diff --git a/packages/components/src/composite/legacy/test/index.tsx b/packages/components/src/composite/legacy/test/index.tsx
new file mode 100644
index 00000000000000..ee6654f9fd3698
--- /dev/null
+++ b/packages/components/src/composite/legacy/test/index.tsx
@@ -0,0 +1,579 @@
+/**
+ * External dependencies
+ */
+import { queryByAttribute, render, screen } from '@testing-library/react';
+import { press, waitFor } from '@ariakit/test';
+
+/**
+ * Internal dependencies
+ */
+import {
+ Composite,
+ CompositeGroup,
+ CompositeItem,
+ useCompositeState,
+} from '..';
+
+// This is necessary because of how Ariakit calculates page up and
+// page down. Without this, nothing has a height, and so paging up
+// and down doesn't behave as expected in tests.
+
+let clientHeightSpy: jest.SpiedGetter<
+ typeof HTMLElement.prototype.clientHeight
+>;
+
+beforeAll( () => {
+ clientHeightSpy = jest
+ .spyOn( HTMLElement.prototype, 'clientHeight', 'get' )
+ .mockImplementation( function getClientHeight( this: HTMLElement ) {
+ if ( this.tagName === 'BODY' ) {
+ return window.outerHeight;
+ }
+ return 50;
+ } );
+} );
+
+afterAll( () => {
+ clientHeightSpy?.mockRestore();
+} );
+
+type InitialState = Parameters< typeof useCompositeState >[ 0 ];
+type CompositeState = ReturnType< typeof useCompositeState >;
+type CompositeStateProps = CompositeState | { state: CompositeState };
+
+async function renderAndValidate( ...args: Parameters< typeof render > ) {
+ const view = render( ...args );
+ await waitFor( () => {
+ const activeButton = queryByAttribute(
+ 'data-active-item',
+ view.baseElement,
+ ''
+ );
+ expect( activeButton ).not.toBeNull();
+ } );
+ return view;
+}
+
+function getKeys( rtl: boolean ) {
+ return {
+ previous: rtl ? 'ArrowRight' : 'ArrowLeft',
+ next: rtl ? 'ArrowLeft' : 'ArrowRight',
+ first: rtl ? 'End' : 'Home',
+ last: rtl ? 'Home' : 'End',
+ };
+}
+
+function OneDimensionalTest( props: CompositeStateProps ) {
+ return (
+
+ Item 1
+ Item 2
+ Item 3
+
+ );
+}
+
+function getOneDimensionalItems() {
+ return {
+ item1: screen.getByText( 'Item 1' ),
+ item2: screen.getByText( 'Item 2' ),
+ item3: screen.getByText( 'Item 3' ),
+ };
+}
+
+function TwoDimensionalTest( props: CompositeStateProps ) {
+ return (
+
+
+ Item A1
+ Item A2
+ Item A3
+
+
+ Item B1
+ Item B2
+ Item B3
+
+
+ Item C1
+ Item C2
+ Item C3
+
+
+ );
+}
+
+function getTwoDimensionalItems() {
+ return {
+ itemA1: screen.getByText( 'Item A1' ),
+ itemA2: screen.getByText( 'Item A2' ),
+ itemA3: screen.getByText( 'Item A3' ),
+ itemB1: screen.getByText( 'Item B1' ),
+ itemB2: screen.getByText( 'Item B2' ),
+ itemB3: screen.getByText( 'Item B3' ),
+ itemC1: screen.getByText( 'Item C1' ),
+ itemC2: screen.getByText( 'Item C2' ),
+ itemC3: screen.getByText( 'Item C3' ),
+ };
+}
+
+function ShiftTest( props: CompositeStateProps ) {
+ return (
+
+
+ Item A1
+
+
+ Item B1
+ Item B2
+
+
+ Item C1
+
+ Item C2
+
+
+
+ );
+}
+
+function getShiftTestItems() {
+ return {
+ itemA1: screen.getByText( 'Item A1' ),
+ itemB1: screen.getByText( 'Item B1' ),
+ itemB2: screen.getByText( 'Item B2' ),
+ itemC1: screen.getByText( 'Item C1' ),
+ itemC2: screen.getByText( 'Item C2' ),
+ };
+}
+
+describe.each( [
+ [
+ 'With "spread" state',
+ ( initialState?: InitialState ) => useCompositeState( initialState ),
+ ],
+ [
+ 'With `state` prop',
+ ( initialState?: InitialState ) => ( {
+ state: useCompositeState( initialState ),
+ } ),
+ ],
+] )( '%s', ( __, useProps ) => {
+ test( 'Renders as a single tab stop', async () => {
+ const Test = () => (
+ <>
+ Before
+ After
+
+ );
+ renderAndValidate(
+ Item 1
+
+ Item 2
+
+ Item 3
+
+ );
+ };
+ renderAndValidate(
+ Item 1
+
+ Item 2
+
+ Item 3
+
+ );
+ };
+ renderAndValidate(
- Item 1
- Item 2
- Item 3
-
- );
- }
-
- function getOneDimensionalItems() {
- return {
- item1: screen.getByText( 'Item 1' ),
- item2: screen.getByText( 'Item 2' ),
- item3: screen.getByText( 'Item 3' ),
- };
- }
-
- function TwoDimensionalTest( { ...props } ) {
- return (
-
-
- Item A1
- Item A2
- Item A3
-
-
- Item B1
- Item B2
- Item B3
-
-
- Item C1
- Item C2
- Item C3
-
-
- );
- }
-
- function getTwoDimensionalItems() {
- return {
- itemA1: screen.getByText( 'Item A1' ),
- itemA2: screen.getByText( 'Item A2' ),
- itemA3: screen.getByText( 'Item A3' ),
- itemB1: screen.getByText( 'Item B1' ),
- itemB2: screen.getByText( 'Item B2' ),
- itemB3: screen.getByText( 'Item B3' ),
- itemC1: screen.getByText( 'Item C1' ),
- itemC2: screen.getByText( 'Item C2' ),
- itemC3: screen.getByText( 'Item C3' ),
- };
- }
-
- function ShiftTest( { ...props } ) {
- return (
-
-
- Item A1
-
-
- Item B1
- Item B2
-
-
- Item C1
-
- Item C2
-
-
-
- );
- }
-
- function getShiftTestItems() {
- return {
- itemA1: screen.getByText( 'Item A1' ),
- itemB1: screen.getByText( 'Item B1' ),
- itemB2: screen.getByText( 'Item B2' ),
- itemC1: screen.getByText( 'Item C1' ),
- itemC2: screen.getByText( 'Item C2' ),
- };
- }
-
- describe.each( [
- [ 'With spread state', useSpreadProps ],
- [ 'With `state` prop', useStateProps ],
- ] )( '%s', ( __, useProps ) => {
- function useOneDimensionalTest( initialState?: InitialState ) {
- const Test = () => (
- Before
- After
-
- );
- render(
- Item 1
-
- Item 2
-
- Item 3
-
- );
- };
- render(
- Item 1
-
- Item 2
-
- Item 3
-
- );
- };
- render( Focus me
+ Focus me
+
- { documentLabel }
-
+
+
+ { documentLabel }
+
+
{ /* translators: Text label for the Block Settings Sidebar tab. */ }
{ __( 'Block' ) }
@@ -35,4 +46,4 @@ const SettingsHeader = () => {
);
};
-export default SettingsHeader;
+export default forwardRef( SettingsHeader );
diff --git a/packages/edit-post/src/components/sidebar/settings-sidebar/index.js b/packages/edit-post/src/components/sidebar/settings-sidebar/index.js
index 44900fff3f7be2..31381fad5a2c44 100644
--- a/packages/edit-post/src/components/sidebar/settings-sidebar/index.js
+++ b/packages/edit-post/src/components/sidebar/settings-sidebar/index.js
@@ -6,7 +6,13 @@ import {
store as blockEditorStore,
} from '@wordpress/block-editor';
import { useSelect, useDispatch } from '@wordpress/data';
-import { Platform, useCallback, useContext } from '@wordpress/element';
+import {
+ Platform,
+ useCallback,
+ useContext,
+ useEffect,
+ useRef,
+} from '@wordpress/element';
import { isRTL, __ } from '@wordpress/i18n';
import { drawerLeft, drawerRight } from '@wordpress/icons';
import { store as interfaceStore } from '@wordpress/interface';
@@ -50,17 +56,45 @@ const SidebarContent = ( {
keyboardShortcut,
isEditingTemplate,
} ) => {
+ const tabListRef = useRef( null );
// Because `PluginSidebarEditPost` renders a `ComplementaryArea`, we
// need to forward the `Tabs` context so it can be passed through the
// underlying slot/fill.
const tabsContextValue = useContext( Tabs.Context );
+ // This effect addresses a race condition caused by tabbing from the last
+ // block in the editor into the settings sidebar. Without this effect, the
+ // selected tab and browser focus can become separated in an unexpected way
+ // (e.g the "block" tab is focused, but the "post" tab is selected).
+ useEffect( () => {
+ const tabsElements = Array.from(
+ tabListRef.current?.querySelectorAll( '[role="tab"]' ) || []
+ );
+ const selectedTabElement = tabsElements.find(
+ // We are purposefully using a custom `data-tab-id` attribute here
+ // because we don't want rely on any assumptions about `Tabs`
+ // component internals.
+ ( element ) => element.getAttribute( 'data-tab-id' ) === sidebarName
+ );
+ const activeElement = selectedTabElement?.ownerDocument.activeElement;
+ const tabsHasFocus = tabsElements.some( ( element ) => {
+ return activeElement && activeElement.id === element.id;
+ } );
+ if (
+ tabsHasFocus &&
+ selectedTabElement &&
+ selectedTabElement.id !== activeElement?.id
+ ) {
+ selectedTabElement?.focus();
+ }
+ }, [ sidebarName ] );
+
return (
- toggleModal() }
- initialTabName={ modalTabOpen }
+ initialTabId={ modalTabOpen }
/>
) }
@@ -47,7 +47,7 @@ function FontFamilies() {
toggleModal( 'installed-fonts' )
}
aria-label={ __( 'Manage fonts' ) }
- icon={ typography }
+ icon={ settings }
size={ 'small' }
/>
@@ -63,7 +63,16 @@ function FontFamilies() {
) ) }
) : (
- <>{ __( 'No fonts installed.' ) }
+ <>
+ { __( 'No fonts installed.' ) }
+ toggleModal( 'upload-fonts' ) }
+ >
+ { __( 'Add fonts' ) }
+
+
) }
diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/collection-font-variant.js b/packages/edit-site/src/components/global-styles/font-library-modal/collection-font-variant.js
index ab090a0cd0b4db..0db8932a98e34d 100644
--- a/packages/edit-site/src/components/global-styles/font-library-modal/collection-font-variant.js
+++ b/packages/edit-site/src/components/global-styles/font-library-modal/collection-font-variant.js
@@ -35,21 +35,23 @@ function CollectionFontVariant( {
);
return (
-
+
+
-
+
);
}
diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/font-collection.js b/packages/edit-site/src/components/global-styles/font-library-modal/font-collection.js
index 9735ce1c35a4de..4a14ee245694b8 100644
--- a/packages/edit-site/src/components/global-styles/font-library-modal/font-collection.js
+++ b/packages/edit-site/src/components/global-styles/font-library-modal/font-collection.js
@@ -298,11 +298,10 @@ function Footer( { handleInstall, isDisabled } ) {
{ __( 'Install' ) }
diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/installed-fonts.js b/packages/edit-site/src/components/global-styles/font-library-modal/installed-fonts.js
index cbe9927187e829..73ff17f25b9a66 100644
--- a/packages/edit-site/src/components/global-styles/font-library-modal/installed-fonts.js
+++ b/packages/edit-site/src/components/global-styles/font-library-modal/installed-fonts.js
@@ -186,11 +186,10 @@ function Footer( { shouldDisplayDeleteButton, handleUninstallClick } ) {
) }