Boxes around blocks when using group block.

[nickhamze]

Boxes around blocks when using group block.

[Mamaduka]

@nickhamze replace html2canvas with dom-to-image-more. Please test and let me know if you want to keep this library or revert to html2canvas.

P.S. One big pro of the dom-to-image library is its size as well.

[nickhamze]

We still have the boxes but at least I know what is causing them now. It's this line of CSS:

Is there anyway to pass through a border:0px; on this element via dom to image more. I think it says we can do this but I'm not sure.

style
An object whose properties to be copied to node's style before rendering. You might want to check this reference for JavaScript names of CSS properties.

[Mamaduka]

@nickhamze can you share the "Block Shot"?

[nickhamze]

[Mamaduka]

Based on the source code style option if for adding extra styles. I don't think we can use that for our case.

[nickhamze]

Hmm, I hate going back and forth but HTML2canvas provided better screenshots IMO.

I found this line of CSS and I think I found the real culprit with html2canvas

.block-editor-block-list__layout .block-editor-block-list__block.has-child-selected>.block-editor-block-list__block-edit:before {
    border: 1px dashed rgba(123,134,162,.3);
}

It looks like from the documentation that they only support solid border style. That is why the lines are solid but dashed in the other script:
https://html2canvas.hertzen.com/features

It looks like you can have html2canvas add CSS just to their rendered version. Could we do this:
niklasvh/html2canvas#701 (comment)

[Mamaduka]

@nickhamze reverted code to use html2canvas again. Added minor fix, but sometimes I still get a blue border around image block (when grouped).

Unfortunately, border styling is added via pseudo-elements (::before). Since pseudo-elements don't exist in DOM, they cannot be changed via JavaSript. I learned this by trial, error and tons of googling this morning.

[nickhamze]

I think I found a workaround. If you put it into spotlight mode I don't get any borders. However there is an opacity issue, didn't know if that was something we could override.

.block-editor-block-list__layout .block-editor-block-list__block.is-focus-mode:not(.is-multi-selected) { opacity: .5; transition: opacity .1s linear; }

[Mamaduka]

@nickhamze

I get the same result + opacity in the "Spotlight" mode. I can also see block inserters, which are hidden when I click on "Take a BlockShot".

[nickhamze]

ok, let's put this one on hold and come back to it later. This is getting frustrating :) .

[Mamaduka]

@nickhamze I think I fixed this (with a tiny dirty hack). Try again in a non-"Spotlight" mode.

[nickhamze]

Wow, it works. I'll work on the readme but I think it's ready to submit unless you have something else to add. Thanks for not giving up like I did :) .

[Mamaduka]

Nothing that comes to my mind right now. We can come back to this issue once a new version of html2canvas is released.