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 new file mode 100644 index 0000000000000..b0303885997a6 --- /dev/null +++ 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 index 675c9bb5b3daf..8703128141fac 100644 --- 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 index ae87568a903f2..df6de2f8dcad4 100644 --- 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 = '' } ) => ( - +const getStyles = ( attributes = {} ) => { + const spacingProps = getSpacingClassesAndStyles?.( attributes ); + return spacingProps?.style ? spacingProps.style : {}; +}; + +export default ( { className, source = '', attributes } ) => ( + { source.length ? markdownConverter.render( source ) : '' } ); diff --git a/projects/plugins/jetpack/extensions/blocks/markdown/save.js b/projects/plugins/jetpack/extensions/blocks/markdown/save.js index 06d08138f7604..aef55178ae0f9 100644 --- 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 } ) => ( - + ); diff --git a/projects/plugins/jetpack/extensions/blocks/markdown/test/__snapshots__/markdown-renderer.js.snap b/projects/plugins/jetpack/extensions/blocks/markdown/test/__snapshots__/markdown-renderer.js.snap index ebc9bfc21b6e4..90c44deef27c0 100644 --- a/projects/plugins/jetpack/extensions/blocks/markdown/test/__snapshots__/markdown-renderer.js.snap +++ b/projects/plugins/jetpack/extensions/blocks/markdown/test/__snapshots__/markdown-renderer.js.snap @@ -4,6 +4,7 @@ exports[`MarkdownRenderer renders markdown to HTML as expected 1`] = ` <h1>Heading</h1> <h2>2nd Heading</h2>