Business Hours: Add color, typography, spacing & alignment design tools.

[yansern]

Changes proposed in this Pull Request:

Add design tools for Business Hours block.

Jetpack product discussion

This PR is a part of the Expanding Jetpack Block design tooling for Full Site Editing project: pdDOJh-1P-p2 & pdDOJh-6-p2

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

No, it does not.

Testing instructions:

1. Add "Business Hours" block on the editor.
2. On the Block Inspector sidebar, you should see:
   • Color (Text, Background with Gradient option in the color picker)
   • Typography (Size & Line Height option)
   • Dimensions (Padding & Margin option)
3. On the Block Toolbar, you should see:
   • Align (Full & Wide align option)
4. Setting any of the options above should render on the editor and when previewed/published.

Note: Different themes support different style attributes. Some theme suggestions to test on: Quadrat, Geologist, TT1 (Blocks), Seedlet (Blocks).

[matticbot]

Caution: This PR has changes that must be merged to WordPress.com
Hello yansern! These changes need to be synced to WordPress.com - If you 're an a11n, please commandeer and confirm D73437-code works as expected before merging this PR. Once this PR is merged, please commit the changes to WP.com. Thank you!
This revision will be updated with each commit to this PR

[github-actions]

Thank you for your PR!

When contributing to Jetpack, we have a few suggestions that can help us test and review your patch:

• ✅ Include a description of your PR changes.
  
• ⚠️ All commits were linted before commit.
  
• ✅ Add a "[Status]" label (In Progress, Needs Team Review, ...).
  
• ✅ Add testing instructions.
  
• ✅ Specify whether this PR includes any changes to data or privacy.
  
• ✅ Add changelog entries to affected projects
  

This comment will be updated as you work on your PR and make changes. If you think that some of those checks are not needed for your PR, please explain why you think so. Thanks for cooperation 🤖

---

The e2e test report can be found here. Please note that it can take a few minutes after the e2e tests checks are complete for the report to be available.

---

Once your PR is ready for review, check one last time that all required checks (other than "Required review") appearing at the bottom of this PR are passing or skipped.
Then, add the "[Status] Needs Team review" label and ask someone from your team review the code.
Once you’ve done so, switch to the "[Status] Needs Review" label; someone from Jetpack Crew will then review this PR and merge it to be included in the next Jetpack release.

---

Jetpack plugin:

• Next scheduled release: February 1, 2022.
• Scheduled code freeze: January 24, 2022.

[ivan-ottinger]

I think you are still planning to make changes, but I went ahead and reviewed and tested the current code.

---

The proposed changes work as expected:

Also, the styles are being added on the front-end as expected:

<dl class="jetpack-business-hours has-text-color has-luminous-vivid-amber-color has-background wp-block-jetpack-business-hours" style="background-color: #051a8e; padding-top: 30px; padding-right: 30px; padding-bottom: 30px; padding-left: 30px; margin-top: 50px; margin-right: 50px; margin-bottom: 50px; margin-left: 50px;"> [...] </dl>

One thing that is different when we compare the generated inline style with the style that would have been generated by Gutenberg, is that the Gutenberg-generated style would have no spaces in it, e.g.:

style="background-color:#051a8e;padding-top:30px;padding-right:30px;padding-bottom:30px;padding-left:30px;margin-top:50px;margin-right:50px;margin-bottom:50px;margin-left:50px"

But that's just an observation.

---

All the failed tests seem to be related to two things:

• a couple of linting issues (missing spaces and a comma)
• old tests expecting the block to render without the classes jetpack-business-hours wp-block-jetpack-business-hours instead of current jetpack-business-hours

---

What's interesting is that by passing

'spacing' => array(
	'margin' => true,
)

to the Blocks::jetpack_register_block() we can make the margin setting display in the block editor. That's a TIL for me (as adding margin to the support in index.js doesn't provide that result on its own).

[yansern]

I think you are still planning to make changes, but I went ahead and reviewed and tested the current code.

Yes, I think I'm almost ready. I'm going to drop support for align in this PR because that one requires more work (CSS fixes). Either that or keep this PR open the align CSS fixes are in. Align support for wide & full is in. No CSS fixes needed. Leaving out Left/Center/Right. Not needed for now.

old tests expecting the block to render without the classes jetpack-business-hours wp-block-jetpack-business-hours instead of current jetpack-business-hours

Modified to support both classnames.

What's interesting is that by passing

'spacing' => array(
	'margin' => true,
)

to the Blocks::jetpack_register_block() we can make the margin setting display in the block editor. That's a TIL for me (as adding margin to the support in index.js doesn't provide that result on its own).

Thank you for the observation!

[yansern]

This is now ready. :)

[ivan-ottinger]

LGTM. 👍🏼

Tested with the following themes: Geologist, Hever, Twenty Twenty, Dara, Seedlet, Twenty Twenty-One and Twenty Twenty-Two.

Also tested on WPCOM sandbox.

[jeherve]

This tests well for me. 🚢

[github-actions]

Great news! One last step: head over to your WordPress.com diff, D73437-code, and commit it.
Once you've done so, come back to this PR and add a comment with your changeset ID.

Thank you!

[ivan-ottinger]

Successfully deployed to WPCOM. Changeset: r239386-wpcom.