-
Notifications
You must be signed in to change notification settings - Fork 8
Global Styles: Style Cards and Style Cards Editor
This document pretends to give more information about how Global Styles have to work on Maxi Blocks.
Terms:
Theme = Style Card
Customizer = Style Cards Editor
Cloud = (Cloud) maxi library
Maxi Blocks will have next themes for start:
- Default
- Mint
- Elegance
- Candy
- Bumblebee
Expect us to have 100+ different Style Cards in the future. We provide the themes listed above by default, with the plugin.
Each theme will have two different styles: dark and light. And every combination of theme > style we will have options for:
- Background 1
- Background 2
- Highlight (can also use for the a:visited)
- Hover (+ a:active state)
- Paragraph, li
- Hyperlink (a)
- Heading 1 (h1)
- Heading 2 (h2)
- Heading 3 (h3)
- Heading 4 (h4)
- Heading 5 (h5)
- Heading 6 (h6)
- Icon color 1
- Icon color 2
- Icon color 3
Blocks normally have BlockStylesControl that contains two selectors: Block Styles and Default Block Styles. Block Styles selector, in case of single block or first hierarchy block, will have three options: Dark, Light and Custom. Just in Custom selected option on Block Styles selector, Default Block Styles selector will appear. Default Block Styles have two options: Dark and Light.
Parent blocks or wrapper blocks determines the styles of inner blocks in order to avoid conflicts. It means that, if parent is Dark selected on Block Styles selector, children will have just two choices on Block Styles selector: Parent or Custom. On Parent selection children will follow Parent Styles.
If Block Style selector is not on Custom option or children block is on Parent option, settings on sidebar should disappear; i.g. on Text Maxi block, if Dark style is selected, TypographyControl should disappear due to the fact that Global Styles will have control over that styling.
If Block Style selector is on Custom option, Default Block Style will appear. In that case, i.g. if Dark is selected and that block doesn't contain any Background option created, Dark style will affect it.
A Style Card represents a theme. Each Style Card has two sets of settings: dark and light. Each set has 15 options (listed above).
https://ge-library.dev700.com/style-cards-search/
User can save (and apply) a theme directly from the cloud.
Each Style Card's structure kept in a json file, that is sent from the cloud to the user site and saved to the store (and, optionally, applied right away to the site).
An example of a json code: https://storage.googleapis.com/plugin-files/maxi-blocks/mint.json
Need to hide or gray out the Style Cards in the Cloud that user already saved.
PSD: https://drive.google.com/file/d/1c_wJDOVB2lPqOT8vRU2fZ4eEoe9Rq3uY/view?usp=sharing
Main js files for the sidebar: src/global/customizer-maxi
API routers are in the API/class-maxi-blocks-api.php
Store is in src/extensions/store-global
Note: the table is created on Maxi activation. To re-create it, please DROP current prefix_maxi_blocks_general table, then deactivate and activate the plugin. The table set up is in the main plugin.php file.
Note: we agreed to ship our plugin with 2 themes by default, so user could use them without going to the cloud. So options for the dropdown by default are No Style Card, Default (rename to Maxi - the orange one), Mint
id | object |
---|---|
style_cards_current_global_style_name | none |
style_cards_current_global_style | Current styles object name ( style_cards_saved_cards_default_card) |
style_cards_saved_cards | none, default, mint, elegance... |
style_cards_saved_cards_default_card_defaut | Default styles object for Default |
style_cards_saved_cards_mint_card_default | Default styles object for Mint |
style_cards_saved_cards_elegance_card_default | Default styles object for Elegance |
... | ... |
style_cards_saved_cards_default_card | Current styles object for Default |
style_cards_saved_cards_mint_card | Current styles object for Mint |
style_cards_saved_cards_elegance_card | Current styles object for Elegance |
... | ... |
=================================== DEPRECATED =====================================
Maxi Blocks have a panel on Customizer from where Global Styles can be changed.
Facing the fact that Customizer is a PHP based and Gutenberg is JS based, connection has been done in two ways:
First, a list of files used in this process:
-
./customizer/css/maxi-themes-styles.scss
: Assing to every {theme > style > element} a variable with a structured name like:--#{theme}-{style}-{element}-{property}
=> i.g. --#Default-dark-h1-font-family -
customizer/css/default-styles.scss
: Assing default values to :root for every {theme > style > element } (for the moment just contents for Default theme) -
./customizer/class_customizer_model.php
: extending Customizer class, this one retrieves the values saved from Customizer and generates an inline style that fills the main variables.
Once ./customizer/css/maxi-themes-styles.scss
stablished the variables, the layour of the process works like this:
- In case there has not been any changes on Customizer, default style properties from
customizer/css/default-styles.scss
will affect blocks with Dark or Light option. - In case there has been changes on Customizer, that options will fill variables using
./customizer/class_customizer_model.php
class and will be displayed.
First, a list of files used in this process:
-
./API/class-maxi-styles-api.php
: generates a custom API for Maxi Blocks that retrieves the settings saved from Customizer. -
./src/extensions/store/index.js
: creates a store that connects Gutenberg with Maxi Blocks new API creating some methods for actions as select or dispatch.
This method connects Customizer saved settings values with Gutenberg.