fix: (#1729) Make attributes field optional (#1730)

* fix: (#1729) Make attributes field optional * Update .changeset/spicy-doors-lie.md --------- Co-authored-by: Blake Wilson <[email protected]> Co-authored-by: Blake Wilson <[email protected]>
wpengine · Feb 7, 2024 · f6c6b0c · f6c6b0c
1 parent c6dedc0
commit f6c6b0c
Show file tree

Hide file tree

Showing 12 changed files with 22 additions and 17 deletions.
diff --git a/.changeset/spicy-doors-lie.md b/.changeset/spicy-doors-lie.md
@@ -0,0 +1,5 @@
+---
+'@faustwp/blocks': major
+---
+
+**BREAKING**: Make `attributes` field on core blocks optional to comply with the `WordPressBlock` type interface. Thanks @traed!
diff --git a/packages/blocks/src/blocks/CoreButton.tsx b/packages/blocks/src/blocks/CoreButton.tsx
@@ -6,7 +6,7 @@ import { ContentBlock } from '../components/WordPressBlocksViewer.js';
 import { getStyles } from '../utils/index.js';
 
 export type CoreButtonFragmentProps = ContentBlock & {
-  attributes: {
+  attributes?: {
     anchor?: string;
     backgroundColor?: string;
     cssClassName?: string;
@@ -28,7 +28,7 @@ export function CoreButton(props: CoreButtonFragmentProps) {
   const theme = useBlocksTheme();
   const style = getStyles(theme, { ...props });
   const { attributes } = props;
-  const linkTarget = attributes.linkTarget ? '_blank' : undefined;
+  const linkTarget = attributes?.linkTarget ? '_blank' : undefined;
   if (attributes?.url) {
     return (
       <div

diff --git a/packages/blocks/src/blocks/CoreButtons.tsx b/packages/blocks/src/blocks/CoreButtons.tsx
@@ -10,7 +10,7 @@ import {
 } from '../components/WordPressBlocksViewer.js';
 
 export type CoreButtonsFragmentProps = ContentBlock & {
-  attributes: {
+  attributes?: {
     cssClassName?: string;
     align?: string;
     anchor?: string;

diff --git a/packages/blocks/src/blocks/CoreCode.tsx b/packages/blocks/src/blocks/CoreCode.tsx
@@ -5,7 +5,7 @@ import { ContentBlock } from '../components/WordPressBlocksViewer.js';
 import { getStyles } from '../utils/index.js';
 
 export type CoreCodeFragmentProps = ContentBlock & {
-  attributes: {
+  attributes?: {
     anchor?: string;
     backgroundColor?: string;
     borderColor?: string;

diff --git a/packages/blocks/src/blocks/CoreColumn.tsx b/packages/blocks/src/blocks/CoreColumn.tsx
@@ -10,7 +10,7 @@ import {
 } from '../components/WordPressBlocksViewer.js';
 
 export type CoreColumnFragmentProps = ContentBlock & {
-  attributes: {
+  attributes?: {
     cssClassName?: string;
     align?: string;
     anchor?: string;

diff --git a/packages/blocks/src/blocks/CoreColumns.tsx b/packages/blocks/src/blocks/CoreColumns.tsx
@@ -10,7 +10,7 @@ import {
 } from '../components/WordPressBlocksViewer.js';
 
 export type CoreColumnsFragmentProps = ContentBlock & {
-  attributes: {
+  attributes?: {
     cssClassName?: string;
     align?: string;
     anchor?: string;

diff --git a/packages/blocks/src/blocks/CoreHeading.tsx b/packages/blocks/src/blocks/CoreHeading.tsx
@@ -5,7 +5,7 @@ import { ContentBlock } from '../components/WordPressBlocksViewer.js';
 import { getStyles } from '../utils/index.js';
 
 export type CoreHeadingFragmentProps = ContentBlock & {
-  attributes: {
+  attributes?: {
     align?: string;
     anchor?: string;
     backgroundColor?: string;

diff --git a/packages/blocks/src/blocks/CoreImage.tsx b/packages/blocks/src/blocks/CoreImage.tsx
@@ -6,7 +6,7 @@ import { ContentBlock } from '../components/WordPressBlocksViewer.js';
 import { getStyles } from '../utils/index.js';
 
 export type CoreImageFragmentProps = ContentBlock & {
-  attributes: {
+  attributes?: {
     align?: string;
     alt?: string;
     anchor?: string;
@@ -34,7 +34,7 @@ export type CoreImageFragmentProps = ContentBlock & {
 function LinkWrapper(props: PropsWithChildren<CoreImageFragmentProps>) {
   const { attributes, children } = props;
 
-  if (!attributes.href) {
+  if (!attributes?.href) {
     /**
      * Fragment is used to fix the following TS error:
      * 'LinkWrapper' cannot be used as a JSX component.
@@ -66,7 +66,7 @@ function ImgWrapper(props: PropsWithChildren<CoreImageFragmentProps>) {
   const style = getStyles(theme, { ...props });
   const { attributes } = props;
 
-  if (!attributes.src) {
+  if (!attributes?.src) {
     return null;
   }
 

diff --git a/packages/blocks/src/blocks/CoreList.tsx b/packages/blocks/src/blocks/CoreList.tsx
@@ -5,7 +5,7 @@ import { ContentBlock } from '../components/WordPressBlocksViewer.js';
 import { getStyles } from '../utils/index.js';
 
 export type CoreListFragmentProps = ContentBlock & {
-  attributes: {
+  attributes?: {
     anchor?: string;
     backgroundColor?: string;
     className?: string;

diff --git a/packages/blocks/src/blocks/CoreParagraph.tsx b/packages/blocks/src/blocks/CoreParagraph.tsx
@@ -7,7 +7,7 @@ import { useBlocksTheme } from '../components/WordPressBlocksProvider.js';
 import { ContentBlock } from '../components/WordPressBlocksViewer.js';
 
 export type CoreParagraphFragmentProps = ContentBlock & {
-  attributes: {
+  attributes?: {
     cssClassName?: string;
     backgroundColor?: string;
     content?: string;

diff --git a/packages/blocks/src/blocks/CoreQuote.tsx b/packages/blocks/src/blocks/CoreQuote.tsx
@@ -5,7 +5,7 @@ import { ContentBlock } from '../components/WordPressBlocksViewer.js';
 import { getStyles } from '../utils/index.js';
 
 export type CoreQuoteFragmentProps = ContentBlock & {
-  attributes: {
+  attributes?: {
     align?: string;
     anchor?: string;
     backgroundColor?: string;
@@ -27,19 +27,19 @@ export function CoreQuote(props: CoreQuoteFragmentProps) {
   const style = getStyles(theme, { ...props });
   const { attributes } = props;
 
-  if (!attributes.value) {
+  if (!attributes?.value) {
     return null;
   }
 
   let innerHtml = attributes.value;
 
-  if (attributes.citation) {
+  if (attributes?.citation) {
     innerHtml += `<cite>${attributes.citation}</cite>`;
   }
 
   return (
     <blockquote
-      className={attributes.cssClassName}
+      className={attributes?.cssClassName}
       style={style}
       // eslint-disable-next-line react/no-danger
       dangerouslySetInnerHTML={{ __html: innerHtml }}

diff --git a/packages/blocks/src/blocks/CoreSeparator.tsx b/packages/blocks/src/blocks/CoreSeparator.tsx
@@ -5,7 +5,7 @@ import { ContentBlock } from '../components/WordPressBlocksViewer.js';
 import { getStyles } from '../utils/index.js';
 
 export type CoreSeparatorFragmentProps = ContentBlock & {
-  attributes: {
+  attributes?: {
     align?: string;
     anchor?: string;
     backgroundColor?: string;