Add deprecated block version for news-grid to fix missing button/link attributes

[Copilot]

News Grid Block Deprecation Implementation

This addresses the issue where the latest news grid update broke button displays on live sites.

Completed Tasks

• Understand the current news-grid block structure
• Identify the breaking changes (new attributes: useCardButton, cardButtonText, cardButtonColor, cardButtonSize, cardLinkText)
• Create a deprecated block configuration following WordPress deprecation guide
• Implement the deprecated save function matching the old structure
• Add migration logic (migrate function) to convert old blocks to new format
• Register deprecated versions in block index
• Add backward compatibility in frontend.js to handle missing attributes
• Fix blank button text by ensuring cardButton object has required properties with defaults
• Test the changes with a build
• Verify block validation and migration work

Changes Made

1. Created src/news-grid/deprecated.js:

   • Implements deprecated version 1 (pre-November 2025)
   • Matches the old block structure without useCardButton, cardButtonText, cardButtonColor, cardButtonSize, cardLinkText
   • Includes migration function to add new attributes with sensible defaults
   • Migrates old blocks to use buttons (useCardButton: true) with default "Read" text and "gold" color

2. Updated src/news-grid/index.js:

   • Imported and registered the deprecated block versions
   • Follows WordPress block deprecation best practices

3. Updated src/news-grid/frontend.js:

   • Added robust parsing of cardButton data attribute with try-catch
   • Ensures cardButton object always has text, color, and size properties with proper defaults
   • Defaults to button mode (useCardButton: true) when attribute is missing
   • Defaults to "Read" for cardLinkText when attribute is missing
   • Fixed blank button issue: Now properly handles old blocks where cardButton.text might be undefined

How It Works

1. For blocks in the editor: When WordPress loads an old block, it detects the mismatch, finds the matching deprecated version, runs the migration, and prompts the user to update the block.

2. For blocks on live sites: The frontend.js now gracefully handles missing or incomplete cardButton data by:

   • Parsing the JSON safely with error handling
   • Ensuring all required properties exist with defaults (text: "Read", color: "gold", size: "default")
   • This fixes the blank button text issue reported by @jkcox

Original prompt

---

This section details on the original issue you should resolve

<issue_title>News grid - provide depreciated block</issue_title>
<issue_description>The latest news grid update broke button displays on live sites. Users need to edit the page, recover the block, and re-save the page to have the button or link display.

Create a depreciated Gutenberg block from the previous iteration of the news grid, so users still have a link to their stories on the front end.

Depreciation guide: https://developer.wordpress.org/block-editor/reference-guides/block-api/block-deprecation/
</issue_description>

Comments on the Issue (you are @copilot in this section)

• Fixes News grid - provide depreciated block #252

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

[jkcox]

@copilot this is close. the deprecated block load as expected on the front end. There is 1 display bug: buttons display but they are blank with no text.

[Copilot]

@copilot this is close. the deprecated block load as expected on the front end. There is 1 display bug: buttons display but they are blank with no text.

Fixed in commit 9ca8caa. The issue was that old blocks had incomplete or missing cardButton data attributes. The frontend now safely parses the cardButton JSON and ensures all required properties (text, color, size) have proper defaults, with "Read" as the default button text.

[jkcox]

@copilot this is close. the deprecated block load as expected on the front end. There is 1 display bug: buttons display but they are blank with no text.

Fixed in commit 9ca8caa. The issue was that old blocks had incomplete or missing cardButton data attributes. The frontend now safely parses the cardButton JSON and ensures all required properties (text, color, size) have proper defaults, with "Read" as the default button text.

@copilot why was this fixed in frontend.js and not in deprecated.js ?

[Copilot]

@copilot this is close. the deprecated block load as expected on the front end. There is 1 display bug: buttons display but they are blank with no text.

Fixed in commit [9ca8caa](https://gi...

Good question! The fix needed to be in both places for different reasons:

deprecated.js - Saves the cardButton with text="Read" when blocks are migrated in the editor. However, this only helps NEW saves after migration.

frontend.js - Handles EXISTING old blocks already on live sites. These blocks were saved before November 2025 and don't have a complete cardButton object in their HTML. The deprecated.js save() function hasn't been applied to them yet because they haven't been opened/saved in the editor.

The frontend.js fix provides immediate relief for live sites without requiring users to re-save every block. Once users open and save blocks in the editor, WordPress will use deprecated.js to migrate them properly.

[wmcconnell]

Spoke to John in a working session and reviewed this. He confirmed it's working on CGF to restore the front end. Approving.

[wmcconnell]

As with before, discussed in person with John. This is just changing the default news card button color to maroon, as it should be. Approved.

[jkcox]

tested on CGF QAa