Styling API is the responsable of retrieving styles not just for frontend, for backend too, considering the responsive styles. Is recommended to have read and understood Blocks and MaxiBlock Component article

On the path ./API/class-maxi-blocks-api.php we found the MaxiBlocksAPI. For styling it creates a new option for every post that contains an array with 2 options:

• '_maxi_blocks_styles': saves the styles for published posts.
• '_maxi_blocks_styles_preview': normally saved on this one, retrieve the styles just for previewing. It contains two routes, one for GET and another for POST. So, this is the way styles are saved and loaded.

In order to generate the connection between blocks and MaxiBlocksAPI has been generated a store for MaxiBlocks. It contains a selector for GET from API, and a dispatcher for POST to API:

• select('maxiBlocks').receiveMaxiStyles(): retrieve the last state of the styles.
• dispatch('maxiBlocks').saveMaxiStyles(): modifies and sends to API the last state of the styles.

As commented on the point num. 4 of Life cycle on MaxiBlock Component, MaxiBlock component uses the class 'ResponsiveStylesResolver' for extend/update the object that will be saved on MaxiBlocksAPI with the styles information. The object this class retrieves has this structure:

{
    text-maxi-1: {
        breakpoints: {
            general: xxxx,
            xl: xxxx,
            l: xxxx,
            m: xxxx,
            s: xxxx,
            xs: xxxx,
        },
        content: {
            Background: {
                general: {
                    'background-color': '#fff'
                },
                m: {
                    'background-color': '#000'
                },
            }
        }
    }
}

In this example, the element with the class 'text-maxi-1' will have two different background: one with #fff that will affect all screens until it arrives to the 'M' breakpoint value where it will change to #000.

As commented on the point num. 3 of Life cycle on MaxiBlock Component, MaxiBlocks component displays the styles ones the meta is saved using the MaxiBlocksStore dispatch action for it. In this case it uses the class BackEndResponsiveStyles for updating the element '<style>' appended on the head for retrieving styles. For more information, please referr to Displaying responsive on backend

In case of frontend, the plugin uses a similar class than BackEndResponsiveStyles but in PHP language and with real '@media'. This class can be found ./src/includes/classes/class-responsive-frontend-block-styles.php and is the responsable to generate a '<style>' element on the head when frontend and to load the fonts.

When using the class ResponsiveStylesResolver for creating the meta object that is used after for creating stylings, is required an object with precise structure. At same time, this object also contains an object for every component used that needs to follow an specific structure. Let's show and analyse this two objects:

Some components needs huge attributes for settings. For example, TypographyControl needs 15 attributes for each of the 6 responsive stages: this generate the necessity for 90 attributes. This insane quantity of attributes repeats on other components as BorderControl or FullSizeControl, and can finally result on blocks with hundred, if not thousands, of attributes. The way to solve this situation and to make a standard process that helps also with styling is to create objects that are stringified on saving and parsed when using them.

All this objects share same structure:

{
    label: 'Name of the object',
    unit: 'px', (*1)
    general: {
        'max-widthUnit': 'px', (*2)
        'max-width': 0 (*3)
    },
    xl: {
        'max-widthUnit': '', (*4)
        'max-width': ''
    },
    l: {
        'max-widthUnit': '',
        'max-width': ''
    },
    m: {
        'max-widthUnit': '',
        'max-width': ''
    },
    s: {
        'max-widthUnit': '',
        'max-width': ''
    },
    xs: {
        'max-widthUnit': '',
        'max-width': '' (*5)
    }
}
*1: optional in case all the components shares just one point for unit. Is the case of BorderControl. (review issue #258)
*2: in case of needing an option for the unit of some property, there are two conditions: first, in terms of order, unit should go before the value as in the example; second, unit should have same name than value's key with word 'Unit' following it (would look like `${propertyName}Unit`).
*3: unless we use a [handler](#handlers), object properties should have the name we expect to show in CSS. Also, objects doesn't accept '-' as part of their keys, so sometimes we have to use "'" for naming.
*4: normally, for responsive elements, is necessary to leave them empty. In case of setting a value, would be given to that element on that concrete responsive stage.
*5: all responsive stage objects should contain all properties. If not, component may break.

Normally, all components that uses an object as attribute contains an 'object.json' file on its own folder. For more information about these objectes, please refer to real examples on the plugin.

The file ./src/extensions/styles/defaults.js contains all the default objects for components. In case of need a different object with default properties, use data.js on the specific folder of the block as is recommended on [Blocks and MaxiBlock component - structuring section] (https://github.com/yeahcan/maxi-blocks/wiki/Blocks-and-MaxiBlock-component#structuring)

Sometimes, as it happens with BackgroundControl, the object provided can't return the exact object as it has been presented on 1.1. In this case is necessary to use a handler to help ourselves to generate this specific object, and for that we use the helpers that can be find on ./src/extensions/styles/utils.js.

As is explained in the step 4 of Life cycle on MaxiBlock Component of Block and MaxiBlock component article, the block retrieves the object that will be used by ResponsiveStylesResolver using the getter getObject.

All this objects share same structure:

{
    maxi-text-block: { (*1)
        size: { (*2)
            label: 'Name of the object',
            unit: 'px',
            general: {
                'max-widthUnit': 'px',
                'max-width': 0 
            },
            xl: {
                'max-widthUnit': '',
                'max-width': ''
            },
            l: {
                'max-widthUnit': '',
                'max-width': ''
            },
            m: {
                'max-widthUnit': '',
                'max-width': ''
            },
            s: {
                'max-widthUnit': '',
                'max-width': ''
            },
            xs: {
                'max-widthUnit': '',
                'max-width': ''
            }
        }
    }
}
*1: key should be target to attempt. First part should be a class without the dot, and can be as long as need.
*2: component object