Markdown block: Add Align and Spacing features

[ivan-ottinger]

Changes proposed in this Pull Request:

The proposed change adds Align (Wide & Full Width) and Dimensions (Padding) features to the Markdown block.

Before	After

Jetpack product discussion

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

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

No, it does not.

Testing instructions:

1. Create a new post or a page with the Markdown block
2. There should be a new set of features: Align (in the block toolbar) and Dimensions / Padding (in the block sidebar).
3. Experiment with the new features and observe whether the change applies correctly in the back-end
4. Save the changes and review if the settings are correctly rendering in the front-end as well
5. We can test the change with multiple themes (block-based, classic). Not all themes support all features. If a theme doesn't support a specific feature, this feature won't be displayed in the block sidebar.

For example, themes like Storefront and Dara doesn't support block Dimensions / Padding and therefore it won't display in the block sidebar. Theme like Hever, Maywood or Geologist support both Align and Dimensions / Padding.

Example markdown text you can use in your tests:

# Heading 1
## Heading 2
### Heading 3

Text text text

- bullet point 1
- bullet point 2
- bullet point 3

1. ordered 1
2. ordered 2
3. ordered 3

**bold** *italic*

> blockquote

Horizontal line:

---

This should be a link: [I am a link](https://wordpress.com "I am a link").

Image:

![image](https://via.placeholder.com/150/0000FF/808080?Text=Test)

[matticbot]

Caution: This PR has changes that must be merged to WordPress.com
Hello ivan-ottinger! These changes need to be synced to WordPress.com - If you 're an a11n, please commandeer and confirm D73475-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.

[jeherve]

Should we check that getSpacingClassesAndStyles exists before we use it, given that it's still marked as experimental?

[ivan-ottinger]

Should we check that getSpacingClassesAndStyles exists before we use it, given that it's still marked as experimental?

Thank you for the feedback, Jeremy! That's a good point.

I have added check in the new commit: e367e3d:

const getStyles = ( attributes = {} ) => {
	const spacingProps = getSpacingClassesAndStyles?.( attributes );
	return spacingProps?.style ? spacingProps.style : {};
};

In case the getSpacingClassesAndStyles() doesn't exist, spacingProps will be undefined and getStyles() will return an empty object. Padding won't be applied and the app won't crash. This is what the user would see:

When they click the "Attempt Block Recovery" button, padding will be removed from the content, but everything else will work correctly.

The proposed code will now also check whether spacingProps.style exists.

---

By the way, I was doing a research on the state of __experimentalGetSpacingClassesAndStyles() before and could find the following thread: WordPress/gutenberg#35920. There are no details shared unfortunately, but the function is being used with core Button block. Also, similar getColorClassesAndStyles() function is used with the Table and Pullquote blocks.

[yansern]

Tested Wide & Full together with/without Padding on Geologist, Quadrat & TT1 Blocks.

On themes like Dara where align is not supported, switching over to Dara would not exhibit the full page stretch effect, and opening the post in the editor, the align option will not show. When switching back to a theme that supports align, the previously used alignment value is restored.

[github-actions]

Great news! One last step: head over to your WordPress.com diff, D73475-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]

Since this change affects custom Gutenberg block, I am adding it to the list of diffs to commit on the Jetpack release day.

[ivan-ottinger]

Changeset: r239310-wpcom.