feat: Add support for Synced Patterns

[omrjadhav]

Add Support for Overloading Synced Patterns

What

This PR adds support for overloading synced patterns with custom React components. It implements the CoreSyncedPattern component and related infrastructure to properly handle synced patterns in the WordPress block editor.

Why

Currently, WPGraphQL Content Blocks flattens Pattern blocks (wpengine/wp-graphql-content-blocks#345), which prevents developers from properly overloading synced patterns with custom React components. This PR fixes this issue by implementing proper support for synced patterns.

How

• Added new CoreSyncedPattern component for rendering synced patterns
• Updated block type definitions to support synced patterns
• Added comprehensive unit tests for the component
• Updated documentation with examples and best practices
• Fixed issue with pattern flattening in WPGraphQL Content Blocks

Testing Instructions

1. Run the local development server
2. Create a synced pattern in WordPress
3. Use the pattern in a post/page
4. Verify that the pattern renders correctly
5. Test overriding the pattern with a custom component using the blockDefinitions API

Screenshots

Not applicable – changes are primarily in the component implementation and documentation.

Additional Info

This PR addresses the pattern flattening issue described in wpengine/wp-graphql-content-blocks#345 and implements the solution proposed in wpengine/wp-graphql-content-blocks#347.

Checklist

• I have read the Contribution Guidelines
• My code is tested to the best of my abilities
• My code passes all lints (ESLint, tsc, prettier etc.)
• My code has detailed inline documentation
• I have added unit tests to verify the code works as intended
• I have updated the project documentation as needed
• I have added a changeset for this PR using npm run changeset

Related Issue(s)

Fixes #96

[changeset-bot]

🦋 Changeset detected

Latest commit: da6501e

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages

Name	Type
@snapwp/blocks	Patch
@snapwp/types	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[justlevine]

Hey @omrjadhav - Thanks so much for taking the time to create this PR 🙇

Just one quick question:

• The PR contents look like they address Add Support for Overloading Synced Patterms #96 like you note in the PR description but the rest of the description and the PR title are all about about exposing an aria-label to the CoreButton component, which I don't see referenced in code.

Please confirm this solely about adding support for Synced Patterns, and doesn't affect CoreButton and I'm not missing anything 😅

[omrjadhav]

Hi @justlevine 👋

Thank you for reviewing the PR!

Yes, you're absolutely correct — this PR solely addresses the addition of support for Synced Patterns as outlined in Issue #96. The references to aria-label and CoreButton in the title/description were left over from an earlier draft and are not relevant to this PR. Apologies for the confusion!

I'll update the PR title and description right away to reflect the accurate scope. Appreciate your attention to detail 😅🙏

[Copilot]

Pull Request Overview

This PR adds support for overloading synced patterns in the WordPress block editor by implementing the new CoreSyncedPattern component and updating related definitions, tests, and documentation.

• Introduces a new CoreSyncedPattern type and component.
• Updates tests to validate proper handling of class names, style attributes, and graceful rendering with missing props.
• Updates documentation and block registration to include synced patterns.

Reviewed Changes

Copilot reviewed 8 out of 8 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
packages/types/src/blocks/props/index.ts	Added export for synced pattern props.
packages/types/src/blocks/props/core-synced-pattern.ts	Introduced type definitions for CoreSyncedPattern.
packages/blocks/src/blocks/tests/core-synced-pattern.test.tsx	Added tests covering rendering, class names, and style processing.
packages/blocks/src/blocks/index.ts	Updated block definitions to include CoreSyncedPattern.
packages/blocks/src/blocks/core-synced-pattern.tsx	Implemented the CoreSyncedPattern component.
packages/blocks/README.md	Documented the new core-synced-pattern.
docs/overloading-wp-behavior.md	Updated documentation with guidelines for overloading synced patterns.
.changeset/silver-bikes-live.md	Created changeset for the PR.

[Copilot]

The 'style' attribute is defined as a string in the type definitions but later processed via getStylesFromAttributes. Consider clarifying the expected format and ensuring consistency with usage examples and documentation.

Suggested change

	const styleObject = getStylesFromAttributes( { style } );
	// Ensure the style attribute is a valid CSS string or object
	const validatedStyle = typeof style === 'string' ? style : '';
	const styleObject = getStylesFromAttributes( { style: validatedStyle } );