Add Connected Fields Options

[georgeolaru]

Primul pas in oferirea unui nou layer de optiuni, mai simplificat, mai consistent si mai aproape de nevoile utilizatorilor, ar fi sa oferim posibilitatea ca un field sa poata controla deodata mai multe field-uri (de acelasi tip).

Un exemplu concret e un field de Main Color care in momentul modificarii lui, schimba automat culoarea la Heading 1, Page Title si Card Title.

Propunerea mea e sa extindem config-ul actual astfel incat sa putem conecta o optiune parinte de un child:

"color_palette_main" => {
    "type"      => "color",
    'selector'  => ".blob_style_1",
    "connected"     => {
        "blog_item_title_color",
        "main_content_heading_1_color",
        "main_content_page_title_color"
    }
}

"color_palette_secondary" => {…}
"color_palette_tertiary" => {…}
"color_palette_background" => {…}

—— Pasul urmator, inainte sa generam dinamic paletele de culori, e sa scriem manual o lista de preset-uri care sa se aplice inlantuit → la culorile parinte → respectiv la culorile copiilor.

@pixelgrade/everybody va invit sa nu ezitati sa va spuneti parerea, fiecare avand o alta perspectiva utila in evolutia issue-ului.

[vladolaru]

@georgeolaru Crezi ca putem refolosi ceva din logica de Style Presets: https://github.com/pixelgrade/customify#presets ?

[georgeolaru]

@vladolaru sigur ca putem folosi, propunerea mea e oricum destul de asemanatoare. Doar ca acolo sunt combinate cumva 2-in-1 (preset + culori/fonturi).

Cum ar arata structura in contextul unei singure optiuni (eg. Accent Color)?

[vladolaru]

@georgeolaru Nu are importanta daca preluam de acolo sau nu. Oricum un preset ar trebui sa poata controla orice fel de optiune (inclusiv fonturi).

Ce am eu nevoie ca sa pot avea o abordare sanatoasa, este sa imi povestesti putin despre tinta pe termen lung in ceea ce privesc preset-urile, situatia ideala daca vrei, chiar daca o vom atinge peste mult timp, sau niciodata. Fara detalii tehnice cum ai pus mai sus, ci ca flow de lucru pentru noi si pentru utilizatori.

[georgeolaru]

@vladolaru Ceea ce am sugerat in issue-ul asta, e primul pas catre acel sistem universal de preset-uri, aplicabil cu usurinta pentru toate temele noastre. As sugera sa nu discutam mai multe despre el, acum, ci sa ne concentram sa vedem cum putem face cat mai bine acest pas, aceste optiuni inlantuite.

Apoi, in functie de ce aflam, ne orientam catre urmatorii pasi, care ar putea arata asa:

1. Un sistem universal de configurare pentru optiunile de culori (un layer peste config-ul actual din componente/tema)
2. Crearea manuala a 4x Style Colors Presets si testarea lor pe temele din club
3. Extinderea sistemului de la culori la Fonts Presets (4x fonts presets, config)
4. Crearea unui punct extern (API) de definire a preseturile (eg. un config asemanator celui de la Pixelgrade Care)
5. Implementarea unui sistem de Style Presets per Membru (Definire, Salvare, Reutilizare), salvat pe Pixelgrade, undeva in zona de My Account.

Sper sa te ajute.

[vladolaru]

Oky doky! Eu zic ca am facut logica de connected fields pe branch-ul https://github.com/pixelgrade/customify/compare/96-connected-fields

Setarea e asa cum a definit-o @georgeolaru mai sus, adica in configuratia din tema a unui field din Customizer poate aparea intrarea connected_fields like so:

'accent_color' => array(
    'type'    => 'color',
    'label'   => esc_html__( 'Accent Color', '__theme_txtd' ),
    'live'    => true,
    'default' => THEME_MAIN_COLOR,
    'connected_fields' => array(
        'blob_main_color',
        'header_links_active_color',
    ),
),

Merge pentru toate tipurile de field-uri, inclusiv fonturi. Comportamentul este sa copie 1-la-1 valoarea din field-ul parinte in field-urile conectate.

Comportamentele field-urilor la updatarea valorii de genul refresh la preview, live CSS modifications, etc functioneaza ca si pana acum. Nu am schimbat nimic acolo.

Suporta modificari in cascada si nu are mecanisme de anti-looping - asta tine de cel care conecteaza field-urile sa se asigure ca formeaza un arbore aciclic (ce frumos am spus :) ).

Daca vrei sa va jucati un pic si sa imi spuneti daca am ratat ceva v-as fi recunoascator.

[vladolaru]

Am facut un pull-request: https://github.com/pixelgrade/customify/pull/99

[georgeolaru]

@vladolaru Nice nice nice 👏 https://cl.ly/3S0t2u0R2e1P