Skip to content

Global Styles: Style Cards and Style Cards Editor

Svitlana edited this page Sep 4, 2020 · 7 revisions

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

Themes, styles and elements

Maxi Blocks will have next themes for start:

  1. Default
  2. Mint
  3. Elegance
  4. Candy
  5. 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

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.

Style Cards

A Style Card represents a theme. Each Style Card has two sets of settings: dark and light. Each set has 15 options (listed above).

Maxi Cloud (Style Cards)

https://ge-library.dev700.com/style-cards-search/ cloud-style-cards

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.

Style Cards on the user's site

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

prefix_maxi_blocks_general table structure

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 =====================================

Customizer

Maxi Blocks have a panel on Customizer from where Global Styles can be changed.

Connecting Customizer and Gutenberg

Facing the fact that Customizer is a PHP based and Gutenberg is JS based, connection has been done in two ways:

1. Root styling variables

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:

  1. 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.
  2. In case there has been changes on Customizer, that options will fill variables using ./customizer/class_customizer_model.php class and will be displayed.

2. API

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.

Clone this wiki locally