Button Block: Add parent-child syncing mechanism

[Copons]

Changes proposed in this Pull Request:

• Add a passthroughAttributes attribute to the Button block, to map parent attribute values to child (Button) attributes.

In some cases, we might want the Button block to use a parent attribute.
For example, the parent block might have a link that we want to use for the button as well.

Inner blocks templates don't update after mount, so we need another way to keep them in sync.

The passthroughAttributes is an object that indicates which parent attributes we want to sync to which child attributes.
E.g. { childAttribute: 'parentAttribute' }

The usePassthroughAttributes hook retrieves the parent attributes values and sets them to the Button attributes, effectively keeping them in sync.

See also: #15370 (comment)

Notes

• This is a one-way sync (hence the "passthrough" term), so it's should only be used for Button attributes that aren't supposed to be modified manually.
  For example, the url attribute is fine, but the text (used in the testing instructions below) not really.
• I've created some docs for this block in Button Block: Add documentation #15934. It already includes this change.

Example scenario

The Calendly block as a url attribute that stores a Calendly link, which is then used to either embed a Calendly widget, or as the href of a Button link.

We can create the Button like this:

<InnerBlocks template={ [ [
  'jetpack/button', {
    element: 'a',
    text: 'Submit',
    passthroughAttributes: {
      url: 'url', // buttonBlockUrl: 'calendlyBlockUrl'
    },
  },
] ] } />

Does this pull request change what data or activity we track or use?

No

Testing instructions:

Since this block is not used anywhere yet, an easy test would be to manually update the Revue edit.js to fake a sync between the parent's revueUsername and the Button's text.

<InnerBlocks
	template={ [
		[
			innerButtonBlock.name,
			{
				...innerButtonBlock.attributes,
				passthroughAttributes: {
					text: 'revueUsername',
				},
			},
		],
	] }
	templateLock="all"
/>

• Insert a Revue block, and add a name (a random string will do).
• Make sure the button text is that name.
• Open the Revue block sidebar, and change the name.
• Make sure the button text updates accordingly.

Proposed changelog entry for your changes:

• Button block: Add mechanism to sync attributes with the parent block.

[matticbot]

Caution: This PR has changes that must be merged to WordPress.com
Hello Copons! These changes need to be synced to WordPress.com - If you 're an a11n, please commandeer, review, and approve D43949-code before merging this PR. Thank you!
This revision will be updated with each commit to this PR

[jetpackbot]

Thank you for the great PR description!

When this PR is ready for review, please apply the [Status] Needs Review label. If you are an a11n, please have someone from your team review the code if possible. The Jetpack team will also review this PR and merge it to be included in the next Jetpack release.

E2E results is available here (for debugging purposes): https://jetpack-e2e-dashboard.herokuapp.com/pr-15931

Scheduled Jetpack release: June 2, 2020.
Scheduled code freeze: May 26, 2020

Generated by 🚫 dangerJS against 2ee1b9b

[aaronrobertshaw]

@Copons Works great!

Looking forward to using it.

[Copons]

r208889-wpcom