Skip to content
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

Element: Apply wrapper div for RawHTML with non-children props #6044

Merged
merged 3 commits into from
Apr 12, 2018

Conversation

aduth
Copy link
Member

@aduth aduth commented Apr 6, 2018

Fixes #6042

This pull request seeks to reintroduce the behavior of applying a wrapper div to RawHTML elements rendered with non-children props. This is particularly important for block serialization where the block's implementation returns only a RawHTML element, as there may be props (className) to apply to the block. This behavior had existed prior to #5897, but in moving the handling of RawHTML to native serializer support, was missed. This logic has now been moved from the component to the serializer.

Testing instructions:

Ensure unit tests pass:

npm run test-unit

Verify that when adding a columns block containing only shortcodes, the saved value includes a div wrapper for each column reflecting the column layout of the shortcode blocks.

@aduth aduth added [Type] Bug An existing feature does not function as intended Framework Issues related to broader framework topics, especially as it relates to javascript labels Apr 6, 2018
@aduth aduth force-pushed the fix/6042-raw-html-wrapper branch from 9ae95fe to 1ba86f3 Compare April 6, 2018 20:30
@jorgefilipecosta
Copy link
Member

jorgefilipecosta commented Apr 10, 2018

The code looks great and I also verified in the button block that if I change save to:

<div>
      <RawHTML className="addDiv">
          { '<div>aaaa</div>' }
       </RawHTML>
</div>

In master the class was ignored and the output was:

<div class="wp-block-button">
    <div>aaaa</div>
</div>

In this branch the output is correct:

<div class="wp-block-button">
    <div class="addDiv">
        <div>aaaa</div>
    </div>
</div>

But I think we have a bug in the logic applied in the shortcodes case. If we add a shortcode without any content/input change to the second column, and we change to code view the output is:

    <!-- wp:shortcode {"layout":"column-2"} -->
    <div class="layout-column-2">undefined</div>
    <!-- /wp:shortcode --> 

@aduth
Copy link
Member Author

aduth commented Apr 11, 2018

@jorgefilipecosta Nice catch. This was noted by @bobbingwide as well, when there is no children passed to RawHTML. I wasn't sure whether to apply the fix here or in some serialization updates I had planned otherwise. I think I'll include a test case and fix here.

@aduth
Copy link
Member Author

aduth commented Apr 11, 2018

Updated in 9285350 and 2d603c9. Consolidated logic into renderNativeComponent, treating RawHTML as something of a "fragment" when it is not meant to have a wrapper.

@aduth aduth added this to the 2.7 milestone Apr 11, 2018
@aduth aduth merged commit 4b221c2 into master Apr 12, 2018
@aduth aduth deleted the fix/6042-raw-html-wrapper branch April 12, 2018 18:54
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Framework Issues related to broader framework topics, especially as it relates to javascript [Type] Bug An existing feature does not function as intended
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants