How to use DataForm to create plugin settings pages

[justintadlock]

Discussed in #433

^{Originally posted by meszarosrob December 8, 2025}
The https://developer.wordpress.org/news/2024/03/how-to-use-wordpress-react-components-for-plugin-pages/ is (hopefully) a good intro for anybody who might want to use React for their plugin's settings page.

However, with recent developments in the https://developer.wordpress.org/block-editor/reference-guides/packages/packages-dataviews/, the creation of relatively simple settings pages could also be done using just the DataForm.

I think it would be educational to take the settings page of https://developer.wordpress.org/news/2024/03/how-to-use-wordpress-react-components-for-plugin-pages/ and show how that could be achieved using DataForm.

While there's an overlap with #412, that seems more focused on DataViews and its angle seems different.

---

Still an early draft, but something like this: https://docs.google.com/document/d/1OWPnZGoKXfhc_AorN0zyexl1orXUsTzwHCEtkWsetmA/edit?usp=sharing

[jonathanbossenger]

@meszarosrob I reviewed the bulk of the post today, and I got stuck on the last steps, "Connecting DataForm to the settings state".

The message and display fields are not editable, and when I hit the Save button it doesn't seem to save my Font Size setting

I have forked your original repository and committed my changes to a branch in that repo: https://github.com/jonathanbossenger/unadorned-announcement-bar/tree/review-dataform-refactor

Would you be able to check if I am doing something wrong. I checked your instructions and I'm pretty sure I followed everything, but maybe there's something I missed.

[meszarosrob]

@meszarosrob I reviewed the bulk of the post today, and I got stuck on the last steps, "Connecting DataForm to the settings state".

The message and display fields are not editable, and when I hit the Save button it doesn't seem to save my Font Size setting

I have forked your original repository and committed my changes to a branch in that repo: https://github.com/jonathanbossenger/unadorned-announcement-bar/tree/review-dataform-refactor

Would you be able to check if I am doing something wrong. I checked your instructions and I'm pretty sure I followed everything, but maybe there's something I missed.

@jonathanbossenger first of all, thanks for reviewing and following the steps 😺

I'll need to call this step out more carefully to make it more obvious! You'll need to replace the data variable with settings here:
https://github.com/jonathanbossenger/unadorned-announcement-bar/blob/a4aefef88539a2a544ee8e3d6bc4eb0641320985/src/components/settings-page.jsx#L101

Let me know if this solve your issue.

[jonathanbossenger]

I'll need to call this step out more carefully to make it more obvious! You'll need to replace the data variable with settings here:

Aha, yes, I missed that. Let me re-review that section tomorrow and confirm if it was just me _doing_it_wrong, before you make any specific changes.

[jonathanbossenger]

@meszarosrob completed the review today, and left a few more notes.

Great work on the article, I found it easy to follow, and I have a better understanding of how to use DataForm now in my future projects.

[meszarosrob]

@meszarosrob completed the review today, and left a few more notes.

Great work on the article, I found it easy to follow, and I have a better understanding of how to use DataForm now in my future projects.

@jonathanbossenger I really appreciate it! I'll try to incorporate all of them 🙏

[meszarosrob]

I've addressed all of your comments, @jonathanbossenger ✌️

This should now be ready for a second review.

[troychaplin]

I've addressed all of your comments, @jonathanbossenger ✌️

This should now be ready for a second review.

I can give this a review this evening

[troychaplin]

I've completed a second review. Great article! Nothing requires changing from my point of view. I agree with @jonathanbossenger that having the links to commit is helpful, I often follow those.