Enhance block appender labels to reflect default block type #71502
+646
−18
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
- Enhance ButtonBlockAppender to use __experimentalLabel with 'appender' context - Update default renderToggle in Inserter to support appender labels - Add appender context support to Navigation Link block - Convert all dynamic labels to lowercase for consistency - Maintain backwards compatibility with graceful fallbacks - Add safety checks for string length and null values This allows blocks to provide contextual appender labels like 'Add page' instead of generic 'Add block' by implementing the 'appender' context in their __experimentalLabel function.
- Add tests for ButtonBlockAppender component functionality - Add tests for Inserter defaultRenderToggle appender label logic - Add tests for Navigation Link block labelling functionality - Test appender context, list-view context, and edge cases - Verify lowercase conversion and safety checks - Test integration with Navigation Block DEFAULT_BLOCK - Fix linting errors and improve test structure
These tests only verify basic rendering and don't test any of the new appender label functionality added in this PR. The actual appender label logic is tested in the Inserter component tests.
getdave
added
[Feature] Inserter
getdave
requested review from
ajitbohra,
ellatrix and
fabiankaegy
as code owners
|
The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message. To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
|
Size Change: +207 B (+0.01%) Total Size: 1.93 MB
ℹ️ View Unchanged
|
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
What
This PR enhances block appender labels to dynamically reflect the type of block being inserted, specifically addressing the Navigation block's appender to show "Add page" instead of the generic "Add block". This is a follow-up to PR #71163 which normalized Navigation block appender behavior between canvas and list view contexts.
The enhancement makes appender labels contextually aware by leveraging the block's
__experimentalLabelfunction with an 'appender' context, allowing blocks to provide custom labels for their default insertion scenarios.Closes #71946
Why
Currently, all block appenders show the generic "Add block" label regardless of what type of block will actually be inserted. This creates a disconnect between user expectations and the actual behavior, particularly in the Navigation block where the "Page" variation of the Nav Link block is inserted by default.
The Navigation block's DEFAULT_BLOCK configuration specifies that a Navigation Link block with specific attributes (e.g., kind: 'post-type', type: 'page') should be inserted, but the appender label doesn't reflect this specificity.
How
Core Implementation
Enhanced Inserter Components: Modified both
ButtonBlockAppenderandInserter'sdefaultRenderToggleto:__experimentalLabelfunction withdefaultBlock.attributesandcontext: 'appender'Navigation Link Block Enhancement: Extended the Navigation Link block's
__experimentalLabelfunction to handle the 'appender' context:Design Decisions
Why not a direct prop approach? We considered adding a new
appenderLabelprop to the inserter components, but decided it would be better for the appender to determine the correct label itself. This approach:Why not derive from block variations? We initially explored using block variations to determine the correct label, but discovered that block variations aren't standardized in how they identify themselves via their attributes. Each block handles variation identification differently:
variationattributeskindandtypeattributesWhy
__experimentalLabel? We chose to leverage the existing__experimentalLabelfunction because:Backwards Compatibility Concerns
This implementation includes several safety measures to prevent breakages:
Safe Function Calls: The
__experimentalLabelfunction is only called when:defaultBlock.attributesexists and is not null__experimentalLabelfunction definedResult Validation: The returned label is only used if:
Potential Breakage Scenarios: Blocks that define
__experimentalLabelwith default return values could potentially be affected:Mitigation: The 50-character limit and string validation provide reasonable protection against most edge cases, and the fallback to "Add block" ensures the appender remains functional even if custom labels fail.
Testing
__experimentalLabelwith appender context for all supported typesFollow-ups
__experimentalLabelto public API: The 'appender' context should be documented and the function promoted from experimental statusScreenshots
Note the
Add pagetooltip on the appender.Breaking Changes
See above