Reset margin and padding values for gallery

[jorgefilipecosta]

This PR resets margins and paddings for the gallery so the values themes set as margin and/or padding for normal lists (ul) do not interfere with the margins set in the gallery.

Fixes: #5890

The design changes depend on the theme but they should not be easy to notice and when noticed is to solve a problem where gallery used list margin of the theme.

How Has This Been Tested?

Use a theme like Twenty Fourteen that sets margin for ul's, verify the margin set by the theme is not used and the margin set in Gutenberg is used.

[jasmussen]

If this fixes a theme issue, then it's important that we get this in. The most important aspect also seems to still be intact — the left and right margin matches that of text:

As such, this is cool.

Probably difficult, but it would nice to see a full-wide gallery be completely edge to edge. Right now you can get this:

☝️ that's a glimpse of a fullwide gallery with 2 images, a paragraph, and a fullwide image. You can see the margins on the gallery aren't idea. But I don't think that's a regression in this branch, just something that would be worth looking at if we had all the time in the world. Which we don't :D

[jorgefilipecosta]

Hi @jasmussen it seems like there was a rule to create the full wide effect but I think that the rule had bug .wp-block-gallery:not( .components-placeholder ):not( .alignfull )I think the "not" should not be there, I added a correction and not we should have the fullwide effect.

[jasmussen]

Not sure the latest pushes are working, or perhaps when I tested before I was looking at the wrong branch. But I'm seeing some regressions.

Note how the left and right margins don't match the text anymore.

Also looks like the 5px margin is overridden:

This seems to affect the placeholder also:

It's easier to see if when each of those are selected:

[jorgefilipecosta]

Hi @jasmussen, thank you for the catches, this has lots of cases. I followed your tip of using image placeholder as a reference and now the gallery looks aligned with it in all the cases.

[jasmussen]

Wow, yep, everything seems right now. Impressive! 👍 👍

[youknowriad]

Seems the class is duplicated here?

[jorgefilipecosta]

Hi @youknowriad, the class was duplicate to increase the specify against the styles set for the front end. I added a comment to make clear that this was intentional.

[youknowriad]

In other blocks we use .gutenberg .wp-block-myblock, Can we adopt the same pattern? No strong opinion about which pattern to use but just trying to be consistent.

[youknowriad]

Minor comment about the way we add this specificity, otherwise look good to me

#5979 (comment)

[jorgefilipecosta]

Thank you for the tip @youknowriad, I was not aware of the pattern being used an I updated the code to follow the used pattern in other places.