A simple plugin to prototype design ideas in WP-Admin. This repository is intended to be a quick way for designers to try out ideas and minor CSS updates. Quick, messy code is encouraged to get ideas across.
Settings > Design Experiments
to activate an experiment.css/default.css
directly, or edit sass/default.scss
and compile using the method described below. If you'd like to add a new CSS file, you can enqueue it by following steps 4 and 5 below.Fork the repository.
Clone your fork. If possible, place your local copy in the Plugins folder of your local dev site. Then you'll be able to activate the plugin directly from your WP Admin dashboard (If this isn't possible, you'll need to manually create a zip of the repository and upload it to your site to install the plugin after you've made changes).
If you're using Sass, create new SASS stylesheet in the sass
directory, and run npm run build
to compile it. Otherwise, just add a new CSS file to the css
directory. Experiments are expected to use a single css file.
Begin your CSS file with the following file header, adjusting the values of each field to best describe your experiment (All fields are optional):
When your stylesheet is ready, visit Settings > Design Experiments
. Select your experiment to activate it and view your changes.
Once you're ready to share your experiment, open a PR and share it here.
npm install
to install dependencies (You'll only have to do this once).npm run build
to compile the CSS once, or npm run watch
to have it compile changes whenever you modify a sass file.If you'd like to propose improvements to this plugin, feel free to open an issue or PR. Also feel free to ask in the #design channel on WordPress.org Slack.
/*
Title: Your Experiment Title
Description: A description of your experiment.
PR: https://
*/
Download Details:
Author: WordPress
Official Github: https://github.com/WordPress/design-experiments
License: GPL-3.0 license