-
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
[RNMobile][Embed block] Disable paragraph transform #33745
Conversation
Size Change: 0 B Total Size: 1.08 MB ℹ️ View Unchanged
|
Pinging @illusaen, since you had worked on transforms on mobile before, do you think it would be fine in this case to disable the paragraph transform until we implement it properly for the embed block? |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM 🎊 !
I noticed that the transformation to a paragraph block is being done due to the following from
transform:
gutenberg/packages/block-library/src/embed/transforms.js
Lines 17 to 30 in a3720f1
from: [ | |
{ | |
type: 'raw', | |
isMatch: ( node ) => | |
node.nodeName === 'P' && | |
/^\s*(https?:\/\/\S+)\s*$/i.test( node.textContent ) && | |
node.textContent?.match( /https/gi )?.length === 1, | |
transform: ( node ) => { | |
return createBlock( EMBED_BLOCK, { | |
url: node.textContent.trim(), | |
} ); | |
}, | |
}, | |
], |
So another approach could be to only disable that transform, although I verified that the other transform on that file is not being used on mobile because for this block we only allow transformations to media blocks, so it looks safe disabling altogether:
gutenberg/packages/block-library/src/embed/transforms.js
Lines 31 to 47 in a3720f1
to: [ | |
{ | |
type: 'block', | |
blocks: [ 'core/paragraph' ], | |
isMatch: ( { url } ) => !! url, | |
transform: ( { url, caption } ) => { | |
let value = `<a href="${ url }">${ url }</a>`; | |
if ( caption?.trim() ) { | |
value += `<br />${ caption }`; | |
} | |
return createBlock( 'core/paragraph', { | |
content: value, | |
} ); | |
}, | |
}, | |
], | |
}; |
supportedMobileTransforms: transformationCategories.media, |
media: [ | |
'core/image', | |
'core/video', | |
'core/gallery', | |
'core/cover', | |
'core/file', | |
'core/audio', | |
'core/media-text', | |
'core/embed', | |
], |
LGTM although you could just remove paragraph from the supported list as well. |
* Release script: Update react-native-editor version to 1.58.0 * Release script: Update with changes from 'npm run core preios' * Add 1.58 section to changelog * Release script: Update react-native-editor version to 1.58.1 * Release script: Update with changes from 'npm run core preios' * [Mobile] - Global styles: Check for undefined values and merge user colors (#33707) * Fix: Mobile - Check for undefined variables and merge user colors before parsing * Check for null values * Update react-native-editor changelog * [RNMobile][Embed block] Disable paragraph transform (#33745) * Update react-native-editor changelog Co-authored-by: Siobhan <[email protected]> Co-authored-by: Gerardo Pacheco <[email protected]> Co-authored-by: Ceyhun Ozugur <[email protected]>
* Release script: Update react-native-editor version to 1.58.0 * Release script: Update with changes from 'npm run core preios' * Add 1.58 section to changelog * Release script: Update react-native-editor version to 1.58.1 * Release script: Update with changes from 'npm run core preios' * [Mobile] - Global styles: Check for undefined values and merge user colors (#33707) * Fix: Mobile - Check for undefined variables and merge user colors before parsing * Check for null values * Update react-native-editor changelog * [RNMobile][Embed block] Disable paragraph transform (#33745) * Update react-native-editor changelog * Release script: Update react-native-editor version to 1.58.2 * Release script: Update with changes from 'npm run core preios' * [RNMobile] Fix BottomSheet.SubSheet/TextInput Conflict (#33845) * Remove 'BottomSheetScreen' component The 'BottomSheetScreen' component was introduced in the following commit in order to correct a render error related to the 'setIsFullScreen' method: d650b4f#diff-d16d37d09ff59dce57c087e978ac5536503cb1642ec2b0ecdba9536f5c695b95R20 The way the component's currently rendering is causing a conflict with the TextInput component, however. With this commit, the component's removed, along with the 'setIsFullScreen' method (the method will be re-introduced in the following commits). * Refactor 'setIsFullScreen' method With this commit, the 'setIsFullScreen' method is added back to the component. This time, it's added to its own separate 'useEffect' function. * Remove 'BottomSheetConsumer' 'BottomSheetConsumer' is no longer necessary as we're now using 'useContext' to pull in 'setIsFullScreen'. Further discussion here: #33845 (comment) * Refactor reference to 'children' As 'BottomSheetConsumer' was removed in 5232398, 'children' no longer needs to be returned as part of a function. In fact, this results in an error. With this commit, the function surrounding the reference to 'children' is removed. * Update CHANGELOG * Fix merge issues with CHANGELOG Co-authored-by: Carlos Garcia <[email protected]> Co-authored-by: Gerardo Pacheco <[email protected]> Co-authored-by: Ceyhun Ozugur <[email protected]>
* Release script: Update react-native-editor version to 1.58.0 * Release script: Update with changes from 'npm run core preios' * Add 1.58 section to changelog * Release script: Update react-native-editor version to 1.58.1 * Release script: Update with changes from 'npm run core preios' * [Mobile] - Global styles: Check for undefined values and merge user colors (#33707) * Fix: Mobile - Check for undefined variables and merge user colors before parsing * Check for null values * Update react-native-editor changelog * [RNMobile][Embed block] Disable paragraph transform (#33745) * Update react-native-editor changelog * Release script: Update react-native-editor version to 1.58.2 * Release script: Update with changes from 'npm run core preios' * [RNMobile] Fix BottomSheet.SubSheet/TextInput Conflict (#33845) * Remove 'BottomSheetScreen' component The 'BottomSheetScreen' component was introduced in the following commit in order to correct a render error related to the 'setIsFullScreen' method: d650b4f#diff-d16d37d09ff59dce57c087e978ac5536503cb1642ec2b0ecdba9536f5c695b95R20 The way the component's currently rendering is causing a conflict with the TextInput component, however. With this commit, the component's removed, along with the 'setIsFullScreen' method (the method will be re-introduced in the following commits). * Refactor 'setIsFullScreen' method With this commit, the 'setIsFullScreen' method is added back to the component. This time, it's added to its own separate 'useEffect' function. * Remove 'BottomSheetConsumer' 'BottomSheetConsumer' is no longer necessary as we're now using 'useContext' to pull in 'setIsFullScreen'. Further discussion here: #33845 (comment) * Refactor reference to 'children' As 'BottomSheetConsumer' was removed in 5232398, 'children' no longer needs to be returned as part of a function. In fact, this results in an error. With this commit, the function surrounding the reference to 'children' is removed. * Update CHANGELOG * Release script: Update react-native-editor version to 1.58.3 * Release script: Update with changes from 'npm run core preios' * Rich text - toTree - Add optional chaining in replacements before accessing its type (#34020) * Update CHANGELOG * Remove CHANGELOG duplicated sections after merge Co-authored-by: Siobhan <[email protected]> Co-authored-by: Carlos Garcia <[email protected]> Co-authored-by: Ceyhun Ozugur <[email protected]> Co-authored-by: Siobhan Bamber <[email protected]>
Description
Disabling paragraph transform for embed block on mobile/native as a workaround to fix wordpress-mobile/gutenberg-mobile#3762
How has this been tested?
See: wordpress-mobile/gutenberg-mobile#3762
Screenshots
N/A
Types of changes
Bug fix (non-breaking change which fixes an issue)
Checklist:
*.native.js
files for terms that need renaming or removal).