diff --git a/.changeset/popular-glasses-occur.md b/.changeset/popular-glasses-occur.md new file mode 100644 index 000000000..8e51c7b54 --- /dev/null +++ b/.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) diff --git a/packages/blocks/package.json b/packages/blocks/package.json index 63ef27750..69db32765 100644 --- a/packages/blocks/package.json +++ b/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", diff --git a/packages/blocks/src/blocks/CoreParagraph.tsx b/packages/blocks/src/blocks/CoreParagraph.tsx index e6c5bda69..88fe6e3ec 100644 --- a/packages/blocks/src/blocks/CoreParagraph.tsx +++ b/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) {

@@ -52,6 +54,7 @@ CoreParagraph.fragments = { dropCap gradient align + anchor } } `, diff --git a/packages/blocks/tests/blocks/CoreParagraph.test.tsx b/packages/blocks/tests/blocks/CoreParagraph.test.tsx index f99b78452..c3db3dbfc 100644 --- a/packages/blocks/tests/blocks/CoreParagraph.test.tsx +++ b/packages/blocks/tests/blocks/CoreParagraph.test.tsx @@ -42,4 +42,20 @@ describe('', () => {

`); }); + + test('applies the HTML anchor attribute properly', () => { + renderProvider({ + attributes: { + anchor: 'test-anchor', + content: 'Hello World', + }, + }); + expect(screen.queryByText('Hello World')).toMatchInlineSnapshot(` +

+ Hello World +

+ `); + }); });