Use a light block DOM for the Media & Text block

[oxyc]

Description

This PR ultimately makes the Media & Text editor markup match that of the frontend by:

• Refactoring the Media & Text edit method to be a functional component
• Use light block DOM (needs update if Light block: introduce useBlockWrapperProps #23034 lands)
• Bump re-resizable for Support the "as" prop to change the wrapper bokuweb/re-resizable#614 to support using <figure> as the resizable wrapper.
  • I'm not sure I did this correctly? Looking at package-lock.json the dependency got moved around could someone verify if it's correct or not? FWIW I used lerna boostrap

How 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:

• My code is tested.
• My code follows the WordPress code style.
• My code follows the accessibility standards.
• My code has proper inline documentation.
• I've included developer documentation if appropriate.
• I've updated all React Native files affected by any refactorings/renamings in this PR.

[oxyc]

Let me know if i should split this into multiple PRs instead.

[ellatrix]

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?

[oxyc]

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?

Sure #23102. I'll update this PR once that one is merged.

[oxyc]

Rebased it on top of #23102 (will keep it updated as that pr gets fixed). Commits on top:

• a2b7150
• a8891b4

[oxyc]

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 lerna boostrap

DOM on editor side after commit:

<div aria-label="Block: Media &amp; 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 &amp; 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(&quot;http://shs.test/app/uploads/2020/06/copy-of-hankenvappen-200x2x-1024x446.png&quot;); 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>

[oxyc]

Seems like some bugs are fixed in the process as well.

Expected (frontend):

Before (editor):

After (editor):

[oxyc]

Note if testing twentynineteen. The custom colors aren't shown because of #21931

[youknowriad]

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.

[ZebulanStanphill]

I tried out the branch and everything seems to be working great!

[ZebulanStanphill]

(Try rebasing the branch to get tests to pass. There have been some issues with end-to-end tests lately.)