added block rendering

Author: [email protected]

src/components/style-guide/index.js

@@ -7,15 +7,18 @@ import { i18n } from 'stackable'
  * Internal dependencies
  */
 import { toPng } from 'html-to-image'
+import { isDarkColor } from '~stackable/util'
 
 /**
  * WordPress dependencies
  */
 import { sprintf, __ } from '@wordpress/i18n'
-import { useRef, useState } from '@wordpress/element'
+import {
+	RawHTML, useRef, useState,
+} from '@wordpress/element'
 import { Icon, download as downloadIcon } from '@wordpress/icons'
 import { Button } from '@wordpress/components'
-import { isDarkColor } from '~stackable/util'
+import { createBlock, serialize } from '@wordpress/blocks'
 
 export { default as StyleGuidePopover } from './popover'
 
@@ -75,17 +78,43 @@ const StyleGuide = () => {
 					<div className="ugb-style-guide__columns">
 						<div className="ugb-style-guide__column">
 							<h2 className="ugb-style-guide__section-subheading">{ __( 'Titles & Headings', i18n ) }</h2>
-							<h1>{ __( 'Heading 1', i18n ) }</h1>
-							<h2>{ __( 'Heading 2', i18n ) }</h2>
-							<h3>{ __( 'Heading 3', i18n ) }</h3>
-							<h4>{ __( 'Heading 4', i18n ) }</h4>
-							<h5>{ __( 'Heading 5', i18n ) }</h5>
-							<h6>{ __( 'Heading 6', i18n ) }</h6>
-							<p>{ __( 'Paragraph', i18n ) }</p>
+							<RenderBlock blockName="stackable/heading" attributes={ {
+								uniqueId: '174a096',
+								textTag: 'h1',
+								text: __( 'Heading 1', i18n ),
+							} } />
+							<RenderBlock blockName="stackable/heading" attributes={ {
+								uniqueId: '174a092',
+								textTag: 'h2',
+								text: __( 'Heading 2', i18n ),
+							} } />
+							<RenderBlock blockName="stackable/heading" attributes={ {
+								uniqueId: '174a093',
+								textTag: 'h3',
+								text: __( 'Heading 3', i18n ),
+							} } />
+							<RenderBlock blockName="stackable/heading" attributes={ {
+								uniqueId: '174a094',
+								textTag: 'h4',
+								text: __( 'Heading 4', i18n ),
+							} } />
+							<RenderBlock blockName="stackable/heading" attributes={ {
+								uniqueId: '174a095',
+								textTag: 'h5',
+								text: __( 'Heading 5', i18n ),
+							} } />
+							<RenderBlock blockName="stackable/heading" attributes={ {
+								uniqueId: '174a096',
+								textTag: 'h6',
+								text: __( 'Heading 6', i18n ),
+							} } />
 						</div>
 						<div className="ugb-style-guide__column">
 							<h2 className="ugb-style-guide__section-subheading">{ __( 'Body Text', i18n ) }</h2>
-							<p>Morning sunlight filters through city windows as familiar voices fill the room. The table is scattered with mugs and yesterday\’s news, while someone debates the best way to arrange the cushions. Laughter drifts from the kitchen, and plans for the day are made between sips of coffee and playful banter.</p>
+							<RenderBlock blockName="stackable/text" attributes={ {
+								uniqueId: '174a097',
+								text: __( 'Morning sunlight filters through city windows as familiar voices fill the room. The table is scattered with mugs and yesterday\'s news, while someone debates the best way to arrange the cushions. Laughter drifts from the kitchen, and plans for the day are made between sips of coffee and playful banter.', i18n ),
+							} } />
 						</div>
 					</div>
 				</div>
@@ -129,3 +158,19 @@ const ExportButton = props => {
 		</Button>
 	)
 }
+
+const RenderBlock = props => {
+	const {
+		blockName, attributes, innerBlocks,
+	} = props
+
+	return (
+		<RawHTML>
+			{ serialize( createBlock(
+				blockName,
+				attributes,
+				innerBlocks
+			) ) }
+		</RawHTML>
+	)
+}