Widget Editor: Refactor header using the DocumentTools component from the editor package #57660
Conversation
This file contains 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
t-hamano
added
[Type] Code Quality
|
Size Change: -714 B (0%) Total Size: 1.69 MB
ℹ️ View Unchanged
|
… the editor package
t-hamano
force-pushed
the
widgets/use-editor-document-tools
branch
from
ada9662
to
778da1e
Compare
24 tasks
t-hamano
requested review from
kevin940726,
Mamaduka,
talldan,
noisysocks,
tellthemachines,
adamziel,
ajitbohra,
ryanwelcher,
juanmaguitar,
fabiankaegy and
ndiego
as code owners
t-hamano
commented
Jan 9, 2024
Comment on lines
+102
to
+115
| useEffect( () => { | ||
| if ( isInserterOpened && ! isLastSelectedWidgetAreaOpen ) { | ||
| // Select the last selected block if hasn't already. | ||
| selectBlock( widgetAreaClientId ); | ||
| // Open the last selected widget area when opening the inserter. | ||
| setIsWidgetAreaOpen( widgetAreaClientId, true ); | ||
| } | ||
| }, [ | ||
| widgetAreaClientId, | ||
| isInserterOpened, | ||
| isLastSelectedWidgetAreaOpen, | ||
| selectBlock, | ||
| setIsWidgetAreaOpen, | ||
| ] ); |
There was a problem hiding this comment.
The unique processing that existed in the DocumentTools component of the Widget Editor has been moved here. If the selected widget area is closed when you click the inserter button, the widget area will be opened.
t-hamano
changed the title
|
IIRC there was a reason @adamziel or @noisysocks might know more. |
|
I also checked whether the widgets editor should use the editor package or not and decided that for now it should not. The editor package components rely on the fact that the editor is about editing a given entity and this is provided as a prop to the EditorProvider component which is responsible for initializing the store properly. As it stands, this abstraction is not applicable to the widgets editor because it has no root entity to be edited. While it's true that some components can work like shown here, this is only due to the fact that we have global stores in WP but this is not a given. So I think we should not try to reuse the package and the components for the moment. That said if we think about it, the widget areas are not different than template parts conceptually, so in a longer timeframe, I see no reason for not moving these to the site editor and just editing them exactly like template parts |
|
@talldan @youknowriad Thank you for the advice. Now, I would like to close this PR and consider adjusting the style while keeping DocumentTools in the Widget Editor 👍 |
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.
Related to #57214
What?
This PR refactors the header in the Widget Editor using the
DocumentToolscomponent from the@wordpress/editorpackage instead of the proprietaryDocumentToolscomponent.At the same time, we want the "Show button text labels" setting to be applied to the header area as well.
Before
Document tool buttons are 36px in size unlike other editors. Additionally, the focus outline is cut off.
Mobile Layout:
After
The document tools button size is 32 pixels, similar to other editors. Also, the focus outline is not cut.
The Widget Editor doesn't have the preferences modal, but when you turn on "Show button text labels" in the Post Editor or the Site Editor, the buttons in the header display text instead of icons.
Mobile Layout:
Why?
The Widget Editor header has a different UI compared to other editors. The approach taken in #57214 to unify
DocumentToolscomponent should also be applicable to the Widget Editor.How?
DocumentToolssetIsInserterOpenedandsetIsListViewOpenedactionsTesting Instructions