Feature to add anchor attribute to core/paragraph block (#2015)

* [feat] Add anchor attribute to core/paragraph block

* Added test for Core/Paragraph block

* chore: changeset message update, package version boost v6.0.0

.changeset/popular-glasses-occur.md

@@ -0,0 +1,11 @@
+---
+'@faustwp/blocks': major
+---
+
+Update of the CoreParagraph block to support the native WP anchor attribute. GitHub issue: "[[feat] Add anchor attribute to core/paragraph block](https://github.com/wpengine/faustjs/issues/1954)"
+
+Introduces new field to `core/paragraph` block: `anchor`. This field allows users to add an anchor to the paragraph block. The anchor is used to create a link to a specific part of the page. The anchor is added to the block's wrapper element as an ID attribute.
+
+**Files changed:**
+  - packages/blocks/src/blocks/CoreParagraph.tsx (added anchor attribute)
+  - packages/blocks/package.json (updated package version to 6.0.0)

packages/blocks/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faustwp/blocks",
-  "version": "5.0.0",
+  "version": "6.0.0",
   "description": "Faust Blocks",
   "main": "dist/cjs/index.js",
   "module": "dist/mjs/index.js",

packages/blocks/src/blocks/CoreParagraph.tsx

@@ -19,6 +19,7 @@ export type CoreParagraphFragmentProps = ContentBlock & {
     dropCap?: string;
     gradient?: string;
     align?: string;
+    anchor?: string;
   };
 };
 
@@ -30,6 +31,7 @@ export function CoreParagraph(props: CoreParagraphFragmentProps) {
     <p
       style={style}
       className={attributes?.cssClassName}
+      id={attributes?.anchor}
       // eslint-disable-next-line react/no-danger
       dangerouslySetInnerHTML={{ __html: attributes?.content ?? '' }}
     />
@@ -52,6 +54,7 @@ CoreParagraph.fragments = {
         dropCap
         gradient
         align
+        anchor
       }
     }
   `,

packages/blocks/tests/blocks/CoreParagraph.test.tsx

@@ -42,4 +42,20 @@ describe('<CoreParagraph />', () => {
       </p>
     `);
   });
+
+  test('applies the HTML anchor attribute properly', () => {
+    renderProvider({
+      attributes: {
+        anchor: 'test-anchor',
+        content: 'Hello World',
+      },
+    });
+    expect(screen.queryByText('Hello World')).toMatchInlineSnapshot(`
+      <p
+        id="test-anchor"
+      >
+        Hello World
+      </p>
+    `);
+  });
 });