Site Editor: Reduce the Amount of Data Passed Through the Components Tree

[Copons]

Description

While working on #26394 I've noticed that having a TemplateNavigationItems (plural) component, rendering lists of NavigationItem, prevented adding hooks to single items.
This led me to a bit of a simplification of the whole Site Editor navigation structure:

• Use a TemplateNavigationItem (singular) component instead, self-containing as much logic as possible, instead of inheriting from various hierarchical levels above.

In my initial exploration I've even tried to avoid passing templates through, relying on getEntityRecord in the TemplateNavigationItem.
This though had the side effect of firing a lot of unnecessary requests (one for the list, and one for each item). I wonder if there's a way to bypass the API and only select from Redux. 🤔

How has this been tested?

• Open the Site Editor and open the navigation sidebar.
• Navigate around the Templates and Template Parts menus.
• Make sure everything works as expected.
• Make sure the previews show up correctly.

Types of changes

Code quality

Checklist:

• My code is tested.
• My code follows the WordPress code style.
• My code follows the accessibility standards.
• My code has proper inline documentation.
• I've included developer documentation if appropriate.
• I've updated all React Native files affected by any refactorings/renamings in this PR.

[Addison-Stavlo]

This all looks good to me and the sidebar still works as it did previously. 🥳

I like the structure better overall. With the setTemplate and preview states defined at the item level, things look a bit more clean. Im assuming these are the hooks you were referring to?

[Copons]

I like the structure better overall. With the setTemplate and preview states defined at the item level, things look a bit more clean. Im assuming these are the hooks you were referring to?

Actually I've only noticed those while working on this. 😅

What I'm referring to is the getTemplateInfo function which, with the changes introduced in #26394, needs the templates definitions from Redux (whereas now it grabs them from a JS constant), which means using a useSelect hook, which in turns require the function itself to become a hook.

getTemplateInfo is used on each template and template part navigation item, using the slug as a parameter, and returning the appropriate title and description.
Currently, we only have a TemplateNavigationItems component rendering a list of items, which needlessly complicates things for the hypothetical useTemplateInfo.
Turning the list into single TemplateNavigationItem components means that we could just use const { title, description } = useTemplateInfo( slug ) on every item, "embedding" the template definitions selector into the hook itself, instead of having it outside (in multiple places).

[github-actions]

Size Change: -57 B (0%)

Total Size: 1.2 MB

Filename	Size	Change
build/edit-site/index.js	22.1 kB	-57 B (0%)

ℹ️ View Unchanged

Filename	Size	Change
build/a11y/index.js	1.14 kB	0 B
build/annotations/index.js	3.53 kB	0 B
build/api-fetch/index.js	3.34 kB	0 B
build/autop/index.js	2.73 kB	0 B
build/blob/index.js	664 B	0 B
build/block-directory/index.js	8.58 kB	0 B
build/block-directory/style-rtl.css	943 B	0 B
build/block-directory/style.css	942 B	0 B
build/block-editor/index.js	130 kB	0 B
build/block-editor/style-rtl.css	11 kB	0 B
build/block-editor/style.css	11 kB	0 B
build/block-library/editor-rtl.css	8.93 kB	0 B
build/block-library/editor.css	8.93 kB	0 B
build/block-library/index.js	146 kB	0 B
build/block-library/style-rtl.css	7.75 kB	0 B
build/block-library/style.css	7.75 kB	0 B
build/block-library/theme-rtl.css	741 B	0 B
build/block-library/theme.css	741 B	0 B
build/block-serialization-default-parser/index.js	1.78 kB	0 B
build/block-serialization-spec-parser/index.js	3.1 kB	0 B
build/blocks/index.js	47.6 kB	0 B
build/components/index.js	172 kB	0 B
build/components/style-rtl.css	15.3 kB	0 B
build/components/style.css	15.3 kB	0 B
build/compose/index.js	9.62 kB	0 B
build/core-data/index.js	12.1 kB	0 B
build/data-controls/index.js	679 B	0 B
build/data/index.js	8.61 kB	0 B
build/date/index.js	31.8 kB	0 B
build/deprecated/index.js	769 B	0 B
build/dom-ready/index.js	571 B	0 B
build/dom/index.js	4.42 kB	0 B
build/edit-navigation/index.js	10.7 kB	0 B
build/edit-navigation/style-rtl.css	881 B	0 B
build/edit-navigation/style.css	885 B	0 B
build/edit-post/index.js	306 kB	0 B
build/edit-post/style-rtl.css	6.37 kB	0 B
build/edit-post/style.css	6.35 kB	0 B
build/edit-site/style-rtl.css	3.79 kB	0 B
build/edit-site/style.css	3.79 kB	0 B
build/edit-widgets/index.js	26.6 kB	0 B
build/edit-widgets/style-rtl.css	3.09 kB	0 B
build/edit-widgets/style.css	3.09 kB	0 B
build/editor/editor-styles-rtl.css	480 B	0 B
build/editor/editor-styles.css	482 B	0 B
build/editor/index.js	42.6 kB	0 B
build/editor/style-rtl.css	3.85 kB	0 B
build/editor/style.css	3.84 kB	0 B
build/element/index.js	4.44 kB	0 B
build/escape-html/index.js	735 B	0 B
build/format-library/index.js	7.47 kB	0 B
build/format-library/style-rtl.css	547 B	0 B
build/format-library/style.css	548 B	0 B
build/hooks/index.js	1.74 kB	0 B
build/html-entities/index.js	623 B	0 B
build/i18n/index.js	3.55 kB	0 B
build/is-shallow-equal/index.js	712 B	0 B
build/keyboard-shortcuts/index.js	2.38 kB	0 B
build/keycodes/index.js	1.84 kB	0 B
build/list-reusable-blocks/index.js	3.01 kB	0 B
build/list-reusable-blocks/style-rtl.css	476 B	0 B
build/list-reusable-blocks/style.css	476 B	0 B
build/media-utils/index.js	5.11 kB	0 B
build/notices/index.js	1.69 kB	0 B
build/nux/index.js	3.26 kB	0 B
build/nux/style-rtl.css	671 B	0 B
build/nux/style.css	668 B	0 B
build/plugins/index.js	2.44 kB	0 B
build/primitives/index.js	1.35 kB	0 B
build/priority-queue/index.js	790 B	0 B
build/redux-routine/index.js	2.85 kB	0 B
build/reusable-blocks/index.js	3.06 kB	0 B
build/rich-text/index.js	13 kB	0 B
build/server-side-render/index.js	2.6 kB	0 B
build/shortcode/index.js	1.69 kB	0 B
build/token-list/index.js	1.24 kB	0 B
build/url/index.js	4.05 kB	0 B
build/viewport/index.js	1.74 kB	0 B
build/warning/index.js	1.14 kB	0 B
build/wordcount/index.js	1.22 kB	0 B

_{compressed-size-action}