fix: update blocks for compatibility with iframe-based Post Editor

[jason10lee]

All Submissions:

• Have you followed the Newspack Contributing guideline?
• Does your code follow the WordPress' coding standards and VIP Go coding standards?
• Have you checked to ensure there aren't other open Pull Requests for the same update/change?

Changes proposed in this Pull Request:

This PR reworks several blocks in this plugin for compatibility with the new iframe-based Post Editor:

• newspack-listings/curated-list
• newspack-listings/list-container
• newspack-listings/event-dates
• newspack-listings/price
• newspack-listings/self-serve-listings
• newspack-listings/event
• newspack-listings/generic
• newspack-listings/marketplace
• newspack-listings/place

Addresses NPPM-2589: Newspack Listings (iframe Editor Compatibility).

How to test the changes in this Pull Request:

General Prerequisites:

1. Set up a basic test site with only newspack-plugin and newspack-listings enabled.
2. Create test listings (Listings item in admin sidebar)--at least two of each:

• Event
• Marketplace (add a Price block to at least one)
• Generic
• Places

3. Verify each listing shows up as expected outside the editor.
4. Inspect the DOM to make sure you're in the non-iframe editor--none of the ancestors of the blocks you're editing should be an <iframe>.
5. Create a test post with:

• 'Curated List' block, and choose a Query list.
• 'Curated List' block, Specific Listings list, and select a few listings you created using the + at the bottom.

4. Verify that:

• Selectors worked for each scenario.
• The listings you selected show up in the editor.
• The listings show up outside the editor.

Experimental prerequisites: Self-serve listings (released as an experimental feature)

In addition to the above:

1. Install WooCommerce and WooCommerce Subscriptions (premium plugin, manual install).
2. (Maybe optional?) Enable a payment type--check payments should be fine for testing.
3. Set NEWSPACK_LISTINGS_SELF_SERVE_ENABLED to true however you like--for example, in wp-config.php:

define( 'NEWSPACK_LISTINGS_SELF_SERVE_ENABLED', true );

4. Configure self-serve listings per the docs. (Mainly, click the link in Listings > Settings under 'Self-Serve Settings' to enable.)
5. Add the 'Listings: Self-Serve Form' block to a test post. Leave 'Purchase Types Allowed' on the default of Single listings and subscriptions to test the tabs.
6. Inspect the DOM to make sure you're in the non-iframe editor--none of the ancestors of the blocks you're editing should be an <iframe>.
7. Verify in the editor that:

• The tabs properly toggle between the single listing and subscription forms.
• Selectors show appropriate options.

8. Verify outside the editor that:

• The tabs still toggle properly.
• Information entered in the selectors and text fields are reflected when you submit the form.

Testing standard blocks:

1. Apply this PR.
2. Create a new Marketplace listing, and add a 'Price' block.
3. Verify that the editor pane is an <iframe> in the DOM.
4. Verify the 'Price' block shows up properly in the editor and on the post itself.
5. Create a new post.
6. Verify you're in the iframe editor by checking the DOM--you should see an iframe where the edit pane would be.
7. Add blocks:

• 'Curated List' block, and choose a Query list.
• 'Curated List' block, Specific Listings list, and select a few listings you created using the + at the bottom.

8. Verify that:

• Selectors show appropriate options.
• The listings you select show up in the editor.
• The listings show up outside the editor.

Testing self-serve listings form:

1. Make sure you've gone through the Experimental Prerequisites above.
2. Apply this PR.
3. Add the 'Listings: Self-Serve Form' block to a test post. Leave 'Purchase Types Allowed' on the default of Single listings and subscriptions to test the tabs.
4. Verify you're in the iframe editor by checking the DOM--you should see an iframe where the edit pane would be.
5. Verify in the editor that:

• The tabs properly toggle between the single listing and subscription forms.
• Selectors show appropriate options.

6. Verify outside the editor that:

• The tabs still toggle properly.
• Information entered in the selectors and text fields are reflected when you submit the form.

Testing existing blocks (the upgrade case):

1. Apply this PR if you haven't already.
2. View the posts you created before applying the PR.
3. Do the existing blocks continue to work as expected?
4. Is the same true when viewing the post outside the editor?

Other information:

• Have you added an explanation of what your changes do and why you'd like us to include them?
• Have you successfully ran tests with your changes locally?

[Copilot]

Pull request overview

Updates Newspack Listings blocks to be compatible with the iframe-based Post Editor by moving blocks to Block API v3 conventions and ensuring editor markup is properly wrapped.

Changes:

• Bump multiple blocks to apiVersion: 3 (block.json + JS registration) and update PHP registration where needed.
• Add useBlockProps() wrappers across block editors to ensure proper block wrapper markup in the iframe editor.
• Adjust editor asset enqueueing to run via enqueue_block_assets with an editor-only guard.

Reviewed changes

Copilot reviewed 24 out of 24 changed files in this pull request and generated 7 comments.

Show a summary per file

File	Description
includes/class-blocks.php	Enqueue editor assets via enqueue_block_assets and gate to editor contexts.
src/blocks/curated-list/*	Move to API v3 and ensure editor output uses useBlockProps wrapper(s).
src/blocks/event-dates/*	Move to API v3 and ensure editor output uses useBlockProps.
src/blocks/list-container/*	Move to API v3 and ensure editor output uses useBlockProps (including hidden wrapper behavior).
src/blocks/listing/*	Move to API v3 and ensure editor output is wrapped with useBlockProps.
src/blocks/price/*	Move to API v3; switch PHP registration to metadata (__DIR__) and wrap editor output with useBlockProps.
src/blocks/self-serve-listings/*	Move to API v3; switch PHP registration to metadata (__DIR__) and wrap editor output with useBlockProps.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.