{"id":15040511,"url":"https://github.com/automattic/vip-decoupled-bundle","last_synced_at":"2025-10-19T19:30:19.146Z","repository":{"id":40402574,"uuid":"369356503","full_name":"Automattic/vip-decoupled-bundle","owner":"Automattic","description":"WordPress VIP decoupled plugin bundle","archived":false,"fork":false,"pushed_at":"2024-05-02T21:18:39.000Z","size":49849,"stargazers_count":30,"open_issues_count":0,"forks_count":5,"subscribers_count":7,"default_branch":"trunk","last_synced_at":"2025-01-30T01:12:36.163Z","etag":null,"topics":["vip-decoupled","wordpress-plugin","wordress","wpvip-plugin"],"latest_commit_sha":null,"homepage":"","language":"PHP","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Automattic.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-05-20T22:51:11.000Z","updated_at":"2025-01-08T20:53:59.000Z","dependencies_parsed_at":"2024-01-04T00:54:49.462Z","dependency_job_id":"d9e49f70-1244-4d4f-a7ae-bac2507c1694","html_url":"https://github.com/Automattic/vip-decoupled-bundle","commit_stats":null,"previous_names":[],"tags_count":14,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Automattic%2Fvip-decoupled-bundle","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Automattic%2Fvip-decoupled-bundle/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Automattic%2Fvip-decoupled-bundle/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Automattic%2Fvip-decoupled-bundle/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Automattic","download_url":"https://codeload.github.com/Automattic/vip-decoupled-bundle/tar.gz/refs/heads/trunk","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":237200491,"owners_count":19271153,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["vip-decoupled","wordpress-plugin","wordress","wpvip-plugin"],"created_at":"2024-09-24T20:44:41.361Z","updated_at":"2025-10-19T19:30:18.026Z","avatar_url":"https://github.com/Automattic.png","language":"PHP","funding_links":[],"categories":[],"sub_categories":[],"readme":"# WordPress VIP Decoupled Plugin Bundle\n\nThis plugin bundle provides a number of plugins to help you quickly setup a decoupled WordPress application. It is designed to support VIP’s [Next.js boilerplate][nextjs-boilerplate] but can be used to support any decoupled frontend. It solves a number of common problems facing decoupled sites, including:\n\n- Previewing\n- Permalinks\n- Feeds\n- Exposing structured data for block-based content\n\n\u003e ⚠️ This project is under active development. If you are a VIP customer, please let us know if you'd like to use this plugin and we can provide additional guidance. Issues and PRs are welcome. 💖\n\n## Table of contents\n- [Installation](#installation)\n\t- [Plugin activation](#plugin-activation)\n- [Getting started](#getting-started)\n- [Configuration](#configuration)\n\t- [Setting the home URL](#setting-the-home-url)\n- [Jetpack Configuration](#jetpack-configuration)\n\t- [Plugin settings](#plugin-settings)\n- [Sub-plugins](#sub-plugins)\n\t- [WPGraphQL](#wpgraphql)\n\t- [WPGraphQL Preview](#wpgraphql-preview)\n\t- [Block Data Plugins](#block-data-plugins)\n\t\t- [WPGraphQL Content blocks](#wpgraphql-content-blocks)\n\t\t- [VIP Block Data API](#vip-block-data-api)\n\t\t- [Which Plugin Should I Choose?](#which-plugin-should-i-choose)\n- [Contributing](#contributing)\n\n## Installation\n\nThe latest version of the plugin can be downloaded from the [repository's Releases page][repo-releases]. Unzip the downloaded plugin and add it to the `plugins/` directory of your site's GitHub repository.\n\n### Plugin activation\n\nFor VIP sites, we recommend [activating plugins with code][wpvip-plugin-activate].\n\nFor Non-VIP sites, activate the plugin in the WordPress Admin dashboard using the following steps:\n\n1. Navigate to the WordPress Admin dashboard as a logged-in user.\n2. Select **Plugins** from the lefthand navigation menu.\n3. Locate the \"VIP Decoupled Plugin Bundle\" plugin in the list and select the \"Activate\" link located below it.\n\n## Getting started\n\nThis plugin is ready for local development using [`wp-env`][wp-env] and Docker:\n\n```sh\nwp-env start\n```\n\nThis command will start a local WordPress environment, activate the plugin, and be ready for GraphQL requests from our [Next.js boilerplate][nextjs-boilerplate] (which must be set up separately).\n\nThe default credentials for the Admin Dashboard (provided by `wp-env`) are U: `admin` / P: `password`.\n\n## Configuration\n\n### Setting the home URL\n\nWordPress needs to know the address of your frontend so that it can point previews, permalinks, and other URLs to the correct destination. WordPress uses the `home` option for this, but by default it is set to the same address that WordPress is served from. This plugin requires you to update `home` to the address of your decoupled frontend. Additionally, it handles a few edge cases, like feed URLs, that we want to serve from WordPress (see `./urls/urls.php`).\n\nIf you are using [`wp-env`][wp-env] for local development, this step is already done for you in [`.wp-env.json`][wp-env-file]. By default, it points to `http://localhost:3000`; if you make changes, you'll need to `stop` and `start` your environment for the changes to take effect.\n\nFor other environments, you'll need to make this change manually. The easiest method is using WP-CLI:\n\n```sh\nwp option update home \"https://my-decoupled-frontend.example.com\"\n```\n\nYou can also define a constant in code that overrides the value of the option:\n\n```php\ndefine( 'WP_HOME', 'https://my-decoupled-frontend.example.com' );\n```\n\nIt is also possible to make this change in the Admin Dashboard, but **be careful**: In the Admin Dashboard, WordPress labels the `home` option inconsistently and in ways that can be confusing and misleading. A related but separate option named `siteurl` governs where WordPress serves the Dashboard and other core functionality. You should not edit `siteurl`; however, WordPress sometimes labels the `home` option as \"Site Address (URL).\"\n\nMultisite installations require different configuration. Please see [`MULTISITE.md`][multisite-file].\n\n## Jetpack Configuration\n\nPrior to version 11.2, Jetpack had syncing functionality that fires on WordPress shutdown hooks. This can cause performance issues for API requests. A more performant architecture is used in all versions of Jetpack since 11.2. If you are unable to update Jetpack, you can [install a VIP written plugin][vip-jetpack-sync-cron] to offload the sync to cron. It also detects the verson of Jetpack and will not conflict if you upgrade Jetpack in the future.\n\n### Plugin settings\n\nThis plugin provides a settings page in the Admin Dashboard, found at Settings \u003e VIP Decoupled. There, you'll find your GraphQL endpoint. You can also see (and optionally disable) the \"sub-plugins\", described below, that this plugin provides.\n\nThat's all the configuration that's needed to support your decoupled frontend. If you are using VIP's Next.js boilerplate, [head over to the README][nextjs-boilerplate] to get your frontend up and running.\n\n## Sub-plugins\n\nThis plugin bundle provides a number of \"sub-plugins\" that are commonly useful in decoupled environments. You are free to disable any of them and bring your own alternatives.\n\n### WPGraphQL\n\n[WPGraphQL][wp-graphql] is a [GraphQL][graphql] API for WordPress, and provides the backbone of how your decoupled frontend will load content from WordPress. GraphQL is a relatively new but very powerful query language that provide a good developer experience.\n\nWhen updates are pushed out to WPGraphQL, we will update this plugin after evaluating it for compatibility and performance. If you need to run a different version of WPGraphQL, you can disable the bundled version and activate your own.\n\n### WPGraphQL Preview\n\nThis plugin overrides WordPress's native preview functionality and securely sends you to your decoupled frontend to preview your content. This ensures that your preview content has parity with your published content. It works by issuing a one-time use token, locked to a specific post, that can be redeemed by the frontend to obtain preview content for that post.\n\n**This plugin currently only works with our Next.js boilerplate** and should be disabled if you are not using it. If you are interested in using this plugin for other frontend frameworks, please see the [preview `README`][preview-readme].\n\n### Block Data Plugins\n\nThere are 2 sub-plugins bundled for exposing the Gutenberg blocks - WPGraphQL Content Blocks and VIP Block Data API. In the near future, WPGraphQL Content Blocks will be deprecated in favour of just including the VIP Block Data API.\n\n##### WPGraphQL Content blocks\n\nThis plugin exposes Gutenberg blocks as a field named `contentBlocks` on all post types that support a content editor:\n\n```gql\nquery AllPosts {\n  posts {\n    nodes {\n      id\n      title\n      contentBlocks {\n        blocks {\n          attributes {\n            name\n            value\n          }\n          name\n          innerHTML\n        }\n        isGutenberg\n        version\n      }\n    }\n  }\n}\n```\n\nThis will allow you to easily map Gutenberg blocks to front-end components. Posts that do not support Gutenberg will return a single content block with the block name `core/classic-editor`, which contains the full `innerHTML` of the post.\n\nSee our [Next.js boilerplate][nextjs-boilerplate] for an example of how to use and render these blocks.\n\n##### VIP Block Data API\n\nThis plugin exposes Gutenberg blocks as JSON data, with integrations for both the official WordPress REST API and WPGraphQL. The GraphQL API exposes the blocks under a field name `blocksData` on all post types that support a content editor:\n\n```graphQL\nquery GetPost {\n  post(id: \"1\", idType: DATABASE_ID) {\n    blocksData {\n      blocks {\n        id\n        name\n        attributes {\n          name\n          value\n        }\n        innerBlocks {\n          name\n          parentId\n          id\n          attributes {\n            name\n            value\n          }\n        }\n      }\n    }\n  }\n}\n```\n\nPosts that do not support Gutenberg are not supported by this plugin. For more information, refer to the documentation [here](https://github.com/Automattic/vip-block-data-api).\n\n#### Which Plugin Should I Choose?\n\nWe recommend the VIP Block Data API plugin, as the plugin of choice for exposing the Gutenberg blocks.\n\nHowever, if you require exposing the Gutenberg blocks as HTML structured data rather than JSON data, then using the WPGraphQL Content Blocks plugin would be recommended. This would allow for the decoupled app, to easily render the blocks via the `dangerouslySetInnerHTML` method rather than having to individually design each block's corresponding component.\n\nThat being said, we intend to get this feature included in the VIP Block Data API plugin in the near future. This would allow for the eventual deprecation of the WPGraphQL Content Block plugin.\n\n## Contributing\n\nRefer [here](CONTRIBUTING.md) for how to contribute to this plugin's development.\n\n\u003c!-- Links --\u003e\n[graphql]: https://graphql.org\n[mulisite-file]: MULTISITE.md\n[preview-readme]: preview/README.md\n[nextjs-boilerplate]: https://github.com/Automattic/vip-go-nextjs-skeleton\n[wp-graphql]: https://wpgraphql.com\n[wp-env]: https://developer.wordpress.org/block-editor/reference-guides/packages/packages-env/\n[wp-env-file]: wp-env.json\n[vip-jetpack-sync-cron]: https://github.com/Automattic/vip-jetpack-sync-cron\n[repo-releases]: https://github.com/Automattic/vip-decoupled-bundle/releases\n[wpvip-plugin-activate]: https://docs.wpvip.com/how-tos/activate-plugins-through-code/\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fautomattic%2Fvip-decoupled-bundle","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fautomattic%2Fvip-decoupled-bundle","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fautomattic%2Fvip-decoupled-bundle/lists"}