Git Product home page Git Product logo

style-manager's Introduction

Style Manager - Auto-magical system to style your WordPress site

With Style Manager, developers can easily create advanced theme-specific options inside the WordPress Customizer. Using those options, a user can make presentational changes without having to know or edit the theme code.

This plugin is primarily intended to be used together with Pixelgrade themes. So the best way to get acquainted with its capabilities is to study the way Pixelgrade's Anima universal theme integrates with it.

Made with care by Pixelgrade

Completely compatible with the following WordPress themes:

How to use it?

First you need to install and activate the stable version. This will always be on wordpress.org

Now go to ‘Appearance -> Customize’ menu and have fun with the new fields provided by your active theme.

WordPress Developer Love

We know developers are a special kind of breed and that they need special kinds of treats. That is why we have introduced options dedicated to them.

Reset Buttons

In the plugin's settings page (WordPress Dashboard > Settings > Style Manager) you will find a checkbox called Enable Reset Buttons that once activated will show a new Customizer section called Style Manager Toolbox and also introduce buttons in each section or panel configured via the plugin.

All these buttons will reset the options to their default values.

Continuous Default Values

If you want to go even further, there is a nuclear option. Simply define the STYLE_MANAGER_DEV_FORCE_DEFAULTS constant to true and everywhere the default value will be used. You can play with the values in the Customizer and the live preview will work, but no value gets saved in the database.

Add this in your wp-config.php file:

define( 'STYLE_MANAGER_DEV_FORCE_DEFAULTS', true);

Developing Style Manager

Before you can get developing, you need to have node and composer (v2) installed globally. Google is your best friend to get you to the resource to set things up.

Once you clone the Git repo, to get started open a shell/terminal in the cloned directory and run these from the command line (in this order):

composer run dev-install

npm run dev

This will set up all node_modules, composer packages, and compile the scripts and styles with watchers waiting for your next move.

Local Environment Setup Pointers

You need to be careful since we require certain node versions (v14) and PHP versions (v7.4).

For ease of development, it is best to use nvm (https://github.com/nvm-sh/nvm) for node version management and automatic node version switching on shell navigation. For the zsh shell the easiest way is to use oh-my-zsh with the nvm plugin activated.

We use the following oh-my-zsh plugins: plugins=(composer git nvm npm) configured in ~/.zshrc. For automatic node version switching, place this line in ~/.zshrc just below the plugins line: NVM_AUTOLOAD=1. Now whenever you enter a directory through the shell, if it finds a .nvmrc file, it will switch to the specified node version.

Easy experimentation with design assets

To avoid the hassle and bustle of editing design assets on the cloud and then refreshing your local WordPress installation (ad infinitum), you can use this must-use plugin that contains the logic to automatically load and inject locally-defined, JSON-based design assets.

Simply download the zip and extract it in your local WordPress installation's wp-content/mu-plugins directory (the style-manager-local-dev.php and style-manager-local-dev need to be directly in the mu-plugins directory, not in a subdirectory, since WordPress will not recognize it as mu-plugin otherwise).

Next go to the style-manager-local-dev directory and remove/add/edit anything you want. The starting directories and files are just there to help you get started. You don't need to keep all of them.

Please note that there are further instructions in the mu-plugin's code.

Building The Release .zip

Since Style Manager is intended for distribution on WordPress.org you will need to build the plugin files, transpile them to the appropriate PHP version (7.1), and generate a cleaned-up zip.

After you have updated the version, added the changelog, blessed everything, you NEED to clone the repo in a TEMPORARY directory since the build process is DESTRUCTIVE!!!

From the newly cloned, temporary directory, run these commands from the command line:

nmp install

npm run zip

Running Unit Tests

To run the PHPUnit tests, in the root directory of the plugin, run something like:

./vendor/bin/phpunit --testsuite=Unit --colors=always

or

composer run tests

Bear in mind that there are simple unit tests (hence the --testsuite=Unit parameter) that are very fast to run, and there are integration tests (--testsuite=Integration) that need to load the entire WordPress codebase, recreate the db, etc. Choose which ones you want to run depending on what you are after.

Important: Before you can run the tests, you need to create a .env file in tests/phpunit/ with the necessary data. You can copy the already existing .env.example file. Further instructions are in the .env.example file.

License

GPLv2 and later, of course!

Thanks!

This plugin also includes the following third-party libraries:

2020-2022 © Pixelgrade.

style-manager's People

Contributors

dependabot[bot] avatar georgeolaru avatar madalingorbanescu avatar razwan avatar vladolaru avatar

Stargazers

 avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Forkers

asok17

style-manager's Issues

Style Manager disappears from browser side bar

I am working with one of your themes and when I select the Style Manager in the sidebar and then the arrow to see the options, the Style Manager disappears from the sidebar altogether. It appears to be a conflict with the recommended version of the Gutenberg plugin - version 15.1.0. When I downgrade the plugin to version 15.0.1, the Style Manager functions as expected BUT it is causing issues with the templates as they require the upgraded version of Gutenberg.

Submitting feedback not working

After playing around with the Style Manager I get the feedback pop-up. I tried to write some feedback and send it over but pressing the button does nothing.

CleanShot.2021-07-27.at.11.31.33.mp4

Critical error when activating plugin due to incompatible Carbon Fields

Sorry, the attached image is in Dutch, but I think you can understand the message. I used Customify and need to upgrade to Style Manager.

After activating the plugin, the /wp-admin can no longer be reached and needs to be recovered in recovery mode.

Got this from the apache logs:


[Wed Jul 28 10:43:05.876072 2021] [proxy_fcgi:error] [pid 25494:tid 139890356279040] [client 185.58.53.95:51060] AH01071: Got error 'PHP message: PHP Fatal error: Declaration of Pixelgrade\StyleManager\Provider\PluginSettingsCFDatastore::load($field) must be compatible with Carbon_Fields\Datastore\Datastore_Interface::load(Carbon_Fields\Field\Field $field) in /opt/bitnami/apps/wordpress/htdocs/wp-content/plugins/style-manager/src/Provider/PluginSettingsCFDatastore.php on line 12\n',

Carbon_Fields

Exiting the Customizer causes issues in the Admin bar

When I enter the Customizer while viewing a specific page and then press the X (exit) button, the page URL contains some new text elements and the following happen:

  • some options from the Admin bar dissapear (like the Edit page button)
CleanShot.2021-07-28.at.11.06.17.mp4
  • pressing the Customize button again seems to generate an Error
CleanShot.2021-07-28.at.11.10.18.mp4

This happens only when I have the Style Manager plugin activated and seems to happen regardles of the active theme. I tested using Tw-Tw-One and the same thing happened.

Can't reorder/nest Menu Items from Customizer

I can't seem to be able to nest or properly reorder Menu Items from the Customizer while I have the Style Manager plugin active. This is how it looks like:

CleanShot.2021-07-28.at.12.26.26.mp4

When I deactivate it, everything is back to normal. I'm using Style Manager 2.0.4

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.