Markdown block: Add Align and Spacing features (#22429)

Automattic · Jan 24, 2022 · af70dd2 · af70dd2
1 parent 2693eda
commit af70dd2
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 3 deletions.
diff --git a/projects/plugins/jetpack/changelog/add-markdown-block-align-and-spacing-feature b/projects/plugins/jetpack/changelog/add-markdown-block-align-and-spacing-feature
@@ -0,0 +1,4 @@
+Significance: minor
+Type: enhancement
+
+Markdown block: Add Align and Spacing features
diff --git a/projects/plugins/jetpack/extensions/blocks/markdown/index.js b/projects/plugins/jetpack/extensions/blocks/markdown/index.js
@@ -77,7 +77,11 @@ export const settings = {
 	},
 
 	supports: {
+		align: [ 'wide', 'full' ],
 		html: false,
+		spacing: {
+			padding: true,
+		},
 	},
 
 	edit,

diff --git a/projects/plugins/jetpack/extensions/blocks/markdown/renderer.js b/projects/plugins/jetpack/extensions/blocks/markdown/renderer.js
@@ -4,6 +4,7 @@
 import { __ } from '@wordpress/i18n';
 import MarkdownIt from 'markdown-it';
 import { RawHTML } from '@wordpress/element';
+import { __experimentalGetSpacingClassesAndStyles as getSpacingClassesAndStyles } from '@wordpress/block-editor';
 
 /**
  * Module variables
@@ -21,8 +22,13 @@ const handleLinkClick = event => {
 	}
 };
 
-export default ( { className, source = '' } ) => (
-	<RawHTML className={ className } onClick={ handleLinkClick }>
+const getStyles = ( attributes = {} ) => {
+	const spacingProps = getSpacingClassesAndStyles?.( attributes );
+	return spacingProps?.style ? spacingProps.style : {};
+};
+
+export default ( { className, source = '', attributes } ) => (
+	<RawHTML className={ className } onClick={ handleLinkClick } style={ getStyles( attributes ) }>
 		{ source.length ? markdownConverter.render( source ) : '' }
 	</RawHTML>
 );
diff --git a/projects/plugins/jetpack/extensions/blocks/markdown/save.js b/projects/plugins/jetpack/extensions/blocks/markdown/save.js
@@ -4,5 +4,9 @@
 import MarkdownRenderer from './renderer';
 
 export default ( { attributes, className } ) => (
-	<MarkdownRenderer className={ className } source={ attributes.source } />
+	<MarkdownRenderer
+		className={ className }
+		source={ attributes.source }
+		attributes={ attributes }
+	/>
 );
diff --git a/...s/plugins/jetpack/extensions/blocks/markdown/test/__snapshots__/markdown-renderer.js.snap b/...s/plugins/jetpack/extensions/blocks/markdown/test/__snapshots__/markdown-renderer.js.snap
@@ -4,6 +4,7 @@ exports[`MarkdownRenderer renders markdown to HTML as expected 1`] = `
 <RawHTML
   className="markdown"
   onClick={[Function]}
+  style={Object {}}
 >
   &lt;h1&gt;Heading&lt;/h1&gt;
 &lt;h2&gt;2nd Heading&lt;/h2&gt;