Improve block centering behavior

lancemk · Mar 1, 2023 · 2a9aad2 · 2a9aad2
1 parent 8300b0a
commit 2a9aad2
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 7 deletions.
diff --git a/packages/site/src/__tests__/__snapshots__/renderBlock.test.ts.snap b/packages/site/src/__tests__/__snapshots__/renderBlock.test.ts.snap
@@ -101,11 +101,11 @@ exports[`hero left aligned default 1`] = `
     className=\\"flex-col bg-transparent p-4 gap-3 items-start justify-center\\"
   >
     <Flex>
-      <Heading flex=\\"1\\" size=\\"xl\\" lineHeight=\\"1.3\\" className=\\"text-center\\">
+      <Heading flex=\\"1\\" size=\\"xl\\" lineHeight=\\"1.3\\" textAlign=\\"left\\">
         {'Create, iterate, inspire.'}
       </Heading>
     </Flex>
-    <Text className=\\"text-center mb-4\\">
+    <Text className=\\"mb-4\\" textAlign=\\"left\\">
       {'Turn great ideas into new possibilities.'}
     </Text>
     <Button size=\\"md\\" backgroundColor=\\"#15803d\\" color=\\"#fff\\" isDisabled={false}>

diff --git a/packages/site/src/ayon/blocks/render.tsx b/packages/site/src/ayon/blocks/render.tsx
@@ -8,6 +8,7 @@ import {
 import { zip } from 'noya-utils';
 import {
   encodeBlockItem,
+  getTextAlign,
   mergeBlockItems,
   parseBlock,
   ParsedBlockItemParameters,
@@ -106,6 +107,7 @@ export function getRenderableBlockProps({ props, block }: BlockRenderOptions) {
   const container = getContainerBlockProps({ props, block });
 
   const { parameters } = parseBlock(container.blockText, 'regular');
+  const hashtags = Object.keys(parameters);
 
   const background = Object.keys(parameters)
     .reverse()
@@ -115,13 +117,13 @@ export function getRenderableBlockProps({ props, block }: BlockRenderOptions) {
     ? /-(500|600|700|800|900)$/.test(background)
     : undefined;
 
+  const textAlign = getTextAlign(hashtags);
+
   const children = getChildrenBlockProps({
     props,
     block,
     extraParameters: {
-      ...(parameters.left && { left: true }),
-      ...(parameters.right && { right: true }),
-      ...(parameters.center && { center: true }),
+      ...(textAlign && { [textAlign]: true }),
       ...((parameters.dark || darkBackground) && {
         'text-white': true,
         light: true,

diff --git a/packages/site/src/ayon/blocks/symbols.ts b/packages/site/src/ayon/blocks/symbols.ts
@@ -123,12 +123,12 @@ export const heroSymbolV2 = SketchModel.symbolMaster({
     SketchModel.symbolInstance({
       do_objectID: 'ef2d5b26-aa1c-40d3-8bab-37c10bccc5cb',
       symbolID: heading2SymbolId,
-      blockText: 'Create, iterate, inspire. #text-center',
+      blockText: 'Create, iterate, inspire.',
     }),
     SketchModel.symbolInstance({
       do_objectID: 'aa722c35-9ba4-4bf3-a5d0-f7d17f02c361',
       symbolID: textSymbolId,
-      blockText: 'Turn great ideas into new possibilities. #text-center #mb-4',
+      blockText: 'Turn great ideas into new possibilities. #mb-4',
     }),
     SketchModel.symbolInstance({
       do_objectID: '6b386c69-d6cf-4c2f-ae06-c92af43268d5',