From f6c6b0c8a6b53d92f355e0ab4f56b731c9905694 Mon Sep 17 00:00:00 2001
From: Mattias <traed@users.noreply.github.com>
Date: Wed, 7 Feb 2024 16:08:07 +0100
Subject: [PATCH] fix: (#1729) Make attributes field optional (#1730)

* fix: (#1729) Make attributes field optional

* Update .changeset/spicy-doors-lie.md

---------

Co-authored-by: Blake Wilson <blake.wilson@wpengine.com>
Co-authored-by: Blake Wilson <blake@blake.id>
---
 .changeset/spicy-doors-lie.md                | 5 +++++
 packages/blocks/src/blocks/CoreButton.tsx    | 4 ++--
 packages/blocks/src/blocks/CoreButtons.tsx   | 2 +-
 packages/blocks/src/blocks/CoreCode.tsx      | 2 +-
 packages/blocks/src/blocks/CoreColumn.tsx    | 2 +-
 packages/blocks/src/blocks/CoreColumns.tsx   | 2 +-
 packages/blocks/src/blocks/CoreHeading.tsx   | 2 +-
 packages/blocks/src/blocks/CoreImage.tsx     | 6 +++---
 packages/blocks/src/blocks/CoreList.tsx      | 2 +-
 packages/blocks/src/blocks/CoreParagraph.tsx | 2 +-
 packages/blocks/src/blocks/CoreQuote.tsx     | 8 ++++----
 packages/blocks/src/blocks/CoreSeparator.tsx | 2 +-
 12 files changed, 22 insertions(+), 17 deletions(-)
 create mode 100644 .changeset/spicy-doors-lie.md

diff --git a/.changeset/spicy-doors-lie.md b/.changeset/spicy-doors-lie.md
new file mode 100644
index 000000000..5dea8d8fc
--- /dev/null
+++ 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
index 29fb16d71..02a8a32f7 100644
--- 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
index 827114f1e..7f41dff9c 100644
--- 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
index 0e3062f47..60e4ba422 100644
--- 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
index dc5fc8ac7..7362bde3f 100644
--- 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
index 2b18d84de..69b7e244c 100644
--- 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
index 0348d9888..0f8dc355e 100644
--- 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
index 6fdcabd0e..691adf857 100644
--- 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
index d2041807d..ea8176c8f 100644
--- 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
index edf405348..e6c5bda69 100644
--- 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
index 474fa2acb..f74860aa9 100644
--- 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
index fbf32e309..f6af11e68 100644
--- 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;