feat(author-profile-social): add support for colors, block spacing, brand style

[thomasguillot]

All Submissions:

• Have you followed the Newspack Contributing guideline?
• Does your code follow the WordPress' coding standards and VIP Go coding standards?
• Have you checked to ensure there aren't other open Pull Requests for the same update/change?

Changes proposed in this Pull Request:

This PR adds a bunch of enhancements to the block:

• New style: "Brand" that inherits the brand's colours
• If default style selected: User can control Icon and icon background colours (I used Core's Color panel instead of custom one because of ordering. I renamed "Text" and "Background" to "Icon color" and "Icon background" with some JS)
• We now support block spacing
• I removed the padding setting

We are extracting the gaps and colours to apply them to the actual link

video.mp4

How to test the changes in this Pull Request:

1. Add an author profile block
2. Edit the social links
3. Switch to this branch and refresh
4. You should see more settings in the sidebar.
5. Test the colours
6. The spacings (gap and margin)
7. Test brand vs default

Other information:

• Have you added an explanation of what your changes do and why you'd like us to include them?
• Have you written new tests for your changes, as applicable?
• Have you successfully ran tests with your changes locally?

[laurelfulford]

This is looking really cool, @thomasguillot!

I have a couple suggestions and some not-necessary nits. Just let me know if anything doesn't make sense, or doesn't line up with how it seems to work for you!

[laurelfulford]

Looking at Core's Social Links block, it uses the <ul> as the outer wrapper, rather than an extra <div> that the author profile social block uses.

I think we can rejig it a bit so the <ul> is the outermost container, then the block gap stuff should just work without this workaround (cc @rbcorrales in case I am horribly wrong)! This looks like it works, but it'd be nice to take advantage of the baked in way to do it if we can 🙂

[thomasguillot]

One issue with this approach is that it would leave us with two separate versions of the block that use different structures: the legacy version built with <div><ul>, and the InnerBlocks version that uses only <ul>.