PHPackages automattic/jetpack-wp-js-data-sync - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [API Development](/categories/api) 4. / 5. automattic/jetpack-wp-js-data-sync ActiveJetpack-library[API Development](/categories/api) automattic/jetpack-wp-js-data-sync ================================== A package to setup REST API and script localization to pass data to a JavaScript client. v0.6.9(3w ago)43.6k2GPL-2.0-or-laterPHPPHP >=7.2CI failing Since Apr 6Pushed 2w ago3 watchersCompare [ Source](https://github.com/Automattic/jetpack-wp-js-data-sync)[ Packagist](https://packagist.org/packages/automattic/jetpack-wp-js-data-sync)[ RSS](/packages/automattic-jetpack-wp-js-data-sync/feed)WikiDiscussions trunk Synced today READMEChangelogDependencies (7)Versions (26)Used By (0) WP JS Data Sync =============== [](#wp-js-data-sync) Debug ----- [](#debug) WP JS DataSync listens for `ds-debug-disable` GET parameter to disable certain DataSync values. To disable a specific DataSync value, add `?ds-debug-disable=` to the URL. To disable all data sync values, add `?ds-debug-disable=all` to the URL. #### Debug Example [](#debug-example) If your dashboard URL is `https://example.com/wp-admin/admin.php?page=example`, and you want to disable the `widget_status` value, you would navigate to `https://example.com/wp-admin/admin.php?page=example?ds-debug-disable=widget_status`. Outdated Documentation: ======================= [](#outdated-documentation) WP JS Data Sync is a library designed to help sync data between WordPress and the JavaScript in the admin dashboard. This helps create streamlined way to pass data from the WordPress backend to JavaScript and: - Be clear about what options are available - Ensure that any necessary transformation/validation/sanitization actions are performed at predictable times - Provide a structured way to pass the data to the frontend on page load - Automatically generate REST API CRUD endpoints that can be used by the JavaScript on the front-end - Automatically set up a nonce for every entry that is registered - Integrate with libraries like Zod on the front-end to provide type-safe data sync. Usage Overview -------------- [](#usage-overview) After integrating the package into your plugin, the typical setup for a new entry would look something like this: ``` // Register the entries in the plugin: plugin_name_register_entry( 'widget_status', Schema::as_boolean() ); plugin_name_register_entry( 'widget_title', Schema::as_string() ); // Somewhere, where the data is needed, get the data: $status = plugin_name_get_entry( 'widget_status' ); $title = plugin_name_get_entry( 'widget_title' ); ``` This will pass the necessary data to the admin-page scripts via `wp_localize_script`: ``` // The data is available in the `window.plugin_name` global variable. window.plugin_name = { rest_api: { nonce: '1234567890', value: 'https://example.com/wp-json', }, widget_status: { value: true, nonce: '1234567890', }, widget_title: { value: 'My Widget', nonce: '1234567890', }, widget_text: { value: 'This is my widget', nonce: '1234567890', } } ``` And will also create a REST API endpoints that can be used to update the data: ``` // GET, POST: /wp-json/plugin-name/widget-status // POST: /wp-json/plugin-name/widget-status/set // POST, DELETE: /wp-json/plugin-name/widget-status/delete ``` To update the data, you can submit a fetch request and pass in both WordPress REST API nonce and the nonce for the specific entry: ``` // Update the widget title: const req = fetch( 'https://example.com/wp-json/plugin-name/widget-status/set', { method: 'POST', headers: { 'X-WP-Nonce': window.plugin_name.rest_api.nonce, 'X-Jetpack-WP-JS-Sync-Nonce': window.plugin_name.widget_status.nonce, }, body: JSON.stringify( { 'JSON': 'This is a title', } ), } ); const response = await req.json(); ``` The response will look like this: ``` { "status": "success", "JSON": "This is a title", } ``` Setup ----- [](#setup) ### Step 1: Initialize Data Sync for the Admin Dashboard [](#step-1-initialize-data-sync-for-the-admin-dashboard) The `Data_Sync` class is responsible for initializing and streamlining the setup for the Admin dashboard. Initializing the Data Sync and pass in data about the admin environment. This only needs to be done once per `$namespace` and is going to attach all the necesasry hooks. ``` function plugin_name_initialize_datasync() { $data_sync = Data_Sync::get_instance( JETPACK_BOOST_DATASYNC_NAMESPACE ); // attach_to_plugin( $script_handle, $plugin_page_hook ); $data_sync->attach_to_plugin( 'plugin-name-admin', 'jetpack_page_plugin-name' ); } // This only needs to happen in the Admin Dashboard: add_action( 'admin_init', 'plugin_name_initialize_datasync' ); ``` ### Step 2: Register Entries [](#step-2-register-entries) Now that we have two handlers setup, we can register them with the Data Sync registry. #### A simple example: [](#a-simple-example) ``` $registry = Registry::get_instance( 'jetpack_favorites' ); $registry->register( 'enabled', Schema::as_boolean() ); ``` #### A more complex example: [](#a-more-complex-example) The default storage is `wp_options` using the `Data_Sync_Option` class, but sometimes you might want to customize that. Here's an example of how to make Data Sync use WordPress posts instead of WP Options ``` class Favorite_Posts implements Entry_Can_Get { public function get() { $posts = array_map( 'get_post', $value ); return array_filter( $posts, function( $post ) { return $post instanceof WP_Post; } ); return $posts; } } ``` ### Step 3: Usage [](#step-3-usage) Now that the entries are registered, just like in [Usage](#usage) section, you can interact with the data via REST API or the Entry object. ``` // GET, POST: /wp-json/jetpack-favorites/enabled // POST: /wp-json/jetpack-favorites/enabled/set // POST, DELETE: /wp-json/jetpack-favorites/enabled/delete // GET: /wp-json/jetpack-favorites/favorite-posts ``` Or change the values via the Entry object in PHP: ``` $entry = Registry::get_instance( 'jetpack_favorites' )->get_entry( 'enabled' ); $entry->set( true ); ``` Values provided to `$entry->set()` will always be validated by the Schema before being saved. Utilities --------- [](#utilities) If you're using the data in various places, it might be helpful to set up helper functions to make it easier to use: ``` function jetpack_favorites() { return Registry::get_instance( 'jetpack_favorites' ); } function jetpack_favorites_get( $key ) { $entry = jetpack_favorites()->get_entry( $key ); return $entry->get(); } function jetpack_favorites_set( $key, $value ) { $entry = jetpack_favorites()->get_entry( $key ); return $entry->set( $value ); } ``` Using this package in your WordPress plugin ------------------------------------------- [](#using-this-package-in-your-wordpress-plugin) If you plan on using this package in your WordPress plugin, we would recommend that you use [Jetpack Autoloader](https://packagist.org/packages/automattic/jetpack-autoloader) as your autoloader. This will allow for maximum interoperability with other plugins that use this package as well. Security -------- [](#security) Need to report a security vulnerability? Go to or directly to our security bug bounty site . License ------- [](#license) WP JS Data Sync is licensed under [GNU General Public License v2 (or later)](./LICENSE.txt) ### Health Score 48 — FairBetter than 93% of packages Maintenance95 Actively maintained with recent releases Popularity27 Limited adoption so far Community26 Small or concentrated contributor base Maturity40 Maturing project, gaining track record Bus Factor2 2 contributors hold 50%+ of commits How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~50 days Recently: every ~97 days Total 24 Last Release 26d ago PHP version history (2 changes)v0.4.0PHP >=7.0 v0.6.0PHP >=7.2 ### Community Maintainers ![](https://www.gravatar.com/avatar/7c5869ecbb8e0eac7e8b8e0f3cf7bdd8d5fcdc4abc10a72281872c53f8639d44?d=identicon)[automattic](/maintainers/automattic) ![](https://www.gravatar.com/avatar/11609890f6e7a840715f4cfc9622d77ea64b7dfc024df5643fbf8471a18c00f3?d=identicon)[kraft](/maintainers/kraft) ![](https://www.gravatar.com/avatar/5326730499ec14e274f51b9bcc39db6aac0fb38b33849715aae0e2587a2b93df?d=identicon)[jeherve](/maintainers/jeherve) ![](https://www.gravatar.com/avatar/6e220e167e341c28b1aa10bf0bb0374999068329f8683d3187ee3cf6749b8837?d=identicon)[dereksmart](/maintainers/dereksmart) --- Top Contributors [![anomiex](https://avatars.githubusercontent.com/u/1030580?v=4)](https://github.com/anomiex "anomiex (72 commits)")[![tbradsha](https://avatars.githubusercontent.com/u/32492176?v=4)](https://github.com/tbradsha "tbradsha (32 commits)")[![dilirity](https://avatars.githubusercontent.com/u/11799079?v=4)](https://github.com/dilirity "dilirity (13 commits)")[![pyronaur](https://avatars.githubusercontent.com/u/988095?v=4)](https://github.com/pyronaur "pyronaur (11 commits)")[![thingalon](https://avatars.githubusercontent.com/u/1369626?v=4)](https://github.com/thingalon "thingalon (10 commits)")[![haqadn](https://avatars.githubusercontent.com/u/3737780?v=4)](https://github.com/haqadn "haqadn (9 commits)")[![zinigor](https://avatars.githubusercontent.com/u/374293?v=4)](https://github.com/zinigor "zinigor (7 commits)")[![jeherve](https://avatars.githubusercontent.com/u/426388?v=4)](https://github.com/jeherve "jeherve (5 commits)")[![LiamSarsfield](https://avatars.githubusercontent.com/u/43409125?v=4)](https://github.com/LiamSarsfield "LiamSarsfield (5 commits)")[![kraftbj](https://avatars.githubusercontent.com/u/88897?v=4)](https://github.com/kraftbj "kraftbj (4 commits)")[![samiff](https://avatars.githubusercontent.com/u/15803018?v=4)](https://github.com/samiff "samiff (3 commits)")[![ice9js](https://avatars.githubusercontent.com/u/8056203?v=4)](https://github.com/ice9js "ice9js (3 commits)")[![gmjuhasz](https://avatars.githubusercontent.com/u/36671565?v=4)](https://github.com/gmjuhasz "gmjuhasz (3 commits)")[![manzoorwanijk](https://avatars.githubusercontent.com/u/18226415?v=4)](https://github.com/manzoorwanijk "manzoorwanijk (2 commits)")[![sdixon194](https://avatars.githubusercontent.com/u/33553323?v=4)](https://github.com/sdixon194 "sdixon194 (2 commits)")[![sergeymitr](https://avatars.githubusercontent.com/u/1341249?v=4)](https://github.com/sergeymitr "sergeymitr (2 commits)")[![adamwoodnz](https://avatars.githubusercontent.com/u/1017872?v=4)](https://github.com/adamwoodnz "adamwoodnz (1 commits)")[![paulopmt1](https://avatars.githubusercontent.com/u/1044309?v=4)](https://github.com/paulopmt1 "paulopmt1 (1 commits)")[![psealock](https://avatars.githubusercontent.com/u/1922453?v=4)](https://github.com/psealock "psealock (1 commits)")[![edanzer](https://avatars.githubusercontent.com/u/21228350?v=4)](https://github.com/edanzer "edanzer (1 commits)") ### Embed Badge ![Health badge](/badges/automattic-jetpack-wp-js-data-sync/health.svg) ``` [![Health](https://phpackages.com/badges/automattic-jetpack-wp-js-data-sync/health.svg)](https://phpackages.com/packages/automattic-jetpack-wp-js-data-sync) ``` ### Alternatives [exsyst/swagger A php library to manipulate Swagger specifications 35916.4M7](/packages/exsyst-swagger)[hubspot/api-client Hubspot API client 24016.2M20](/packages/hubspot-api-client)[pocketmine/bedrock-protocol An implementation of the Minecraft: Bedrock Edition protocol in PHP 172445.0k15](/packages/pocketmine-bedrock-protocol)[botman/driver-telegram Telegram driver for BotMan 93459.5k6](/packages/botman-driver-telegram) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)