WP Manifestindependent plugin directory
manifest / developer / wp-gutenberg-auto-refresh

Gutenberg Live Refresh

Reload front automatically when a post is saved from Gutenberg.

by lrtrln · github.com/lrtrln/wp-gutenberg-auto-refresh

★ 0stars

Install

Download source zip No release zip yet

This is the repository archive. It installs, but the folder name will carry the branch suffix and updates will not flow.

Install straight from GitHub with WP-CLI:

wp plugin install https://github.com/lrtrln/wp-gutenberg-auto-refresh/archive/refs/heads/main.zip
No built-in updater. New versions won't appear under Dashboard → Updates. Install new releases yourself, or let Git Updater track the repository.
Readme github.com/lrtrln/wp-gutenberg-auto-refresh ↗

A simple but powerful WordPress plugin that allows you to live-reload a post on the front-end automatically when you save it in the Gutenberg editor.

This plugin is designed for developers and content editors who want to see their changes reflected instantly on the public-facing page without having to manually refresh their browser.

Features

  • Live Refresh Toggle: Adds a "Live Refresh" panel to the Gutenberg editor sidebar, allowing you to enable or disable the functionality on a per-post basis.
  • Efficient Communication: Uses the built-in WordPress Heartbeat API to check for updates, ensuring minimal impact on server performance compared to traditional polling methods.
  • Modern Admin UI: The editor interface is built the "WordPress way" using modern, React-based Gutenberg components (Slot/Fill), ensuring a clean and stable integration.
  • Internationalization Ready: All strings are translatable. The plugin is set up with a text domain and includes scripts to generate translation files.
  • Clean Deactivation: Automatically removes all its data (_glar_monitoring_status post meta) from the database upon deactivation, leaving your WordPress installation clean.

Prerequisites & Installation

For Users

  1. Download the plugin folder (after building the assets, see below).
  2. Upload the folder to your wp-content/plugins/ directory.
  3. Activate the plugin through the 'Plugins' menu in WordPress.

For Developers (Building the Plugin)

This plugin uses modern JavaScript (JSX) for its admin interface, which requires a compilation step. The necessary build tools will not be included in the final plugin package and must be run during development.

Requirements:

  • Node.js (v16 or higher)
  • npm (comes with Node.js)

Build Process:

  1. Open your terminal and navigate to the plugin's root directory:

    cd /path/to/wp-content/plugins/wp-gutenberg-auto-refresh

  2. Install the required development packages:

    npm install

  3. Compile the JavaScript assets:

    npm run build

This will create a build directory containing the final JavaScript file that the plugin loads. The plugin's admin interface will not work without this build step.

Usage

  1. Edit any post or page.
  2. In the top-right corner of the editor, click the three vertical dots icon to open the main settings menu.
  3. In the "Plugins" section of the menu, click Live Refresh. This will open a new panel in the sidebar.
  4. Inside the "Live Refresh" panel, click the button to toggle the status to Live Refresh ON.
  5. Open the post's public URL in another browser tab.
  6. When you now update the post in the editor, the public-facing page will automatically reload to show the changes.

Translation

This plugin is fully prepared for internationalization.

  1. Generate the template file: Run npm run makepot to generate a languages/wp-gutenberg-auto-refresh.pot file.
  2. Create language files: Use a tool like Poedit to create a .po file from the .pot template (e.g., fr_FR.po).
  3. Generate JSON files: After translating your .po file, run npm run makejson to generate the necessary .json files for JavaScript translations.