Use a light block DOM for the Media & Text block #23062
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
oxyc requested review from ajitbohra, chrisvanpatten, Soean, talldan and youknowriad as code owners
ZebulanStanphill added [Block] Media & Text 
Let me know if i should split this into multiple PRs instead. |
Thanks for the PR, @oxyc! Would it be possible to split it? Maybe one PR converting it to hooks and one for the light block wrapper? |
6 tasks
oxyc force-pushed the media-text-lightblock branch from 9f7261c to a8891b4 Compare
oxyc force-pushed the media-text-lightblock branch from a8891b4 to 049caef Compare
Ready for review. I've tested it with twentynineteen, twentytwenty and my own theme and couldn't find any issues at least. Note, since I'm new to lerna, please double check that the package-lock.json was updated correctly with DOM on editor side after commit: <div aria-label="Block: Media & Text" role="group" class="wp-block-media-text custom-class block-editor-block-list__block is-selected has-media-on-the-right is-selected is-stacked-on-mobile is-vertically-aligned-bottom is-image-fill has-primary-background-color has-background" id="block-a290aa4c-0230-4530-b501-997effb88396" data-block="a290aa4c-0230-4530-b501-997effb88396" data-type="core/media-text" data-title="Media & Text" tabindex="0" style="grid-template-columns: 1fr 51%; transform-origin: center center;">
<figure class="components-resizable-box__container has-show-handle wp-block-media-text__media editor-media-container__resizer" axis="x" style="position: relative; user-select: auto; width: 51%; height: auto; max-width: 100%; min-width: 10%; box-sizing: border-box; flex-shrink: 0; background-image: url("http://shs.test/app/uploads/2020/06/copy-of-hankenvappen-200x2x-1024x446.png"); background-position: 78% 73%;">
<img src="/app/uploads/2020/06/copy-of-hankenvappen-200x2x-1024x446.png" alt="test">
<span>
<div class="components-resizable-box__handle components-resizable-box__side-handle components-resizable-box__handle-left" style="position: absolute; user-select: none; cursor: col-resize;"></div>
</span>
</figure>
<div class="block-editor-block-list__layout wp-block-media-text__content">
<h3 aria-label="Write heading…" role="textbox" class="block-editor-block-list__block wp-block rich-text block-editor-rich-text__editable wp-block" aria-multiline="" contenteditable="true" id="block-f99f0733-fd83-4ef4-a63f-52d73fda8f58" data-block="f99f0733-fd83-4ef4-a63f-52d73fda8f58" data-type="core/heading" data-title="Heading" tabindex="0" style="white-space: pre-wrap; transform-origin: center center;"></h3>
<div tabindex="-1" class="block-list-appender"></div>
</div>
<div class="__resizable_base__" style="width: 100%; height: 100%; position: absolute; transform: scale(0, 0); left: 0px; flex: 0 1 0%;"></div>
</div>
|
Seems like some bugs are fixed in the process as well. Expected (frontend):
Before (editor):
After (editor):
|
ZebulanStanphill added the [Type] Bug
Note if testing twentynineteen. The custom colors aren't shown because of #21931 |
There was a problem hiding this comment.
This is a cool PR. Thanks @oxyc
Code changes look good, I'd appreciate another review to ensure there's no regressions. cc @jasmussen @ZebulanStanphill but otherwise, this is cool.
6 tasks
(Try rebasing the branch to get tests to pass. There have been some issues with end-to-end tests lately.) |
Specifically to support "as" from bokuweb/re-resizable#614
oxyc force-pushed the media-text-lightblock branch from 049caef to c52e4af Compare
This was referenced
Jun 24, 2020
Closed
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.
Description
This PR ultimately makes the Media & Text editor markup match that of the frontend by:
<figure>as the resizable wrapper.package-lock.jsonthe dependency got moved around could someone verify if it's correct or not? FWIW I usedlerna boostrapHow has this been tested?
Tested adding video as well as image and toggling all the attributes to see that everything is working.
Types of changes
New feature
Checklist: