[Mobile] - Adds useEditorWrapperStyles hook #49616
Merged
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
geriux
added
[Status] In Progress
|
Size Change: 0 B Total Size: 1.37 MB ℹ️ View Unchanged
|
|
Flaky tests detected in 7b98040. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/4691711842
|
geriux
force-pushed
the
rnmobile/use-editor-canvas-margins-hook
branch
from
4125399
to
f9b9328
Compare
geriux
changed the title
geriux
changed the title
geriux
force-pushed
the
rnmobile/use-editor-canvas-margins-hook
branch
from
8d93ea5
to
7b98040
Compare
dcalhoun
reviewed
Apr 21, 2023
packages/block-editor/src/hooks/test/use-editor-wrapper-styles.native.js
Show resolved
Hide resolved
packages/block-editor/src/hooks/use-editor-wrapper-styles.native.js
Outdated
Show resolved
Hide resolved
packages/block-editor/src/hooks/use-editor-wrapper-styles.native.js
Outdated
Show resolved
Hide resolved
packages/block-editor/src/hooks/use-editor-wrapper-styles.native.js
Outdated
Show resolved
Hide resolved
packages/block-editor/src/hooks/use-editor-wrapper-styles.native.scss
Outdated
Show resolved
Hide resolved
…om marginHorizontal values
… styles to the JavaScript side and update tests
…ject param instead of first level params
geriux
force-pushed
the
rnmobile/use-editor-canvas-margins-hook
branch
from
7b98040
to
33d4472
Compare
|
Hey @dcalhoun 👋 I've addressed the first round of feedback, let me know what you think! I also updated the feature |
dcalhoun
approved these changes
Apr 25, 2023
packages/block-editor/src/hooks/use-editor-wrapper-styles.native.js
Outdated
Show resolved
Hide resolved
… canvasStyles logic
Thank you for the review and feedback! |
geriux
added a commit
that referenced
this pull request
May 3, 2023
* Mobile - Adds initial useEditorWrapperStyles hook * Mobile - Update useEditorWrapperStyles hook to take into account custom marginHorizontal values * Mobile - useEditorWrapperStyles hook - Remove helper tests and exports * Mobile - useEditorWrapperStyles - Move max width values from the SCSS styles to the JavaScript side and update tests * Mobile - useEditorWrapperStyles - Update helpers to use an options object param instead of first level params * Mobile - useEditorWrapperStyles - Update wrapperStyles logic to unify canvasStyles logic
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.
Closes wordpress-mobile/gutenberg-mobile#5614
What?
This PR introduces a new hook
useEditorWrapperStyleswhich will replace the usage of the ReadableContentView component in a separate PR. It will also handle the margins and max-width that will be used for the block wrappers within theBlockList.Why?
Currently, the ReadableContentView component uses listeners to detect window dimension changes to then partly handle the alignment of the content depending on the
alignprop. This component is used in different places like the EditorHeader, EmptyListComponent, and BlockListItem.Having this in the
BlockListItemfor example when having different blocks that use InnerBlocks means that there will be quite a lot of listeners added when is not needed.Nesting too many
Viewcomponents is also a problem as we've reached the maximum in the past so we want to avoid that too.The BlockListItem component also handles margin and style data depending on the screen and the alignment so this hook will take care of that too.
How?
The hook will use there functions:
getWideWidthStyles-> It will handle the styles logic forwidealignments.getFullWidthStyles-> It will handle the styles logic forfullalignments.getBlockMargin-> It will handle the horizontal margins for a block taking into account its parents.useEditorWrapperStyles
Will return the
wrapperStylesand themargin.Usage examples:
For the EditorHeader component:
} ) { + const [ wrapperStyles ] = useEditorWrapperStyles(); const blockHolderFocusedStyle = getStylesFromColorScheme( styles.blockHolderFocused, styles.blockHolderFocusedDark ); + return ( - <ReadableContentView> + <View style={ wrapperStyles }> <PostTitleFor the BlockListItem component
Testing Instructions
CI checks should pass.
An integration PR will follow up this one.
Testing Instructions for Keyboard
N/A
Screenshots or screencast
N/A