Git Product home page Git Product logo

wp-block-styles's Introduction

wp-block-styles

WP Block styles are custom styles for existing blocks in the WordPress editor.

The master plan

This is only the beginning of a library of custom block styles.

The block styles will be divided into their respective categories and blocks.

Each block style will be placed in its own folder, and consist of:

A PHP file for enqueuing block files.

A js file that names and adds the new style.

A css file with the actual style.

A png file with a preview of the style.

Previews

Preview of the image shadow block style example: Shadow block style preview

Preview of the paragraph "Notice: Success" style example: Success block style preview

How to use

To test all the block styles, you do not need to download the entire project. Instead download the following files from the main directory:

wp-block-styles.php, all-block-styles.css, all-block-styles.js.

Place the files in your theme directory. Include the wp-block-styles.php, or copy the code from the file to your themes functions.php file. Rename the prefix and the text domain.

To test individual block styles, select the folder for the category that your block type is in. Then select the block type.

For example, if you are looking for custom styles for images, you would open common -> images and select the style you are interested in.

When using the code, you need to update the prefix and the text domain. The PHP code can be copied and pasted into your theme file, or, if you want to use it as a separate file, make sure that you include it.

Note: The PHP code is intended for themes and uses 'get_theme_file_uri'.

And, if you are using more than one block style, please remember to combine them into one file: Don't use two separate js files and two css files for such minor changes! Or even better, add the code to your themes existing files.

How to contribute

You are welcome to submit issues, ideas and pull requests. -If you would like to add a style, you do not need to open an issue first, you can simply do a pr.

Naming

Please select a short but descriptive name for the block styles.

wp-block-styles's People

Contributors

carolinan avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

Forkers

ngooding

wp-block-styles's Issues

Naming and prefixing

Examples consists of 3 files: the CSS file, the JS file and the PHP file which enqueues the files.

Files could either be prefixed with their block name (slug) to separate them more easily,
-or they could all be named block-style.js and block-style.css and only be separated by placing them in their respective folders, and by the file headers.

By not adding a prefix to the JS and CSS file names, and by not adding a style specific prefix to the file handles, the PHP file could essentially be removed from the examples, because all PHP files would be identical.

Instead an example PHP file could be placed in the main folder.

The decision needs to be made with a possible plugin generator in mind, where the PHP file would not be used anyway.

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.