-
Notifications
You must be signed in to change notification settings - Fork 4.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat: Toggle mobile Quote block citation #59097
feat: Toggle mobile Quote block citation #59097
Conversation
Previously, the native `RichText` implementation relied upon a bespoke `setRef` prop to forward refs to the native rich text editor instance (i.e., Aztec). While this worked fine for contexts where `RichText` was used for the native platform only, it diverged from the web `RichText`. This divergence created incompatibility for the context of a component running on both web and native which passed a ref to `RichText`. This refactor aligns the native `RichText` with the web implementation so that refs may be passed under a single, unified `ref` prop. The ref is then forwarded onto the native rich text editor instance, as it was before.
The `display: block` style attribute is not supported by React Native and results in an error.
The citation input is now hidden behind a toggle button.
Size Change: -4 B (0%) Total Size: 1.71 MB
ℹ️ View Unchanged
|
Align with the web implementation by hiding the citation input behind a toggle button.
Flaky tests detected in 075a308. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/7919722143
|
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. |
What?
Toggle the Quote block citation visibility with a button.
Why?
Align with the web editor's approach for citations and captions.
How?
refactor: Align
RichText
refs with web implementationPreviously, the native
RichText
implementation relied upon a bespokesetRef
prop to forward refs to the native rich text editor instance(i.e., Aztec). While this worked fine for contexts where
RichText
wasused for the native platform only, it diverged from the web
RichText
.This divergence created incompatibility for the context of a component
running on both web and native which passed a ref to
RichText
.This refactor aligns the native
RichText
with the web implementationso that refs may be passed under a single, unified
ref
prop. The refis then forwarded onto the native rich text editor instance, as it was
before.
fix: Avoid passing incompatible styles to native components
The
display: block
style attribute is not supported by React Nativeand results in an error.
test: Fix Quote block citation interaction
The citation input is now hidden behind a toggle button.
feat: Toggle Pullquote block citation
Align with the web implementation by hiding the citation input behind a
toggle button.
Testing Instructions
block.
The above steps can be repeated (sans step 3) for a Pullquote block as well.
Lastly, regression testing of the post title field and Button block are helpful as the refactor modified those modules.
Testing Instructions for Keyboard
Perform the aforementioned testing instructions while navigating with a screen reader.
Screenshots or screencast
Screen recording
quote-citation.mp4