Skip to content
A simple plugin for WP-Admin design experiments. Brought to you by the WordPress Design Team.
CSS PHP
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
assets Header Experiment: Expand to all settings pages Jun 13, 2019
css Merge pull request #16 from WordPress/try/new-focus-states-and-button… Sep 9, 2019
sass Merge pull request #16 from WordPress/try/new-focus-states-and-button… Sep 9, 2019
.gitignore Initial commit Apr 30, 2019
CODE_OF_CONDUCT.md Adds in code of conduct May 8, 2019
CONTRIBUTING.md Adding contributing.md May 8, 2019
CONTRIBUTORS.md Update contributors list Jun 5, 2019
LICENSE Initial commit Apr 30, 2019
README.md
index.php
package-lock.json Add new color variables Aug 23, 2019
package.json
readme.txt Update plugin version and changelog. Sep 9, 2019

README.md

Design Experiments Plugin

⚠️ This plugin is not intended for use on a production site.

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.

To try an experiment:

  1. Install the Design Experiments plugin from the WordPress Plugins Directory
  2. Activate the plugin.
  3. Visit Settings > Design Experiments to activate an experiment.

To build your own quick experiment:

  1. First, fork the repository.
  2. 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).
  3. For simple CSS updates, you can either edit 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.

To submit an experiment for inclusion in the plugin:

  1. Fork the repository.

  2. 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).

  3. 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.

  4. Begin your CSS file with the following file header, adjusting the values of each field to best describe your experiment (All fields are optional):

    /*
    Title: Your Experiment Title
    Description: A description of your experiment.
    PR: https://
    */
    
  5. When your stylesheet is ready, visit Settings > Design Experiments. Select your experiment to activate it and view your changes.

  6. Once you're ready to share your experiment, open a PR and share it here.

To compile CSS:

  1. Run npm install to install dependencies (You'll only have to do this once).
  2. Run npm run build to compile the CSS once, or npm run watch to have it compile changes whenever you modify a sass file.

Questions or Improvements?

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.

You can’t perform that action at this time.