feat(ui): add popup title panel to Block Editor document settings#1160
feat(ui): add popup title panel to Block Editor document settings#1160
Conversation
Add a new Popup Title panel to the Block Editor sidebar that allows users to set the popup title and toggle whether it displays on the frontend. Changes: - Add popup_title REST field with update_callback in RestAPI.php - Create popup-title-panel.tsx component with title input and display toggle - Use module-level storage for pending values with save-on-publish pattern - Subscribe to Block Editor save events to persist custom fields via REST API
WalkthroughAdds a Changes
Sequence Diagram(s)sequenceDiagram
actor User
participant Editor as Gutenberg Editor
participant Panel as PopupTitlePanel
participant Store as WordPress Store
participant API as REST API
participant DB as Post Meta
User->>Panel: Edit popup title input
Panel->>Panel: Update pendingValues state
User->>Editor: Click Save
Editor->>Panel: Trigger save subscription
Panel->>Panel: Check if previous save complete
alt Has pending changes
Panel->>API: POST /popup-maker/v2/popups/{id}<br/>(popup_title + settings)
API->>DB: Update popup_title post meta
DB-->>API: Success
API-->>Panel: Response received
Panel->>Panel: Clear pendingValues,<br/>reset hasChanges
end
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes 🚥 Pre-merge checks | ✅ 3✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing touches
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Fix all issues with AI agents
In `@classes/Controllers/RestAPI.php`:
- Around line 357-373: Replace direct post meta access in the
register_rest_field call for 'popup_title' with the popup object methods: in the
'get_callback' use pum_get_popup($obj->ID) and return $popup ?
$popup->get_title() : ''; in the 'update_callback' retrieve the popup via
pum_get_popup($obj->ID) and call $popup->update_meta('popup_title',
sanitize_text_field($value)) only if $popup exists; keep schema and
permission_callback unchanged and mirror the pattern used by the existing
'popup_settings' handler.
In `@packages/block-editor/src/plugins/popup-title-panel.tsx`:
- Around line 93-99: The current .catch handler in the Promise chain inside
popup-title-panel.tsx (the handler that logs "Failed to save popup title
settings") only writes to console and leaves users unaware of save failures;
update the catch for the save call to also create a user-visible error notice
via the WordPress notices store (dispatch('core/notices').createErrorNotice or
the Popup Maker notification API) with a localized message, keep the
console.error for debugging, and ensure any UI state like
pendingValues.hasChanges remains accurate so the user can retry.
🧹 Nitpick comments (2)
packages/block-editor/src/plugins/popup-title-panel.tsx (2)
8-8: Consider using@popup-maker/i18nfor consistency.Per coding guidelines, prioritize
@popup-maker/*packages over@wordpress/*when available. The@popup-maker/i18npackage exports a__function (seepackages/i18n/src/index.ts).Suggested change
-import { __ } from '@wordpress/i18n'; +import { __ } from '@popup-maker/i18n';
16-19: LocalPopupSettingstype may conflict with@popup-maker/core-data.A
PopupSettingstype exists in@popup-maker/core-data. Consider importing and extending it, or renaming this local interface to avoid shadowing (e.g.,LocalPopupSettingsorPopupTitleSettings).
| // Register popup_title as REST field with explicit update_callback. | ||
| // This ensures saves work correctly with custom REST namespace. | ||
| register_rest_field( $post_type, 'popup_title', [ | ||
| 'get_callback' => function ( $obj ) { | ||
| return get_post_meta( $obj['id'], 'popup_title', true ) ?: ''; | ||
| }, | ||
| 'update_callback' => function ( $value, $obj ) { | ||
| update_post_meta( $obj->ID, 'popup_title', sanitize_text_field( $value ) ); | ||
| }, | ||
| 'schema' => [ | ||
| 'type' => 'string', | ||
| 'description' => __( 'The popup title displayed inside the popup.', 'popup-maker' ), | ||
| ], | ||
| 'permission_callback' => function () use ( $edit_permission ) { | ||
| return current_user_can( $edit_permission ); | ||
| }, | ||
| ] ); |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# Find all popup_title references with context
rg -n "popup_title" --type=php -B2 -A2Repository: PopupMaker/Popup-Maker
Length of output: 9973
🏁 Script executed:
#!/bin/bash
# Check the PUM_Model_Popup class for available methods
fd "class.*Popup" --type=php | head -20Repository: PopupMaker/Popup-Maker
Length of output: 236
🏁 Script executed:
#!/bin/bash
# Look at the 'enabled' field pattern mentioned in the comment
sed -n '346,350p' classes/Controllers/RestAPI.phpRepository: PopupMaker/Popup-Maker
Length of output: 285
🏁 Script executed:
#!/bin/bash
# Check for get_setting/update_setting patterns in RestAPI.php
rg -n "get_setting|update_setting" classes/Controllers/RestAPI.php -B1 -A1Repository: PopupMaker/Popup-Maker
Length of output: 275
Use the popup object methods for getting and updating popup_title in REST callbacks.
Per coding guidelines, use pum_get_popup() to retrieve the popup object, then call get_title() or update_meta() instead of direct get_post_meta()/update_post_meta() calls. The same file demonstrates this pattern in the popup_settings field handler (lines 390–391).
Suggested pattern (from lines 390–391):
'get_callback' => function ( $obj ) {
$popup = pum_get_popup( $obj->ID );
return $popup ? $popup->get_title() : '';
},
'update_callback' => function ( $value, $obj ) {
$popup = pum_get_popup( $obj->ID );
if ( $popup ) {
$popup->update_meta( 'popup_title', sanitize_text_field( $value ) );
}
},🤖 Prompt for AI Agents
In `@classes/Controllers/RestAPI.php` around lines 357 - 373, Replace direct post
meta access in the register_rest_field call for 'popup_title' with the popup
object methods: in the 'get_callback' use pum_get_popup($obj->ID) and return
$popup ? $popup->get_title() : ''; in the 'update_callback' retrieve the popup
via pum_get_popup($obj->ID) and call $popup->update_meta('popup_title',
sanitize_text_field($value)) only if $popup exists; keep schema and
permission_callback unchanged and mirror the pattern used by the existing
'popup_settings' handler.
| .then( () => { | ||
| pendingValues.hasChanges = false; | ||
| } ) | ||
| .catch( ( error ) => { | ||
| // eslint-disable-next-line no-console | ||
| console.error( 'Failed to save popup title settings:', error ); | ||
| } ); |
There was a problem hiding this comment.
Silent failure may confuse users when API save fails.
The .catch() only logs to console. If the REST API call fails (network issue, permission error, etc.), the user sees no indication that their popup title changes weren't saved. Consider displaying a notice using @wordpress/notices or the Popup Maker notification system.
Example improvement
import { dispatch } from '@wordpress/data';
// In the .catch handler:
.catch( ( error ) => {
console.error( 'Failed to save popup title settings:', error );
dispatch( 'core/notices' ).createErrorNotice(
__( 'Failed to save popup title settings.', 'popup-maker' ),
{ type: 'snackbar' }
);
} );🤖 Prompt for AI Agents
In `@packages/block-editor/src/plugins/popup-title-panel.tsx` around lines 93 -
99, The current .catch handler in the Promise chain inside popup-title-panel.tsx
(the handler that logs "Failed to save popup title settings") only writes to
console and leaves users unaware of save failures; update the catch for the save
call to also create a user-visible error notice via the WordPress notices store
(dispatch('core/notices').createErrorNotice or the Popup Maker notification API)
with a localized message, keep the console.error for debugging, and ensure any
UI state like pendingValues.hasChanges remains accurate so the user can retry.
1 participant
Summary
Changes
popup_titleREST field withupdate_callbackinRestAPI.phppopup-title-panel.tsxcomponent with title input and display toggleTest Plan
Summary by CodeRabbit
✏️ Tip: You can customize this high-level summary in your review settings.