123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527152815291530153115321533153415351536153715381539154015411542154315441545154615471548154915501551155215531554155515561557155815591560156115621563156415651566156715681569157015711572157315741575157615771578157915801581158215831584158515861587158815891590159115921593159415951596159715981599160016011602160316041605160616071608160916101611161216131614161516161617161816191620162116221623162416251626162716281629163016311632163316341635163616371638163916401641164216431644164516461647164816491650165116521653165416551656165716581659166016611662166316641665166616671668166916701671167216731674167516761677167816791680168116821683168416851686168716881689169016911692169316941695169616971698169917001701170217031704170517061707170817091710171117121713171417151716171717181719172017211722172317241725172617271728172917301731173217331734173517361737173817391740174117421743174417451746174717481749175017511752175317541755175617571758175917601761176217631764176517661767176817691770177117721773177417751776177717781779178017811782178317841785178617871788178917901791179217931794179517961797179817991800180118021803180418051806180718081809181018111812181318141815181618171818181918201821182218231824182518261827182818291830183118321833183418351836183718381839184018411842184318441845184618471848184918501851185218531854185518561857185818591860186118621863186418651866186718681869187018711872187318741875187618771878187918801881188218831884188518861887188818891890189118921893189418951896189718981899190019011902190319041905190619071908190919101911191219131914191519161917191819191920192119221923192419251926192719281929193019311932193319341935193619371938193919401941194219431944194519461947194819491950195119521953195419551956195719581959196019611962196319641965196619671968196919701971197219731974197519761977197819791980198119821983198419851986198719881989199019911992199319941995199619971998199920002001200220032004200520062007200820092010201120122013201420152016201720182019202020212022202320242025202620272028202920302031203220332034203520362037203820392040204120422043204420452046204720482049205020512052205320542055205620572058205920602061206220632064206520662067206820692070207120722073207420752076207720782079208020812082208320842085208620872088208920902091209220932094209520962097209820992100210121022103210421052106210721082109211021112112211321142115211621172118211921202121212221232124212521262127212821292130213121322133213421352136213721382139214021412142214321442145214621472148214921502151215221532154215521562157215821592160216121622163216421652166216721682169217021712172217321742175217621772178217921802181218221832184218521862187218821892190219121922193219421952196219721982199220022012202220322042205220622072208220922102211221222132214221522162217221822192220222122222223222422252226222722282229223022312232223322342235223622372238223922402241224222432244224522462247224822492250225122522253225422552256225722582259226022612262226322642265226622672268226922702271227222732274227522762277227822792280228122822283228422852286228722882289229022912292229322942295229622972298229923002301230223032304230523062307230823092310231123122313231423152316231723182319232023212322232323242325232623272328232923302331233223332334233523362337233823392340234123422343234423452346234723482349235023512352235323542355235623572358235923602361236223632364236523662367236823692370237123722373237423752376237723782379238023812382238323842385238623872388238923902391239223932394239523962397239823992400240124022403240424052406240724082409241024112412241324142415241624172418241924202421242224232424242524262427242824292430243124322433243424352436243724382439244024412442244324442445244624472448244924502451245224532454245524562457245824592460246124622463246424652466246724682469247024712472247324742475247624772478247924802481248224832484248524862487248824892490249124922493249424952496249724982499250025012502250325042505250625072508250925102511251225132514251525162517251825192520252125222523252425252526252725282529253025312532253325342535253625372538253925402541254225432544254525462547254825492550255125522553255425552556255725582559256025612562256325642565256625672568256925702571257225732574257525762577257825792580258125822583258425852586258725882589259025912592259325942595259625972598259926002601260226032604260526062607260826092610261126122613261426152616261726182619262026212622262326242625262626272628262926302631263226332634263526362637263826392640264126422643264426452646264726482649265026512652265326542655265626572658265926602661266226632664266526662667266826692670267126722673267426752676267726782679268026812682268326842685268626872688268926902691269226932694269526962697269826992700270127022703270427052706270727082709271027112712271327142715271627172718271927202721272227232724272527262727272827292730273127322733273427352736273727382739274027412742274327442745274627472748274927502751275227532754275527562757275827592760276127622763276427652766276727682769277027712772277327742775277627772778277927802781278227832784278527862787278827892790279127922793279427952796279727982799280028012802280328042805280628072808280928102811281228132814281528162817281828192820282128222823282428252826282728282829283028312832283328342835283628372838283928402841284228432844284528462847284828492850285128522853285428552856285728582859286028612862286328642865286628672868286928702871287228732874287528762877287828792880288128822883288428852886288728882889289028912892289328942895289628972898289929002901290229032904290529062907290829092910291129122913291429152916291729182919292029212922292329242925292629272928292929302931293229332934293529362937293829392940294129422943294429452946294729482949295029512952295329542955295629572958295929602961296229632964296529662967296829692970297129722973297429752976297729782979298029812982298329842985298629872988298929902991299229932994299529962997299829993000300130023003300430053006300730083009301030113012301330143015301630173018301930203021302230233024302530263027302830293030303130323033303430353036303730383039304030413042304330443045304630473048304930503051305230533054305530563057305830593060306130623063306430653066306730683069307030713072307330743075307630773078307930803081308230833084308530863087308830893090309130923093309430953096309730983099310031013102310331043105310631073108310931103111311231133114311531163117311831193120312131223123312431253126312731283129313031313132313331343135313631373138313931403141314231433144314531463147314831493150315131523153 |
- <?php
- /**
- * WP_Theme_JSON class
- *
- * @package WordPress
- * @subpackage Theme
- * @since 5.8.0
- */
- /**
- * Class that encapsulates the processing of structures that adhere to the theme.json spec.
- *
- * This class is for internal core usage and is not supposed to be used by extenders (plugins and/or themes).
- * This is a low-level API that may need to do breaking changes. Please,
- * use get_global_settings, get_global_styles, and get_global_stylesheet instead.
- *
- * @access private
- */
- #[AllowDynamicProperties]
- class WP_Theme_JSON {
- /**
- * Container of data in theme.json format.
- *
- * @since 5.8.0
- * @var array
- */
- protected $theme_json = null;
- /**
- * Holds block metadata extracted from block.json
- * to be shared among all instances so we don't
- * process it twice.
- *
- * @since 5.8.0
- * @since 6.1.0 Initialize as an empty array.
- * @var array
- */
- protected static $blocks_metadata = array();
- /**
- * The CSS selector for the top-level styles.
- *
- * @since 5.8.0
- * @var string
- */
- const ROOT_BLOCK_SELECTOR = 'body';
- /**
- * The sources of data this object can represent.
- *
- * @since 5.8.0
- * @since 6.1.0 Added 'blocks'.
- * @var string[]
- */
- const VALID_ORIGINS = array(
- 'default',
- 'blocks',
- 'theme',
- 'custom',
- );
- /**
- * Presets are a set of values that serve
- * to bootstrap some styles: colors, font sizes, etc.
- *
- * They are a unkeyed array of values such as:
- *
- * ```php
- * array(
- * array(
- * 'slug' => 'unique-name-within-the-set',
- * 'name' => 'Name for the UI',
- * <value_key> => 'value'
- * ),
- * )
- * ```
- *
- * This contains the necessary metadata to process them:
- *
- * - path => Where to find the preset within the settings section.
- * - prevent_override => Disables override of default presets by theme presets.
- * The relationship between whether to override the defaults
- * and whether the defaults are enabled is inverse:
- * - If defaults are enabled => theme presets should not be overriden
- * - If defaults are disabled => theme presets should be overriden
- * For example, a theme sets defaultPalette to false,
- * making the default palette hidden from the user.
- * In that case, we want all the theme presets to be present,
- * so they should override the defaults by setting this false.
- * - use_default_names => whether to use the default names
- * - value_key => the key that represents the value
- * - value_func => optionally, instead of value_key, a function to generate
- * the value that takes a preset as an argument
- * (either value_key or value_func should be present)
- * - css_vars => template string to use in generating the CSS Custom Property.
- * Example output: "--wp--preset--duotone--blue: <value>" will generate as many CSS Custom Properties as presets defined
- * substituting the $slug for the slug's value for each preset value.
- * - classes => array containing a structure with the classes to
- * generate for the presets, where for each array item
- * the key is the class name and the value the property name.
- * The "$slug" substring will be replaced by the slug of each preset.
- * For example:
- * 'classes' => array(
- * '.has-$slug-color' => 'color',
- * '.has-$slug-background-color' => 'background-color',
- * '.has-$slug-border-color' => 'border-color',
- * )
- * - properties => array of CSS properties to be used by kses to
- * validate the content of each preset
- * by means of the remove_insecure_properties method.
- *
- * @since 5.8.0
- * @since 5.9.0 Added the `color.duotone` and `typography.fontFamilies` presets,
- * `use_default_names` preset key, and simplified the metadata structure.
- * @since 6.0.0 Replaced `override` with `prevent_override` and updated the
- * `prevent_overried` value for `color.duotone` to use `color.defaultDuotone`.
- * @var array
- */
- const PRESETS_METADATA = array(
- array(
- 'path' => array( 'color', 'palette' ),
- 'prevent_override' => array( 'color', 'defaultPalette' ),
- 'use_default_names' => false,
- 'value_key' => 'color',
- 'css_vars' => '--wp--preset--color--$slug',
- 'classes' => array(
- '.has-$slug-color' => 'color',
- '.has-$slug-background-color' => 'background-color',
- '.has-$slug-border-color' => 'border-color',
- ),
- 'properties' => array( 'color', 'background-color', 'border-color' ),
- ),
- array(
- 'path' => array( 'color', 'gradients' ),
- 'prevent_override' => array( 'color', 'defaultGradients' ),
- 'use_default_names' => false,
- 'value_key' => 'gradient',
- 'css_vars' => '--wp--preset--gradient--$slug',
- 'classes' => array( '.has-$slug-gradient-background' => 'background' ),
- 'properties' => array( 'background' ),
- ),
- array(
- 'path' => array( 'color', 'duotone' ),
- 'prevent_override' => array( 'color', 'defaultDuotone' ),
- 'use_default_names' => false,
- 'value_func' => 'wp_get_duotone_filter_property',
- 'css_vars' => '--wp--preset--duotone--$slug',
- 'classes' => array(),
- 'properties' => array( 'filter' ),
- ),
- array(
- 'path' => array( 'typography', 'fontSizes' ),
- 'prevent_override' => false,
- 'use_default_names' => true,
- 'value_func' => 'wp_get_typography_font_size_value',
- 'css_vars' => '--wp--preset--font-size--$slug',
- 'classes' => array( '.has-$slug-font-size' => 'font-size' ),
- 'properties' => array( 'font-size' ),
- ),
- array(
- 'path' => array( 'typography', 'fontFamilies' ),
- 'prevent_override' => false,
- 'use_default_names' => false,
- 'value_key' => 'fontFamily',
- 'css_vars' => '--wp--preset--font-family--$slug',
- 'classes' => array( '.has-$slug-font-family' => 'font-family' ),
- 'properties' => array( 'font-family' ),
- ),
- array(
- 'path' => array( 'spacing', 'spacingSizes' ),
- 'prevent_override' => false,
- 'use_default_names' => true,
- 'value_key' => 'size',
- 'css_vars' => '--wp--preset--spacing--$slug',
- 'classes' => array(),
- 'properties' => array( 'padding', 'margin' ),
- ),
- );
- /**
- * Metadata for style properties.
- *
- * Each element is a direct mapping from the CSS property name to the
- * path to the value in theme.json & block attributes.
- *
- * @since 5.8.0
- * @since 5.9.0 Added the `border-*`, `font-family`, `font-style`, `font-weight`,
- * `letter-spacing`, `margin-*`, `padding-*`, `--wp--style--block-gap`,
- * `text-decoration`, `text-transform`, and `filter` properties,
- * simplified the metadata structure.
- * @since 6.1.0 Added the `border-*-color`, `border-*-width`, `border-*-style`,
- * `--wp--style--root--padding-*`, and `box-shadow` properties,
- * removed the `--wp--style--block-gap` property.
- * @var array
- */
- const PROPERTIES_METADATA = array(
- 'background' => array( 'color', 'gradient' ),
- 'background-color' => array( 'color', 'background' ),
- 'border-radius' => array( 'border', 'radius' ),
- 'border-top-left-radius' => array( 'border', 'radius', 'topLeft' ),
- 'border-top-right-radius' => array( 'border', 'radius', 'topRight' ),
- 'border-bottom-left-radius' => array( 'border', 'radius', 'bottomLeft' ),
- 'border-bottom-right-radius' => array( 'border', 'radius', 'bottomRight' ),
- 'border-color' => array( 'border', 'color' ),
- 'border-width' => array( 'border', 'width' ),
- 'border-style' => array( 'border', 'style' ),
- 'border-top-color' => array( 'border', 'top', 'color' ),
- 'border-top-width' => array( 'border', 'top', 'width' ),
- 'border-top-style' => array( 'border', 'top', 'style' ),
- 'border-right-color' => array( 'border', 'right', 'color' ),
- 'border-right-width' => array( 'border', 'right', 'width' ),
- 'border-right-style' => array( 'border', 'right', 'style' ),
- 'border-bottom-color' => array( 'border', 'bottom', 'color' ),
- 'border-bottom-width' => array( 'border', 'bottom', 'width' ),
- 'border-bottom-style' => array( 'border', 'bottom', 'style' ),
- 'border-left-color' => array( 'border', 'left', 'color' ),
- 'border-left-width' => array( 'border', 'left', 'width' ),
- 'border-left-style' => array( 'border', 'left', 'style' ),
- 'color' => array( 'color', 'text' ),
- 'font-family' => array( 'typography', 'fontFamily' ),
- 'font-size' => array( 'typography', 'fontSize' ),
- 'font-style' => array( 'typography', 'fontStyle' ),
- 'font-weight' => array( 'typography', 'fontWeight' ),
- 'letter-spacing' => array( 'typography', 'letterSpacing' ),
- 'line-height' => array( 'typography', 'lineHeight' ),
- 'margin' => array( 'spacing', 'margin' ),
- 'margin-top' => array( 'spacing', 'margin', 'top' ),
- 'margin-right' => array( 'spacing', 'margin', 'right' ),
- 'margin-bottom' => array( 'spacing', 'margin', 'bottom' ),
- 'margin-left' => array( 'spacing', 'margin', 'left' ),
- 'padding' => array( 'spacing', 'padding' ),
- 'padding-top' => array( 'spacing', 'padding', 'top' ),
- 'padding-right' => array( 'spacing', 'padding', 'right' ),
- 'padding-bottom' => array( 'spacing', 'padding', 'bottom' ),
- 'padding-left' => array( 'spacing', 'padding', 'left' ),
- '--wp--style--root--padding' => array( 'spacing', 'padding' ),
- '--wp--style--root--padding-top' => array( 'spacing', 'padding', 'top' ),
- '--wp--style--root--padding-right' => array( 'spacing', 'padding', 'right' ),
- '--wp--style--root--padding-bottom' => array( 'spacing', 'padding', 'bottom' ),
- '--wp--style--root--padding-left' => array( 'spacing', 'padding', 'left' ),
- 'text-decoration' => array( 'typography', 'textDecoration' ),
- 'text-transform' => array( 'typography', 'textTransform' ),
- 'filter' => array( 'filter', 'duotone' ),
- 'box-shadow' => array( 'shadow' ),
- );
- /**
- * Protected style properties.
- *
- * These style properties are only rendered if a setting enables it
- * via a value other than `null`.
- *
- * Each element maps the style property to the corresponding theme.json
- * setting key.
- *
- * @since 5.9.0
- */
- const PROTECTED_PROPERTIES = array(
- 'spacing.blockGap' => array( 'spacing', 'blockGap' ),
- );
- /**
- * The top-level keys a theme.json can have.
- *
- * @since 5.8.0 As `ALLOWED_TOP_LEVEL_KEYS`.
- * @since 5.9.0 Renamed from `ALLOWED_TOP_LEVEL_KEYS` to `VALID_TOP_LEVEL_KEYS`,
- * added the `customTemplates` and `templateParts` values.
- * @var string[]
- */
- const VALID_TOP_LEVEL_KEYS = array(
- 'customTemplates',
- 'patterns',
- 'settings',
- 'styles',
- 'templateParts',
- 'version',
- 'title',
- );
- /**
- * The valid properties under the settings key.
- *
- * @since 5.8.0 As `ALLOWED_SETTINGS`.
- * @since 5.9.0 Renamed from `ALLOWED_SETTINGS` to `VALID_SETTINGS`,
- * added new properties for `border`, `color`, `spacing`,
- * and `typography`, and renamed others according to the new schema.
- * @since 6.0.0 Added `color.defaultDuotone`.
- * @since 6.1.0 Added `layout.definitions` and `useRootPaddingAwareAlignments`.
- * @var array
- */
- const VALID_SETTINGS = array(
- 'appearanceTools' => null,
- 'useRootPaddingAwareAlignments' => null,
- 'border' => array(
- 'color' => null,
- 'radius' => null,
- 'style' => null,
- 'width' => null,
- ),
- 'color' => array(
- 'background' => null,
- 'custom' => null,
- 'customDuotone' => null,
- 'customGradient' => null,
- 'defaultDuotone' => null,
- 'defaultGradients' => null,
- 'defaultPalette' => null,
- 'duotone' => null,
- 'gradients' => null,
- 'link' => null,
- 'palette' => null,
- 'text' => null,
- ),
- 'custom' => null,
- 'layout' => array(
- 'contentSize' => null,
- 'definitions' => null,
- 'wideSize' => null,
- ),
- 'spacing' => array(
- 'customSpacingSize' => null,
- 'spacingSizes' => null,
- 'spacingScale' => null,
- 'blockGap' => null,
- 'margin' => null,
- 'padding' => null,
- 'units' => null,
- ),
- 'typography' => array(
- 'fluid' => null,
- 'customFontSize' => null,
- 'dropCap' => null,
- 'fontFamilies' => null,
- 'fontSizes' => null,
- 'fontStyle' => null,
- 'fontWeight' => null,
- 'letterSpacing' => null,
- 'lineHeight' => null,
- 'textDecoration' => null,
- 'textTransform' => null,
- ),
- );
- /**
- * The valid properties under the styles key.
- *
- * @since 5.8.0 As `ALLOWED_STYLES`.
- * @since 5.9.0 Renamed from `ALLOWED_STYLES` to `VALID_STYLES`,
- * added new properties for `border`, `filter`, `spacing`,
- * and `typography`.
- * @since 6.1.0 Added new side properties for `border`,
- * added new property `shadow`,
- * updated `blockGap` to be allowed at any level.
- * @var array
- */
- const VALID_STYLES = array(
- 'border' => array(
- 'color' => null,
- 'radius' => null,
- 'style' => null,
- 'width' => null,
- 'top' => null,
- 'right' => null,
- 'bottom' => null,
- 'left' => null,
- ),
- 'color' => array(
- 'background' => null,
- 'gradient' => null,
- 'text' => null,
- ),
- 'filter' => array(
- 'duotone' => null,
- ),
- 'shadow' => null,
- 'spacing' => array(
- 'margin' => null,
- 'padding' => null,
- 'blockGap' => null,
- ),
- 'typography' => array(
- 'fontFamily' => null,
- 'fontSize' => null,
- 'fontStyle' => null,
- 'fontWeight' => null,
- 'letterSpacing' => null,
- 'lineHeight' => null,
- 'textDecoration' => null,
- 'textTransform' => null,
- ),
- );
- /**
- * Defines which pseudo selectors are enabled for which elements.
- *
- * The order of the selectors should be: visited, hover, focus, active.
- * This is to ensure that 'visited' has the lowest specificity
- * and the other selectors can always overwrite it.
- *
- * See https://core.trac.wordpress.org/ticket/56928.
- * Note: this will affect both top-level and block-level elements.
- *
- * @since 6.1.0
- */
- const VALID_ELEMENT_PSEUDO_SELECTORS = array(
- 'link' => array( ':visited', ':hover', ':focus', ':active' ),
- 'button' => array( ':visited', ':hover', ':focus', ':active' ),
- );
- /**
- * The valid elements that can be found under styles.
- *
- * @since 5.8.0
- * @since 6.1.0 Added `heading`, `button`. and `caption` elements.
- * @var string[]
- */
- const ELEMENTS = array(
- 'link' => 'a:where(:not(.wp-element-button))', // The `where` is needed to lower the specificity.
- 'heading' => 'h1, h2, h3, h4, h5, h6',
- 'h1' => 'h1',
- 'h2' => 'h2',
- 'h3' => 'h3',
- 'h4' => 'h4',
- 'h5' => 'h5',
- 'h6' => 'h6',
- // We have the .wp-block-button__link class so that this will target older buttons that have been serialized.
- 'button' => '.wp-element-button, .wp-block-button__link',
- // The block classes are necessary to target older content that won't use the new class names.
- 'caption' => '.wp-element-caption, .wp-block-audio figcaption, .wp-block-embed figcaption, .wp-block-gallery figcaption, .wp-block-image figcaption, .wp-block-table figcaption, .wp-block-video figcaption',
- 'cite' => 'cite',
- );
- const __EXPERIMENTAL_ELEMENT_CLASS_NAMES = array(
- 'button' => 'wp-element-button',
- 'caption' => 'wp-element-caption',
- );
- /**
- * List of block support features that can have their related styles
- * generated under their own feature level selector rather than the block's.
- *
- * @since 6.1.0
- * @var string[]
- */
- const BLOCK_SUPPORT_FEATURE_LEVEL_SELECTORS = array(
- '__experimentalBorder' => 'border',
- 'color' => 'color',
- 'spacing' => 'spacing',
- 'typography' => 'typography',
- );
- /**
- * Returns a class name by an element name.
- *
- * @since 6.1.0
- *
- * @param string $element The name of the element.
- * @return string The name of the class.
- */
- public static function get_element_class_name( $element ) {
- $class_name = '';
- // TODO: Replace array_key_exists() with isset() check once WordPress drops
- // support for PHP 5.6. See https://core.trac.wordpress.org/ticket/57067.
- if ( array_key_exists( $element, static::__EXPERIMENTAL_ELEMENT_CLASS_NAMES ) ) {
- $class_name = static::__EXPERIMENTAL_ELEMENT_CLASS_NAMES[ $element ];
- }
- return $class_name;
- }
- /**
- * Options that settings.appearanceTools enables.
- *
- * @since 6.0.0
- * @var array
- */
- const APPEARANCE_TOOLS_OPT_INS = array(
- array( 'border', 'color' ),
- array( 'border', 'radius' ),
- array( 'border', 'style' ),
- array( 'border', 'width' ),
- array( 'color', 'link' ),
- array( 'spacing', 'blockGap' ),
- array( 'spacing', 'margin' ),
- array( 'spacing', 'padding' ),
- array( 'typography', 'lineHeight' ),
- );
- /**
- * The latest version of the schema in use.
- *
- * @since 5.8.0
- * @since 5.9.0 Changed value from 1 to 2.
- * @var int
- */
- const LATEST_SCHEMA = 2;
- /**
- * Constructor.
- *
- * @since 5.8.0
- *
- * @param array $theme_json A structure that follows the theme.json schema.
- * @param string $origin Optional. What source of data this object represents.
- * One of 'default', 'theme', or 'custom'. Default 'theme'.
- */
- public function __construct( $theme_json = array(), $origin = 'theme' ) {
- if ( ! in_array( $origin, static::VALID_ORIGINS, true ) ) {
- $origin = 'theme';
- }
- $this->theme_json = WP_Theme_JSON_Schema::migrate( $theme_json );
- $valid_block_names = array_keys( static::get_blocks_metadata() );
- $valid_element_names = array_keys( static::ELEMENTS );
- $theme_json = static::sanitize( $this->theme_json, $valid_block_names, $valid_element_names );
- $this->theme_json = static::maybe_opt_in_into_settings( $theme_json );
- // Internally, presets are keyed by origin.
- $nodes = static::get_setting_nodes( $this->theme_json );
- foreach ( $nodes as $node ) {
- foreach ( static::PRESETS_METADATA as $preset_metadata ) {
- $path = $node['path'];
- foreach ( $preset_metadata['path'] as $subpath ) {
- $path[] = $subpath;
- }
- $preset = _wp_array_get( $this->theme_json, $path, null );
- if ( null !== $preset ) {
- // If the preset is not already keyed by origin.
- if ( isset( $preset[0] ) || empty( $preset ) ) {
- _wp_array_set( $this->theme_json, $path, array( $origin => $preset ) );
- }
- }
- }
- }
- }
- /**
- * Enables some opt-in settings if theme declared support.
- *
- * @since 5.9.0
- *
- * @param array $theme_json A theme.json structure to modify.
- * @return array The modified theme.json structure.
- */
- protected static function maybe_opt_in_into_settings( $theme_json ) {
- $new_theme_json = $theme_json;
- if (
- isset( $new_theme_json['settings']['appearanceTools'] ) &&
- true === $new_theme_json['settings']['appearanceTools']
- ) {
- static::do_opt_in_into_settings( $new_theme_json['settings'] );
- }
- if ( isset( $new_theme_json['settings']['blocks'] ) && is_array( $new_theme_json['settings']['blocks'] ) ) {
- foreach ( $new_theme_json['settings']['blocks'] as &$block ) {
- if ( isset( $block['appearanceTools'] ) && ( true === $block['appearanceTools'] ) ) {
- static::do_opt_in_into_settings( $block );
- }
- }
- }
- return $new_theme_json;
- }
- /**
- * Enables some settings.
- *
- * @since 5.9.0
- *
- * @param array $context The context to which the settings belong.
- */
- protected static function do_opt_in_into_settings( &$context ) {
- foreach ( static::APPEARANCE_TOOLS_OPT_INS as $path ) {
- // Use "unset prop" as a marker instead of "null" because
- // "null" can be a valid value for some props (e.g. blockGap).
- if ( 'unset prop' === _wp_array_get( $context, $path, 'unset prop' ) ) {
- _wp_array_set( $context, $path, true );
- }
- }
- unset( $context['appearanceTools'] );
- }
- /**
- * Sanitizes the input according to the schemas.
- *
- * @since 5.8.0
- * @since 5.9.0 Added the `$valid_block_names` and `$valid_element_name` parameters.
- *
- * @param array $input Structure to sanitize.
- * @param array $valid_block_names List of valid block names.
- * @param array $valid_element_names List of valid element names.
- * @return array The sanitized output.
- */
- protected static function sanitize( $input, $valid_block_names, $valid_element_names ) {
- $output = array();
- if ( ! is_array( $input ) ) {
- return $output;
- }
- // Preserve only the top most level keys.
- $output = array_intersect_key( $input, array_flip( static::VALID_TOP_LEVEL_KEYS ) );
- /*
- * Remove any rules that are annotated as "top" in VALID_STYLES constant.
- * Some styles are only meant to be available at the top-level (e.g.: blockGap),
- * hence, the schema for blocks & elements should not have them.
- */
- $styles_non_top_level = static::VALID_STYLES;
- foreach ( array_keys( $styles_non_top_level ) as $section ) {
- // array_key_exists() needs to be used instead of isset() because the value can be null.
- if ( array_key_exists( $section, $styles_non_top_level ) && is_array( $styles_non_top_level[ $section ] ) ) {
- foreach ( array_keys( $styles_non_top_level[ $section ] ) as $prop ) {
- if ( 'top' === $styles_non_top_level[ $section ][ $prop ] ) {
- unset( $styles_non_top_level[ $section ][ $prop ] );
- }
- }
- }
- }
- // Build the schema based on valid block & element names.
- $schema = array();
- $schema_styles_elements = array();
- /*
- * Set allowed element pseudo selectors based on per element allow list.
- * Target data structure in schema:
- * e.g.
- * - top level elements: `$schema['styles']['elements']['link'][':hover']`.
- * - block level elements: `$schema['styles']['blocks']['core/button']['elements']['link'][':hover']`.
- */
- foreach ( $valid_element_names as $element ) {
- $schema_styles_elements[ $element ] = $styles_non_top_level;
- // TODO: Replace array_key_exists() with isset() check once WordPress drops
- // support for PHP 5.6. See https://core.trac.wordpress.org/ticket/57067.
- if ( array_key_exists( $element, static::VALID_ELEMENT_PSEUDO_SELECTORS ) ) {
- foreach ( static::VALID_ELEMENT_PSEUDO_SELECTORS[ $element ] as $pseudo_selector ) {
- $schema_styles_elements[ $element ][ $pseudo_selector ] = $styles_non_top_level;
- }
- }
- }
- $schema_styles_blocks = array();
- $schema_settings_blocks = array();
- foreach ( $valid_block_names as $block ) {
- $schema_settings_blocks[ $block ] = static::VALID_SETTINGS;
- $schema_styles_blocks[ $block ] = $styles_non_top_level;
- $schema_styles_blocks[ $block ]['elements'] = $schema_styles_elements;
- }
- $schema['styles'] = static::VALID_STYLES;
- $schema['styles']['blocks'] = $schema_styles_blocks;
- $schema['styles']['elements'] = $schema_styles_elements;
- $schema['settings'] = static::VALID_SETTINGS;
- $schema['settings']['blocks'] = $schema_settings_blocks;
- // Remove anything that's not present in the schema.
- foreach ( array( 'styles', 'settings' ) as $subtree ) {
- if ( ! isset( $input[ $subtree ] ) ) {
- continue;
- }
- if ( ! is_array( $input[ $subtree ] ) ) {
- unset( $output[ $subtree ] );
- continue;
- }
- $result = static::remove_keys_not_in_schema( $input[ $subtree ], $schema[ $subtree ] );
- if ( empty( $result ) ) {
- unset( $output[ $subtree ] );
- } else {
- $output[ $subtree ] = $result;
- }
- }
- return $output;
- }
- /**
- * Appends a sub-selector to an existing one.
- *
- * Given the compounded $selector "h1, h2, h3"
- * and the $to_append selector ".some-class" the result will be
- * "h1.some-class, h2.some-class, h3.some-class".
- *
- * @since 5.8.0
- * @since 6.1.0 Added append position.
- *
- * @param string $selector Original selector.
- * @param string $to_append Selector to append.
- * @param string $position A position sub-selector should be appended. Default 'right'.
- * @return string The new selector.
- */
- protected static function append_to_selector( $selector, $to_append, $position = 'right' ) {
- $new_selectors = array();
- $selectors = explode( ',', $selector );
- foreach ( $selectors as $sel ) {
- $new_selectors[] = 'right' === $position ? $sel . $to_append : $to_append . $sel;
- }
- return implode( ',', $new_selectors );
- }
- /**
- * Returns the metadata for each block.
- *
- * Example:
- *
- * {
- * 'core/paragraph': {
- * 'selector': 'p',
- * 'elements': {
- * 'link' => 'link selector',
- * 'etc' => 'element selector'
- * }
- * },
- * 'core/heading': {
- * 'selector': 'h1',
- * 'elements': {}
- * },
- * 'core/image': {
- * 'selector': '.wp-block-image',
- * 'duotone': 'img',
- * 'elements': {}
- * }
- * }
- *
- * @since 5.8.0
- * @since 5.9.0 Added `duotone` key with CSS selector.
- * @since 6.1.0 Added `features` key with block support feature level selectors.
- *
- * @return array Block metadata.
- */
- protected static function get_blocks_metadata() {
- $registry = WP_Block_Type_Registry::get_instance();
- $blocks = $registry->get_all_registered();
- // Is there metadata for all currently registered blocks?
- $blocks = array_diff_key( $blocks, static::$blocks_metadata );
- if ( empty( $blocks ) ) {
- return static::$blocks_metadata;
- }
- foreach ( $blocks as $block_name => $block_type ) {
- if (
- isset( $block_type->supports['__experimentalSelector'] ) &&
- is_string( $block_type->supports['__experimentalSelector'] )
- ) {
- static::$blocks_metadata[ $block_name ]['selector'] = $block_type->supports['__experimentalSelector'];
- } else {
- static::$blocks_metadata[ $block_name ]['selector'] = '.wp-block-' . str_replace( '/', '-', str_replace( 'core/', '', $block_name ) );
- }
- if (
- isset( $block_type->supports['color']['__experimentalDuotone'] ) &&
- is_string( $block_type->supports['color']['__experimentalDuotone'] )
- ) {
- static::$blocks_metadata[ $block_name ]['duotone'] = $block_type->supports['color']['__experimentalDuotone'];
- }
- // Generate block support feature level selectors if opted into
- // for the current block.
- $features = array();
- foreach ( static::BLOCK_SUPPORT_FEATURE_LEVEL_SELECTORS as $key => $feature ) {
- if (
- isset( $block_type->supports[ $key ]['__experimentalSelector'] ) &&
- $block_type->supports[ $key ]['__experimentalSelector']
- ) {
- $features[ $feature ] = static::scope_selector(
- static::$blocks_metadata[ $block_name ]['selector'],
- $block_type->supports[ $key ]['__experimentalSelector']
- );
- }
- }
- if ( ! empty( $features ) ) {
- static::$blocks_metadata[ $block_name ]['features'] = $features;
- }
- // Assign defaults, then overwrite those that the block sets by itself.
- // If the block selector is compounded, will append the element to each
- // individual block selector.
- $block_selectors = explode( ',', static::$blocks_metadata[ $block_name ]['selector'] );
- foreach ( static::ELEMENTS as $el_name => $el_selector ) {
- $element_selector = array();
- foreach ( $block_selectors as $selector ) {
- if ( $selector === $el_selector ) {
- $element_selector = array( $el_selector );
- break;
- }
- $element_selector[] = static::append_to_selector( $el_selector, $selector . ' ', 'left' );
- }
- static::$blocks_metadata[ $block_name ]['elements'][ $el_name ] = implode( ',', $element_selector );
- }
- }
- return static::$blocks_metadata;
- }
- /**
- * Given a tree, removes the keys that are not present in the schema.
- *
- * It is recursive and modifies the input in-place.
- *
- * @since 5.8.0
- *
- * @param array $tree Input to process.
- * @param array $schema Schema to adhere to.
- * @return array The modified $tree.
- */
- protected static function remove_keys_not_in_schema( $tree, $schema ) {
- $tree = array_intersect_key( $tree, $schema );
- foreach ( $schema as $key => $data ) {
- if ( ! isset( $tree[ $key ] ) ) {
- continue;
- }
- if ( is_array( $schema[ $key ] ) && is_array( $tree[ $key ] ) ) {
- $tree[ $key ] = static::remove_keys_not_in_schema( $tree[ $key ], $schema[ $key ] );
- if ( empty( $tree[ $key ] ) ) {
- unset( $tree[ $key ] );
- }
- } elseif ( is_array( $schema[ $key ] ) && ! is_array( $tree[ $key ] ) ) {
- unset( $tree[ $key ] );
- }
- }
- return $tree;
- }
- /**
- * Returns the existing settings for each block.
- *
- * Example:
- *
- * {
- * 'root': {
- * 'color': {
- * 'custom': true
- * }
- * },
- * 'core/paragraph': {
- * 'spacing': {
- * 'customPadding': true
- * }
- * }
- * }
- *
- * @since 5.8.0
- *
- * @return array Settings per block.
- */
- public function get_settings() {
- if ( ! isset( $this->theme_json['settings'] ) ) {
- return array();
- } else {
- return $this->theme_json['settings'];
- }
- }
- /**
- * Returns the stylesheet that results of processing
- * the theme.json structure this object represents.
- *
- * @since 5.8.0
- * @since 5.9.0 Removed the `$type` parameter`, added the `$types` and `$origins` parameters.
- *
- * @param array $types Types of styles to load. Will load all by default. It accepts:
- * - `variables`: only the CSS Custom Properties for presets & custom ones.
- * - `styles`: only the styles section in theme.json.
- * - `presets`: only the classes for the presets.
- * @param array $origins A list of origins to include. By default it includes VALID_ORIGINS.
- * @return string The resulting stylesheet.
- */
- public function get_stylesheet( $types = array( 'variables', 'styles', 'presets' ), $origins = null ) {
- if ( null === $origins ) {
- $origins = static::VALID_ORIGINS;
- }
- if ( is_string( $types ) ) {
- // Dispatch error and map old arguments to new ones.
- _deprecated_argument( __FUNCTION__, '5.9.0' );
- if ( 'block_styles' === $types ) {
- $types = array( 'styles', 'presets' );
- } elseif ( 'css_variables' === $types ) {
- $types = array( 'variables' );
- } else {
- $types = array( 'variables', 'styles', 'presets' );
- }
- }
- $blocks_metadata = static::get_blocks_metadata();
- $style_nodes = static::get_style_nodes( $this->theme_json, $blocks_metadata );
- $setting_nodes = static::get_setting_nodes( $this->theme_json, $blocks_metadata );
- $stylesheet = '';
- if ( in_array( 'variables', $types, true ) ) {
- $stylesheet .= $this->get_css_variables( $setting_nodes, $origins );
- }
- if ( in_array( 'styles', $types, true ) ) {
- $root_block_key = array_search( static::ROOT_BLOCK_SELECTOR, array_column( $style_nodes, 'selector' ), true );
- if ( false !== $root_block_key ) {
- $stylesheet .= $this->get_root_layout_rules( static::ROOT_BLOCK_SELECTOR, $style_nodes[ $root_block_key ] );
- }
- $stylesheet .= $this->get_block_classes( $style_nodes );
- } elseif ( in_array( 'base-layout-styles', $types, true ) ) {
- // Base layout styles are provided as part of `styles`, so only output separately if explicitly requested.
- // For backwards compatibility, the Columns block is explicitly included, to support a different default gap value.
- $base_styles_nodes = array(
- array(
- 'path' => array( 'styles' ),
- 'selector' => static::ROOT_BLOCK_SELECTOR,
- ),
- array(
- 'path' => array( 'styles', 'blocks', 'core/columns' ),
- 'selector' => '.wp-block-columns',
- 'name' => 'core/columns',
- ),
- );
- foreach ( $base_styles_nodes as $base_style_node ) {
- $stylesheet .= $this->get_layout_styles( $base_style_node );
- }
- }
- if ( in_array( 'presets', $types, true ) ) {
- $stylesheet .= $this->get_preset_classes( $setting_nodes, $origins );
- }
- return $stylesheet;
- }
- /**
- * Returns the page templates of the active theme.
- *
- * @since 5.9.0
- *
- * @return array
- */
- public function get_custom_templates() {
- $custom_templates = array();
- if ( ! isset( $this->theme_json['customTemplates'] ) || ! is_array( $this->theme_json['customTemplates'] ) ) {
- return $custom_templates;
- }
- foreach ( $this->theme_json['customTemplates'] as $item ) {
- if ( isset( $item['name'] ) ) {
- $custom_templates[ $item['name'] ] = array(
- 'title' => isset( $item['title'] ) ? $item['title'] : '',
- 'postTypes' => isset( $item['postTypes'] ) ? $item['postTypes'] : array( 'page' ),
- );
- }
- }
- return $custom_templates;
- }
- /**
- * Returns the template part data of active theme.
- *
- * @since 5.9.0
- *
- * @return array
- */
- public function get_template_parts() {
- $template_parts = array();
- if ( ! isset( $this->theme_json['templateParts'] ) || ! is_array( $this->theme_json['templateParts'] ) ) {
- return $template_parts;
- }
- foreach ( $this->theme_json['templateParts'] as $item ) {
- if ( isset( $item['name'] ) ) {
- $template_parts[ $item['name'] ] = array(
- 'title' => isset( $item['title'] ) ? $item['title'] : '',
- 'area' => isset( $item['area'] ) ? $item['area'] : '',
- );
- }
- }
- return $template_parts;
- }
- /**
- * Converts each style section into a list of rulesets
- * containing the block styles to be appended to the stylesheet.
- *
- * See glossary at https://developer.mozilla.org/en-US/docs/Web/CSS/Syntax
- *
- * For each section this creates a new ruleset such as:
- *
- * block-selector {
- * style-property-one: value;
- * }
- *
- * @since 5.8.0 As `get_block_styles()`.
- * @since 5.9.0 Renamed from `get_block_styles()` to `get_block_classes()`
- * and no longer returns preset classes.
- * Removed the `$setting_nodes` parameter.
- * @since 6.1.0 Moved most internal logic to `get_styles_for_block()`.
- *
- * @param array $style_nodes Nodes with styles.
- * @return string The new stylesheet.
- */
- protected function get_block_classes( $style_nodes ) {
- $block_rules = '';
- foreach ( $style_nodes as $metadata ) {
- if ( null === $metadata['selector'] ) {
- continue;
- }
- $block_rules .= static::get_styles_for_block( $metadata );
- }
- return $block_rules;
- }
- /**
- * Gets the CSS layout rules for a particular block from theme.json layout definitions.
- *
- * @since 6.1.0
- *
- * @param array $block_metadata Metadata about the block to get styles for.
- * @return string Layout styles for the block.
- */
- protected function get_layout_styles( $block_metadata ) {
- $block_rules = '';
- $block_type = null;
- // Skip outputting layout styles if explicitly disabled.
- if ( current_theme_supports( 'disable-layout-styles' ) ) {
- return $block_rules;
- }
- if ( isset( $block_metadata['name'] ) ) {
- $block_type = WP_Block_Type_Registry::get_instance()->get_registered( $block_metadata['name'] );
- if ( ! block_has_support( $block_type, array( '__experimentalLayout' ), false ) ) {
- return $block_rules;
- }
- }
- $selector = isset( $block_metadata['selector'] ) ? $block_metadata['selector'] : '';
- $has_block_gap_support = _wp_array_get( $this->theme_json, array( 'settings', 'spacing', 'blockGap' ) ) !== null;
- $has_fallback_gap_support = ! $has_block_gap_support; // This setting isn't useful yet: it exists as a placeholder for a future explicit fallback gap styles support.
- $node = _wp_array_get( $this->theme_json, $block_metadata['path'], array() );
- $layout_definitions = _wp_array_get( $this->theme_json, array( 'settings', 'layout', 'definitions' ), array() );
- $layout_selector_pattern = '/^[a-zA-Z0-9\-\.\ *+>:\(\)]*$/'; // Allow alphanumeric classnames, spaces, wildcard, sibling, child combinator and pseudo class selectors.
- // Gap styles will only be output if the theme has block gap support, or supports a fallback gap.
- // Default layout gap styles will be skipped for themes that do not explicitly opt-in to blockGap with a `true` or `false` value.
- if ( $has_block_gap_support || $has_fallback_gap_support ) {
- $block_gap_value = null;
- // Use a fallback gap value if block gap support is not available.
- if ( ! $has_block_gap_support ) {
- $block_gap_value = static::ROOT_BLOCK_SELECTOR === $selector ? '0.5em' : null;
- if ( ! empty( $block_type ) ) {
- $block_gap_value = _wp_array_get( $block_type->supports, array( 'spacing', 'blockGap', '__experimentalDefault' ), null );
- }
- } else {
- $block_gap_value = static::get_property_value( $node, array( 'spacing', 'blockGap' ) );
- }
- // Support split row / column values and concatenate to a shorthand value.
- if ( is_array( $block_gap_value ) ) {
- if ( isset( $block_gap_value['top'] ) && isset( $block_gap_value['left'] ) ) {
- $gap_row = static::get_property_value( $node, array( 'spacing', 'blockGap', 'top' ) );
- $gap_column = static::get_property_value( $node, array( 'spacing', 'blockGap', 'left' ) );
- $block_gap_value = $gap_row === $gap_column ? $gap_row : $gap_row . ' ' . $gap_column;
- } else {
- // Skip outputting gap value if not all sides are provided.
- $block_gap_value = null;
- }
- }
- // If the block should have custom gap, add the gap styles.
- if ( null !== $block_gap_value && false !== $block_gap_value && '' !== $block_gap_value ) {
- foreach ( $layout_definitions as $layout_definition_key => $layout_definition ) {
- // Allow outputting fallback gap styles for flex layout type when block gap support isn't available.
- if ( ! $has_block_gap_support && 'flex' !== $layout_definition_key ) {
- continue;
- }
- $class_name = sanitize_title( _wp_array_get( $layout_definition, array( 'className' ), false ) );
- $spacing_rules = _wp_array_get( $layout_definition, array( 'spacingStyles' ), array() );
- if (
- ! empty( $class_name ) &&
- ! empty( $spacing_rules )
- ) {
- foreach ( $spacing_rules as $spacing_rule ) {
- $declarations = array();
- if (
- isset( $spacing_rule['selector'] ) &&
- preg_match( $layout_selector_pattern, $spacing_rule['selector'] ) &&
- ! empty( $spacing_rule['rules'] )
- ) {
- // Iterate over each of the styling rules and substitute non-string values such as `null` with the real `blockGap` value.
- foreach ( $spacing_rule['rules'] as $css_property => $css_value ) {
- $current_css_value = is_string( $css_value ) ? $css_value : $block_gap_value;
- if ( static::is_safe_css_declaration( $css_property, $current_css_value ) ) {
- $declarations[] = array(
- 'name' => $css_property,
- 'value' => $current_css_value,
- );
- }
- }
- if ( ! $has_block_gap_support ) {
- // For fallback gap styles, use lower specificity, to ensure styles do not unintentionally override theme styles.
- $format = static::ROOT_BLOCK_SELECTOR === $selector ? ':where(.%2$s%3$s)' : ':where(%1$s.%2$s%3$s)';
- $layout_selector = sprintf(
- $format,
- $selector,
- $class_name,
- $spacing_rule['selector']
- );
- } else {
- $format = static::ROOT_BLOCK_SELECTOR === $selector ? '%s .%s%s' : '%s.%s%s';
- $layout_selector = sprintf(
- $format,
- $selector,
- $class_name,
- $spacing_rule['selector']
- );
- }
- $block_rules .= static::to_ruleset( $layout_selector, $declarations );
- }
- }
- }
- }
- }
- }
- // Output base styles.
- if (
- static::ROOT_BLOCK_SELECTOR === $selector
- ) {
- $valid_display_modes = array( 'block', 'flex', 'grid' );
- foreach ( $layout_definitions as $layout_definition ) {
- $class_name = sanitize_title( _wp_array_get( $layout_definition, array( 'className' ), false ) );
- $base_style_rules = _wp_array_get( $layout_definition, array( 'baseStyles' ), array() );
- if (
- ! empty( $class_name ) &&
- ! empty( $base_style_rules )
- ) {
- // Output display mode. This requires special handling as `display` is not exposed in `safe_style_css_filter`.
- if (
- ! empty( $layout_definition['displayMode'] ) &&
- is_string( $layout_definition['displayMode'] ) &&
- in_array( $layout_definition['displayMode'], $valid_display_modes, true )
- ) {
- $layout_selector = sprintf(
- '%s .%s',
- $selector,
- $class_name
- );
- $block_rules .= static::to_ruleset(
- $layout_selector,
- array(
- array(
- 'name' => 'display',
- 'value' => $layout_definition['displayMode'],
- ),
- )
- );
- }
- foreach ( $base_style_rules as $base_style_rule ) {
- $declarations = array();
- if (
- isset( $base_style_rule['selector'] ) &&
- preg_match( $layout_selector_pattern, $base_style_rule['selector'] ) &&
- ! empty( $base_style_rule['rules'] )
- ) {
- foreach ( $base_style_rule['rules'] as $css_property => $css_value ) {
- if ( static::is_safe_css_declaration( $css_property, $css_value ) ) {
- $declarations[] = array(
- 'name' => $css_property,
- 'value' => $css_value,
- );
- }
- }
- $layout_selector = sprintf(
- '%s .%s%s',
- $selector,
- $class_name,
- $base_style_rule['selector']
- );
- $block_rules .= static::to_ruleset( $layout_selector, $declarations );
- }
- }
- }
- }
- }
- return $block_rules;
- }
- /**
- * Creates new rulesets as classes for each preset value such as:
- *
- * .has-value-color {
- * color: value;
- * }
- *
- * .has-value-background-color {
- * background-color: value;
- * }
- *
- * .has-value-font-size {
- * font-size: value;
- * }
- *
- * .has-value-gradient-background {
- * background: value;
- * }
- *
- * p.has-value-gradient-background {
- * background: value;
- * }
- *
- * @since 5.9.0
- *
- * @param array $setting_nodes Nodes with settings.
- * @param array $origins List of origins to process presets from.
- * @return string The new stylesheet.
- */
- protected function get_preset_classes( $setting_nodes, $origins ) {
- $preset_rules = '';
- foreach ( $setting_nodes as $metadata ) {
- if ( null === $metadata['selector'] ) {
- continue;
- }
- $selector = $metadata['selector'];
- $node = _wp_array_get( $this->theme_json, $metadata['path'], array() );
- $preset_rules .= static::compute_preset_classes( $node, $selector, $origins );
- }
- return $preset_rules;
- }
- /**
- * Converts each styles section into a list of rulesets
- * to be appended to the stylesheet.
- * These rulesets contain all the css variables (custom variables and preset variables).
- *
- * See glossary at https://developer.mozilla.org/en-US/docs/Web/CSS/Syntax
- *
- * For each section this creates a new ruleset such as:
- *
- * block-selector {
- * --wp--preset--category--slug: value;
- * --wp--custom--variable: value;
- * }
- *
- * @since 5.8.0
- * @since 5.9.0 Added the `$origins` parameter.
- *
- * @param array $nodes Nodes with settings.
- * @param array $origins List of origins to process.
- * @return string The new stylesheet.
- */
- protected function get_css_variables( $nodes, $origins ) {
- $stylesheet = '';
- foreach ( $nodes as $metadata ) {
- if ( null === $metadata['selector'] ) {
- continue;
- }
- $selector = $metadata['selector'];
- $node = _wp_array_get( $this->theme_json, $metadata['path'], array() );
- $declarations = static::compute_preset_vars( $node, $origins );
- $theme_vars_declarations = static::compute_theme_vars( $node );
- foreach ( $theme_vars_declarations as $theme_vars_declaration ) {
- $declarations[] = $theme_vars_declaration;
- }
- $stylesheet .= static::to_ruleset( $selector, $declarations );
- }
- return $stylesheet;
- }
- /**
- * Given a selector and a declaration list,
- * creates the corresponding ruleset.
- *
- * @since 5.8.0
- *
- * @param string $selector CSS selector.
- * @param array $declarations List of declarations.
- * @return string The resulting CSS ruleset.
- */
- protected static function to_ruleset( $selector, $declarations ) {
- if ( empty( $declarations ) ) {
- return '';
- }
- $declaration_block = array_reduce(
- $declarations,
- static function ( $carry, $element ) {
- return $carry .= $element['name'] . ': ' . $element['value'] . ';'; },
- ''
- );
- return $selector . '{' . $declaration_block . '}';
- }
- /**
- * Given a settings array, returns the generated rulesets
- * for the preset classes.
- *
- * @since 5.8.0
- * @since 5.9.0 Added the `$origins` parameter.
- *
- * @param array $settings Settings to process.
- * @param string $selector Selector wrapping the classes.
- * @param array $origins List of origins to process.
- * @return string The result of processing the presets.
- */
- protected static function compute_preset_classes( $settings, $selector, $origins ) {
- if ( static::ROOT_BLOCK_SELECTOR === $selector ) {
- // Classes at the global level do not need any CSS prefixed,
- // and we don't want to increase its specificity.
- $selector = '';
- }
- $stylesheet = '';
- foreach ( static::PRESETS_METADATA as $preset_metadata ) {
- $slugs = static::get_settings_slugs( $settings, $preset_metadata, $origins );
- foreach ( $preset_metadata['classes'] as $class => $property ) {
- foreach ( $slugs as $slug ) {
- $css_var = static::replace_slug_in_string( $preset_metadata['css_vars'], $slug );
- $class_name = static::replace_slug_in_string( $class, $slug );
- $stylesheet .= static::to_ruleset(
- static::append_to_selector( $selector, $class_name ),
- array(
- array(
- 'name' => $property,
- 'value' => 'var(' . $css_var . ') !important',
- ),
- )
- );
- }
- }
- }
- return $stylesheet;
- }
- /**
- * Function that scopes a selector with another one. This works a bit like
- * SCSS nesting except the `&` operator isn't supported.
- *
- * <code>
- * $scope = '.a, .b .c';
- * $selector = '> .x, .y';
- * $merged = scope_selector( $scope, $selector );
- * // $merged is '.a > .x, .a .y, .b .c > .x, .b .c .y'
- * </code>
- *
- * @since 5.9.0
- *
- * @param string $scope Selector to scope to.
- * @param string $selector Original selector.
- * @return string Scoped selector.
- */
- protected static function scope_selector( $scope, $selector ) {
- $scopes = explode( ',', $scope );
- $selectors = explode( ',', $selector );
- $selectors_scoped = array();
- foreach ( $scopes as $outer ) {
- foreach ( $selectors as $inner ) {
- $selectors_scoped[] = trim( $outer ) . ' ' . trim( $inner );
- }
- }
- return implode( ', ', $selectors_scoped );
- }
- /**
- * Gets preset values keyed by slugs based on settings and metadata.
- *
- * <code>
- * $settings = array(
- * 'typography' => array(
- * 'fontFamilies' => array(
- * array(
- * 'slug' => 'sansSerif',
- * 'fontFamily' => '"Helvetica Neue", sans-serif',
- * ),
- * array(
- * 'slug' => 'serif',
- * 'colors' => 'Georgia, serif',
- * )
- * ),
- * ),
- * );
- * $meta = array(
- * 'path' => array( 'typography', 'fontFamilies' ),
- * 'value_key' => 'fontFamily',
- * );
- * $values_by_slug = get_settings_values_by_slug();
- * // $values_by_slug === array(
- * // 'sans-serif' => '"Helvetica Neue", sans-serif',
- * // 'serif' => 'Georgia, serif',
- * // );
- * </code>
- *
- * @since 5.9.0
- *
- * @param array $settings Settings to process.
- * @param array $preset_metadata One of the PRESETS_METADATA values.
- * @param array $origins List of origins to process.
- * @return array Array of presets where each key is a slug and each value is the preset value.
- */
- protected static function get_settings_values_by_slug( $settings, $preset_metadata, $origins ) {
- $preset_per_origin = _wp_array_get( $settings, $preset_metadata['path'], array() );
- $result = array();
- foreach ( $origins as $origin ) {
- if ( ! isset( $preset_per_origin[ $origin ] ) ) {
- continue;
- }
- foreach ( $preset_per_origin[ $origin ] as $preset ) {
- $slug = _wp_to_kebab_case( $preset['slug'] );
- $value = '';
- if ( isset( $preset_metadata['value_key'], $preset[ $preset_metadata['value_key'] ] ) ) {
- $value_key = $preset_metadata['value_key'];
- $value = $preset[ $value_key ];
- } elseif (
- isset( $preset_metadata['value_func'] ) &&
- is_callable( $preset_metadata['value_func'] )
- ) {
- $value_func = $preset_metadata['value_func'];
- $value = call_user_func( $value_func, $preset );
- } else {
- // If we don't have a value, then don't add it to the result.
- continue;
- }
- $result[ $slug ] = $value;
- }
- }
- return $result;
- }
- /**
- * Similar to get_settings_values_by_slug, but doesn't compute the value.
- *
- * @since 5.9.0
- *
- * @param array $settings Settings to process.
- * @param array $preset_metadata One of the PRESETS_METADATA values.
- * @param array $origins List of origins to process.
- * @return array Array of presets where the key and value are both the slug.
- */
- protected static function get_settings_slugs( $settings, $preset_metadata, $origins = null ) {
- if ( null === $origins ) {
- $origins = static::VALID_ORIGINS;
- }
- $preset_per_origin = _wp_array_get( $settings, $preset_metadata['path'], array() );
- $result = array();
- foreach ( $origins as $origin ) {
- if ( ! isset( $preset_per_origin[ $origin ] ) ) {
- continue;
- }
- foreach ( $preset_per_origin[ $origin ] as $preset ) {
- $slug = _wp_to_kebab_case( $preset['slug'] );
- // Use the array as a set so we don't get duplicates.
- $result[ $slug ] = $slug;
- }
- }
- return $result;
- }
- /**
- * Transforms a slug into a CSS Custom Property.
- *
- * @since 5.9.0
- *
- * @param string $input String to replace.
- * @param string $slug The slug value to use to generate the custom property.
- * @return string The CSS Custom Property. Something along the lines of `--wp--preset--color--black`.
- */
- protected static function replace_slug_in_string( $input, $slug ) {
- return strtr( $input, array( '$slug' => $slug ) );
- }
- /**
- * Given the block settings, extracts the CSS Custom Properties
- * for the presets and adds them to the $declarations array
- * following the format:
- *
- * array(
- * 'name' => 'property_name',
- * 'value' => 'property_value,
- * )
- *
- * @since 5.8.0
- * @since 5.9.0 Added the `$origins` parameter.
- *
- * @param array $settings Settings to process.
- * @param array $origins List of origins to process.
- * @return array The modified $declarations.
- */
- protected static function compute_preset_vars( $settings, $origins ) {
- $declarations = array();
- foreach ( static::PRESETS_METADATA as $preset_metadata ) {
- $values_by_slug = static::get_settings_values_by_slug( $settings, $preset_metadata, $origins );
- foreach ( $values_by_slug as $slug => $value ) {
- $declarations[] = array(
- 'name' => static::replace_slug_in_string( $preset_metadata['css_vars'], $slug ),
- 'value' => $value,
- );
- }
- }
- return $declarations;
- }
- /**
- * Given an array of settings, extracts the CSS Custom Properties
- * for the custom values and adds them to the $declarations
- * array following the format:
- *
- * array(
- * 'name' => 'property_name',
- * 'value' => 'property_value,
- * )
- *
- * @since 5.8.0
- *
- * @param array $settings Settings to process.
- * @return array The modified $declarations.
- */
- protected static function compute_theme_vars( $settings ) {
- $declarations = array();
- $custom_values = _wp_array_get( $settings, array( 'custom' ), array() );
- $css_vars = static::flatten_tree( $custom_values );
- foreach ( $css_vars as $key => $value ) {
- $declarations[] = array(
- 'name' => '--wp--custom--' . $key,
- 'value' => $value,
- );
- }
- return $declarations;
- }
- /**
- * Given a tree, it creates a flattened one
- * by merging the keys and binding the leaf values
- * to the new keys.
- *
- * It also transforms camelCase names into kebab-case
- * and substitutes '/' by '-'.
- *
- * This is thought to be useful to generate
- * CSS Custom Properties from a tree,
- * although there's nothing in the implementation
- * of this function that requires that format.
- *
- * For example, assuming the given prefix is '--wp'
- * and the token is '--', for this input tree:
- *
- * {
- * 'some/property': 'value',
- * 'nestedProperty': {
- * 'sub-property': 'value'
- * }
- * }
- *
- * it'll return this output:
- *
- * {
- * '--wp--some-property': 'value',
- * '--wp--nested-property--sub-property': 'value'
- * }
- *
- * @since 5.8.0
- *
- * @param array $tree Input tree to process.
- * @param string $prefix Optional. Prefix to prepend to each variable. Default empty string.
- * @param string $token Optional. Token to use between levels. Default '--'.
- * @return array The flattened tree.
- */
- protected static function flatten_tree( $tree, $prefix = '', $token = '--' ) {
- $result = array();
- foreach ( $tree as $property => $value ) {
- $new_key = $prefix . str_replace(
- '/',
- '-',
- strtolower( _wp_to_kebab_case( $property ) )
- );
- if ( is_array( $value ) ) {
- $new_prefix = $new_key . $token;
- $flattened_subtree = static::flatten_tree( $value, $new_prefix, $token );
- foreach ( $flattened_subtree as $subtree_key => $subtree_value ) {
- $result[ $subtree_key ] = $subtree_value;
- }
- } else {
- $result[ $new_key ] = $value;
- }
- }
- return $result;
- }
- /**
- * Given a styles array, it extracts the style properties
- * and adds them to the $declarations array following the format:
- *
- * array(
- * 'name' => 'property_name',
- * 'value' => 'property_value,
- * )
- *
- * @since 5.8.0
- * @since 5.9.0 Added the `$settings` and `$properties` parameters.
- * @since 6.1.0 Added `$theme_json`, `$selector`, and `$use_root_padding` parameters.
- *
- * @param array $styles Styles to process.
- * @param array $settings Theme settings.
- * @param array $properties Properties metadata.
- * @param array $theme_json Theme JSON array.
- * @param string $selector The style block selector.
- * @param boolean $use_root_padding Whether to add custom properties at root level.
- * @return array Returns the modified $declarations.
- */
- protected static function compute_style_properties( $styles, $settings = array(), $properties = null, $theme_json = null, $selector = null, $use_root_padding = null ) {
- if ( null === $properties ) {
- $properties = static::PROPERTIES_METADATA;
- }
- $declarations = array();
- if ( empty( $styles ) ) {
- return $declarations;
- }
- $root_variable_duplicates = array();
- foreach ( $properties as $css_property => $value_path ) {
- $value = static::get_property_value( $styles, $value_path, $theme_json );
- if ( str_starts_with( $css_property, '--wp--style--root--' ) && ( static::ROOT_BLOCK_SELECTOR !== $selector || ! $use_root_padding ) ) {
- continue;
- }
- // Root-level padding styles don't currently support strings with CSS shorthand values.
- // This may change: https://github.com/WordPress/gutenberg/issues/40132.
- if ( '--wp--style--root--padding' === $css_property && is_string( $value ) ) {
- continue;
- }
- if ( str_starts_with( $css_property, '--wp--style--root--' ) && $use_root_padding ) {
- $root_variable_duplicates[] = substr( $css_property, strlen( '--wp--style--root--' ) );
- }
- // Look up protected properties, keyed by value path.
- // Skip protected properties that are explicitly set to `null`.
- if ( is_array( $value_path ) ) {
- $path_string = implode( '.', $value_path );
- if (
- // TODO: Replace array_key_exists() with isset() check once WordPress drops
- // support for PHP 5.6. See https://core.trac.wordpress.org/ticket/57067.
- array_key_exists( $path_string, static::PROTECTED_PROPERTIES ) &&
- _wp_array_get( $settings, static::PROTECTED_PROPERTIES[ $path_string ], null ) === null
- ) {
- continue;
- }
- }
- // Skip if empty and not "0" or value represents array of longhand values.
- $has_missing_value = empty( $value ) && ! is_numeric( $value );
- if ( $has_missing_value || is_array( $value ) ) {
- continue;
- }
- // Calculates fluid typography rules where available.
- if ( 'font-size' === $css_property ) {
- /*
- * wp_get_typography_font_size_value() will check
- * if fluid typography has been activated and also
- * whether the incoming value can be converted to a fluid value.
- * Values that already have a clamp() function will not pass the test,
- * and therefore the original $value will be returned.
- */
- $value = wp_get_typography_font_size_value( array( 'size' => $value ) );
- }
- $declarations[] = array(
- 'name' => $css_property,
- 'value' => $value,
- );
- }
- // If a variable value is added to the root, the corresponding property should be removed.
- foreach ( $root_variable_duplicates as $duplicate ) {
- $discard = array_search( $duplicate, array_column( $declarations, 'name' ), true );
- if ( is_numeric( $discard ) ) {
- array_splice( $declarations, $discard, 1 );
- }
- }
- return $declarations;
- }
- /**
- * Returns the style property for the given path.
- *
- * It also converts CSS Custom Property stored as
- * "var:preset|color|secondary" to the form
- * "--wp--preset--color--secondary".
- *
- * It also converts references to a path to the value
- * stored at that location, e.g.
- * { "ref": "style.color.background" } => "#fff".
- *
- * @since 5.8.0
- * @since 5.9.0 Added support for values of array type, which are returned as is.
- * @since 6.1.0 Added the `$theme_json` parameter.
- *
- * @param array $styles Styles subtree.
- * @param array $path Which property to process.
- * @param array $theme_json Theme JSON array.
- * @return string|array Style property value.
- */
- protected static function get_property_value( $styles, $path, $theme_json = null ) {
- $value = _wp_array_get( $styles, $path, '' );
- if ( '' === $value || null === $value ) {
- // No need to process the value further.
- return '';
- }
- /*
- * This converts references to a path to the value at that path
- * where the values is an array with a "ref" key, pointing to a path.
- * For example: { "ref": "style.color.background" } => "#fff".
- */
- if ( is_array( $value ) && isset( $value['ref'] ) ) {
- $value_path = explode( '.', $value['ref'] );
- $ref_value = _wp_array_get( $theme_json, $value_path );
- // Only use the ref value if we find anything.
- if ( ! empty( $ref_value ) && is_string( $ref_value ) ) {
- $value = $ref_value;
- }
- if ( is_array( $ref_value ) && isset( $ref_value['ref'] ) ) {
- $path_string = json_encode( $path );
- $ref_value_string = json_encode( $ref_value );
- _doing_it_wrong(
- 'get_property_value',
- sprintf(
- /* translators: 1: theme.json, 2: Value name, 3: Value path, 4: Another value name. */
- __( 'Your %1$s file uses a dynamic value (%2$s) for the path at %3$s. However, the value at %3$s is also a dynamic value (pointing to %4$s) and pointing to another dynamic value is not supported. Please update %3$s to point directly to %4$s.' ),
- 'theme.json',
- $ref_value_string,
- $path_string,
- $ref_value['ref']
- ),
- '6.1.0'
- );
- }
- }
- if ( is_array( $value ) ) {
- return $value;
- }
- // Convert custom CSS properties.
- $prefix = 'var:';
- $prefix_len = strlen( $prefix );
- $token_in = '|';
- $token_out = '--';
- if ( 0 === strncmp( $value, $prefix, $prefix_len ) ) {
- $unwrapped_name = str_replace(
- $token_in,
- $token_out,
- substr( $value, $prefix_len )
- );
- $value = "var(--wp--$unwrapped_name)";
- }
- return $value;
- }
- /**
- * Builds metadata for the setting nodes, which returns in the form of:
- *
- * [
- * [
- * 'path' => ['path', 'to', 'some', 'node' ],
- * 'selector' => 'CSS selector for some node'
- * ],
- * [
- * 'path' => [ 'path', 'to', 'other', 'node' ],
- * 'selector' => 'CSS selector for other node'
- * ],
- * ]
- *
- * @since 5.8.0
- *
- * @param array $theme_json The tree to extract setting nodes from.
- * @param array $selectors List of selectors per block.
- * @return array An array of setting nodes metadata.
- */
- protected static function get_setting_nodes( $theme_json, $selectors = array() ) {
- $nodes = array();
- if ( ! isset( $theme_json['settings'] ) ) {
- return $nodes;
- }
- // Top-level.
- $nodes[] = array(
- 'path' => array( 'settings' ),
- 'selector' => static::ROOT_BLOCK_SELECTOR,
- );
- // Calculate paths for blocks.
- if ( ! isset( $theme_json['settings']['blocks'] ) ) {
- return $nodes;
- }
- foreach ( $theme_json['settings']['blocks'] as $name => $node ) {
- $selector = null;
- if ( isset( $selectors[ $name ]['selector'] ) ) {
- $selector = $selectors[ $name ]['selector'];
- }
- $nodes[] = array(
- 'path' => array( 'settings', 'blocks', $name ),
- 'selector' => $selector,
- );
- }
- return $nodes;
- }
- /**
- * Builds metadata for the style nodes, which returns in the form of:
- *
- * [
- * [
- * 'path' => [ 'path', 'to', 'some', 'node' ],
- * 'selector' => 'CSS selector for some node',
- * 'duotone' => 'CSS selector for duotone for some node'
- * ],
- * [
- * 'path' => ['path', 'to', 'other', 'node' ],
- * 'selector' => 'CSS selector for other node',
- * 'duotone' => null
- * ],
- * ]
- *
- * @since 5.8.0
- *
- * @param array $theme_json The tree to extract style nodes from.
- * @param array $selectors List of selectors per block.
- * @return array An array of style nodes metadata.
- */
- protected static function get_style_nodes( $theme_json, $selectors = array() ) {
- $nodes = array();
- if ( ! isset( $theme_json['styles'] ) ) {
- return $nodes;
- }
- // Top-level.
- $nodes[] = array(
- 'path' => array( 'styles' ),
- 'selector' => static::ROOT_BLOCK_SELECTOR,
- );
- if ( isset( $theme_json['styles']['elements'] ) ) {
- foreach ( self::ELEMENTS as $element => $selector ) {
- if ( ! isset( $theme_json['styles']['elements'][ $element ] ) ) {
- continue;
- }
- $nodes[] = array(
- 'path' => array( 'styles', 'elements', $element ),
- 'selector' => static::ELEMENTS[ $element ],
- );
- // Handle any pseudo selectors for the element.
- // TODO: Replace array_key_exists() with isset() check once WordPress drops
- // support for PHP 5.6. See https://core.trac.wordpress.org/ticket/57067.
- if ( array_key_exists( $element, static::VALID_ELEMENT_PSEUDO_SELECTORS ) ) {
- foreach ( static::VALID_ELEMENT_PSEUDO_SELECTORS[ $element ] as $pseudo_selector ) {
- if ( isset( $theme_json['styles']['elements'][ $element ][ $pseudo_selector ] ) ) {
- $nodes[] = array(
- 'path' => array( 'styles', 'elements', $element ),
- 'selector' => static::append_to_selector( static::ELEMENTS[ $element ], $pseudo_selector ),
- );
- }
- }
- }
- }
- }
- // Blocks.
- if ( ! isset( $theme_json['styles']['blocks'] ) ) {
- return $nodes;
- }
- $block_nodes = static::get_block_nodes( $theme_json );
- foreach ( $block_nodes as $block_node ) {
- $nodes[] = $block_node;
- }
- /**
- * Filters the list of style nodes with metadata.
- *
- * This allows for things like loading block CSS independently.
- *
- * @since 6.1.0
- *
- * @param array $nodes Style nodes with metadata.
- */
- return apply_filters( 'wp_theme_json_get_style_nodes', $nodes );
- }
- /**
- * A public helper to get the block nodes from a theme.json file.
- *
- * @since 6.1.0
- *
- * @return array The block nodes in theme.json.
- */
- public function get_styles_block_nodes() {
- return static::get_block_nodes( $this->theme_json );
- }
- /**
- * Returns a filtered declarations array if there is a separator block with only a background
- * style defined in theme.json by adding a color attribute to reflect the changes in the front.
- *
- * @since 6.1.1
- *
- * @param array $declarations List of declarations.
- * @return array $declarations List of declarations filtered.
- */
- private static function update_separator_declarations( $declarations ) {
- $background_color = '';
- $border_color_matches = false;
- $text_color_matches = false;
- foreach ( $declarations as $declaration ) {
- if ( 'background-color' === $declaration['name'] && ! $background_color && isset( $declaration['value'] ) ) {
- $background_color = $declaration['value'];
- } elseif ( 'border-color' === $declaration['name'] ) {
- $border_color_matches = true;
- } elseif ( 'color' === $declaration['name'] ) {
- $text_color_matches = true;
- }
- if ( $background_color && $border_color_matches && $text_color_matches ) {
- break;
- }
- }
- if ( $background_color && ! $border_color_matches && ! $text_color_matches ) {
- $declarations[] = array(
- 'name' => 'color',
- 'value' => $background_color,
- );
- }
- return $declarations;
- }
- /**
- * An internal method to get the block nodes from a theme.json file.
- *
- * @since 6.1.0
- *
- * @param array $theme_json The theme.json converted to an array.
- * @return array The block nodes in theme.json.
- */
- private static function get_block_nodes( $theme_json ) {
- $selectors = static::get_blocks_metadata();
- $nodes = array();
- if ( ! isset( $theme_json['styles'] ) ) {
- return $nodes;
- }
- // Blocks.
- if ( ! isset( $theme_json['styles']['blocks'] ) ) {
- return $nodes;
- }
- foreach ( $theme_json['styles']['blocks'] as $name => $node ) {
- $selector = null;
- if ( isset( $selectors[ $name ]['selector'] ) ) {
- $selector = $selectors[ $name ]['selector'];
- }
- $duotone_selector = null;
- if ( isset( $selectors[ $name ]['duotone'] ) ) {
- $duotone_selector = $selectors[ $name ]['duotone'];
- }
- $feature_selectors = null;
- if ( isset( $selectors[ $name ]['features'] ) ) {
- $feature_selectors = $selectors[ $name ]['features'];
- }
- $nodes[] = array(
- 'name' => $name,
- 'path' => array( 'styles', 'blocks', $name ),
- 'selector' => $selector,
- 'duotone' => $duotone_selector,
- 'features' => $feature_selectors,
- );
- if ( isset( $theme_json['styles']['blocks'][ $name ]['elements'] ) ) {
- foreach ( $theme_json['styles']['blocks'][ $name ]['elements'] as $element => $node ) {
- $nodes[] = array(
- 'path' => array( 'styles', 'blocks', $name, 'elements', $element ),
- 'selector' => $selectors[ $name ]['elements'][ $element ],
- );
- // Handle any pseudo selectors for the element.
- // TODO: Replace array_key_exists() with isset() check once WordPress drops
- // support for PHP 5.6. See https://core.trac.wordpress.org/ticket/57067.
- if ( array_key_exists( $element, static::VALID_ELEMENT_PSEUDO_SELECTORS ) ) {
- foreach ( static::VALID_ELEMENT_PSEUDO_SELECTORS[ $element ] as $pseudo_selector ) {
- if ( isset( $theme_json['styles']['blocks'][ $name ]['elements'][ $element ][ $pseudo_selector ] ) ) {
- $nodes[] = array(
- 'path' => array( 'styles', 'blocks', $name, 'elements', $element ),
- 'selector' => static::append_to_selector( $selectors[ $name ]['elements'][ $element ], $pseudo_selector ),
- );
- }
- }
- }
- }
- }
- }
- return $nodes;
- }
- /**
- * Gets the CSS rules for a particular block from theme.json.
- *
- * @since 6.1.0
- *
- * @param array $block_metadata Metadata about the block to get styles for.
- *
- * @return string Styles for the block.
- */
- public function get_styles_for_block( $block_metadata ) {
- $node = _wp_array_get( $this->theme_json, $block_metadata['path'], array() );
- $use_root_padding = isset( $this->theme_json['settings']['useRootPaddingAwareAlignments'] ) && true === $this->theme_json['settings']['useRootPaddingAwareAlignments'];
- $selector = $block_metadata['selector'];
- $settings = _wp_array_get( $this->theme_json, array( 'settings' ) );
- /*
- * Process style declarations for block support features the current
- * block contains selectors for. Values for a feature with a custom
- * selector are filtered from the theme.json node before it is
- * processed as normal.
- */
- $feature_declarations = array();
- if ( ! empty( $block_metadata['features'] ) ) {
- foreach ( $block_metadata['features'] as $feature_name => $feature_selector ) {
- if ( ! empty( $node[ $feature_name ] ) ) {
- // Create temporary node containing only the feature data
- // to leverage existing `compute_style_properties` function.
- $feature = array( $feature_name => $node[ $feature_name ] );
- // Generate the feature's declarations only.
- $new_feature_declarations = static::compute_style_properties( $feature, $settings, null, $this->theme_json );
- // Merge new declarations with any that already exist for
- // the feature selector. This may occur when multiple block
- // support features use the same custom selector.
- if ( isset( $feature_declarations[ $feature_selector ] ) ) {
- foreach ( $new_feature_declarations as $new_feature_declaration ) {
- $feature_declarations[ $feature_selector ][] = $feature_declaration;
- }
- } else {
- $feature_declarations[ $feature_selector ] = $new_feature_declarations;
- }
- // Remove the feature from the block's node now the
- // styles will be included under the feature level selector.
- unset( $node[ $feature_name ] );
- }
- }
- }
- /*
- * Get a reference to element name from path.
- * $block_metadata['path'] = array( 'styles','elements','link' );
- * Make sure that $block_metadata['path'] describes an element node, like [ 'styles', 'element', 'link' ].
- * Skip non-element paths like just ['styles'].
- */
- $is_processing_element = in_array( 'elements', $block_metadata['path'], true );
- $current_element = $is_processing_element ? $block_metadata['path'][ count( $block_metadata['path'] ) - 1 ] : null;
- $element_pseudo_allowed = array();
- // TODO: Replace array_key_exists() with isset() check once WordPress drops
- // support for PHP 5.6. See https://core.trac.wordpress.org/ticket/57067.
- if ( array_key_exists( $current_element, static::VALID_ELEMENT_PSEUDO_SELECTORS ) ) {
- $element_pseudo_allowed = static::VALID_ELEMENT_PSEUDO_SELECTORS[ $current_element ];
- }
- /*
- * Check for allowed pseudo classes (e.g. ":hover") from the $selector ("a:hover").
- * This also resets the array keys.
- */
- $pseudo_matches = array_values(
- array_filter(
- $element_pseudo_allowed,
- function( $pseudo_selector ) use ( $selector ) {
- return str_contains( $selector, $pseudo_selector );
- }
- )
- );
- $pseudo_selector = isset( $pseudo_matches[0] ) ? $pseudo_matches[0] : null;
- /*
- * If the current selector is a pseudo selector that's defined in the allow list for the current
- * element then compute the style properties for it.
- * Otherwise just compute the styles for the default selector as normal.
- */
- if ( $pseudo_selector && isset( $node[ $pseudo_selector ] ) &&
- // TODO: Replace array_key_exists() with isset() check once WordPress drops
- // support for PHP 5.6. See https://core.trac.wordpress.org/ticket/57067.
- array_key_exists( $current_element, static::VALID_ELEMENT_PSEUDO_SELECTORS )
- && in_array( $pseudo_selector, static::VALID_ELEMENT_PSEUDO_SELECTORS[ $current_element ], true )
- ) {
- $declarations = static::compute_style_properties( $node[ $pseudo_selector ], $settings, null, $this->theme_json, $selector, $use_root_padding );
- } else {
- $declarations = static::compute_style_properties( $node, $settings, null, $this->theme_json, $selector, $use_root_padding );
- }
- $block_rules = '';
- /*
- * 1. Separate the declarations that use the general selector
- * from the ones using the duotone selector.
- */
- $declarations_duotone = array();
- foreach ( $declarations as $index => $declaration ) {
- if ( 'filter' === $declaration['name'] ) {
- unset( $declarations[ $index ] );
- $declarations_duotone[] = $declaration;
- }
- }
- // Update declarations if there are separators with only background color defined.
- if ( '.wp-block-separator' === $selector ) {
- $declarations = static::update_separator_declarations( $declarations );
- }
- // 2. Generate and append the rules that use the general selector.
- $block_rules .= static::to_ruleset( $selector, $declarations );
- // 3. Generate and append the rules that use the duotone selector.
- if ( isset( $block_metadata['duotone'] ) && ! empty( $declarations_duotone ) ) {
- $selector_duotone = static::scope_selector( $block_metadata['selector'], $block_metadata['duotone'] );
- $block_rules .= static::to_ruleset( $selector_duotone, $declarations_duotone );
- }
- // 4. Generate Layout block gap styles.
- if (
- static::ROOT_BLOCK_SELECTOR !== $selector &&
- ! empty( $block_metadata['name'] )
- ) {
- $block_rules .= $this->get_layout_styles( $block_metadata );
- }
- // 5. Generate and append the feature level rulesets.
- foreach ( $feature_declarations as $feature_selector => $individual_feature_declarations ) {
- $block_rules .= static::to_ruleset( $feature_selector, $individual_feature_declarations );
- }
- return $block_rules;
- }
- /**
- * Outputs the CSS for layout rules on the root.
- *
- * @since 6.1.0
- *
- * @param string $selector The root node selector.
- * @param array $block_metadata The metadata for the root block.
- * @return string The additional root rules CSS.
- */
- public function get_root_layout_rules( $selector, $block_metadata ) {
- $css = '';
- $settings = _wp_array_get( $this->theme_json, array( 'settings' ) );
- $use_root_padding = isset( $this->theme_json['settings']['useRootPaddingAwareAlignments'] ) && true === $this->theme_json['settings']['useRootPaddingAwareAlignments'];
- /*
- * Reset default browser margin on the root body element.
- * This is set on the root selector **before** generating the ruleset
- * from the `theme.json`. This is to ensure that if the `theme.json` declares
- * `margin` in its `spacing` declaration for the `body` element then these
- * user-generated values take precedence in the CSS cascade.
- * @link https://github.com/WordPress/gutenberg/issues/36147.
- */
- $css .= 'body { margin: 0;';
- /*
- * If there are content and wide widths in theme.json, output them
- * as custom properties on the body element so all blocks can use them.
- */
- if ( isset( $settings['layout']['contentSize'] ) || isset( $settings['layout']['wideSize'] ) ) {
- $content_size = isset( $settings['layout']['contentSize'] ) ? $settings['layout']['contentSize'] : $settings['layout']['wideSize'];
- $content_size = static::is_safe_css_declaration( 'max-width', $content_size ) ? $content_size : 'initial';
- $wide_size = isset( $settings['layout']['wideSize'] ) ? $settings['layout']['wideSize'] : $settings['layout']['contentSize'];
- $wide_size = static::is_safe_css_declaration( 'max-width', $wide_size ) ? $wide_size : 'initial';
- $css .= '--wp--style--global--content-size: ' . $content_size . ';';
- $css .= '--wp--style--global--wide-size: ' . $wide_size . ';';
- }
- $css .= ' }';
- if ( $use_root_padding ) {
- // Top and bottom padding are applied to the outer block container.
- $css .= '.wp-site-blocks { padding-top: var(--wp--style--root--padding-top); padding-bottom: var(--wp--style--root--padding-bottom); }';
- // Right and left padding are applied to the first container with `.has-global-padding` class.
- $css .= '.has-global-padding { padding-right: var(--wp--style--root--padding-right); padding-left: var(--wp--style--root--padding-left); }';
- // Nested containers with `.has-global-padding` class do not get padding.
- $css .= '.has-global-padding :where(.has-global-padding) { padding-right: 0; padding-left: 0; }';
- // Alignfull children of the container with left and right padding have negative margins so they can still be full width.
- $css .= '.has-global-padding > .alignfull { margin-right: calc(var(--wp--style--root--padding-right) * -1); margin-left: calc(var(--wp--style--root--padding-left) * -1); }';
- // The above rule is negated for alignfull children of nested containers.
- $css .= '.has-global-padding :where(.has-global-padding) > .alignfull { margin-right: 0; margin-left: 0; }';
- // Some of the children of alignfull blocks without content width should also get padding: text blocks and non-alignfull container blocks.
- $css .= '.has-global-padding > .alignfull:where(:not(.has-global-padding)) > :where([class*="wp-block-"]:not(.alignfull):not([class*="__"]),p,h1,h2,h3,h4,h5,h6,ul,ol) { padding-right: var(--wp--style--root--padding-right); padding-left: var(--wp--style--root--padding-left); }';
- // The above rule also has to be negated for blocks inside nested `.has-global-padding` blocks.
- $css .= '.has-global-padding :where(.has-global-padding) > .alignfull:where(:not(.has-global-padding)) > :where([class*="wp-block-"]:not(.alignfull):not([class*="__"]),p,h1,h2,h3,h4,h5,h6,ul,ol) { padding-right: 0; padding-left: 0; }';
- }
- $css .= '.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }';
- $css .= '.wp-site-blocks > .alignright { float: right; margin-left: 2em; }';
- $css .= '.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }';
- $block_gap_value = _wp_array_get( $this->theme_json, array( 'styles', 'spacing', 'blockGap' ), '0.5em' );
- $has_block_gap_support = _wp_array_get( $this->theme_json, array( 'settings', 'spacing', 'blockGap' ) ) !== null;
- if ( $has_block_gap_support ) {
- $block_gap_value = static::get_property_value( $this->theme_json, array( 'styles', 'spacing', 'blockGap' ) );
- $css .= '.wp-site-blocks > * { margin-block-start: 0; margin-block-end: 0; }';
- $css .= ".wp-site-blocks > * + * { margin-block-start: $block_gap_value; }";
- // For backwards compatibility, ensure the legacy block gap CSS variable is still available.
- $css .= "$selector { --wp--style--block-gap: $block_gap_value; }";
- }
- $css .= $this->get_layout_styles( $block_metadata );
- return $css;
- }
- /**
- * For metadata values that can either be booleans or paths to booleans, gets the value.
- *
- * ```php
- * $data = array(
- * 'color' => array(
- * 'defaultPalette' => true
- * )
- * );
- *
- * static::get_metadata_boolean( $data, false );
- * // => false
- *
- * static::get_metadata_boolean( $data, array( 'color', 'defaultPalette' ) );
- * // => true
- * ```
- *
- * @since 6.0.0
- *
- * @param array $data The data to inspect.
- * @param bool|array $path Boolean or path to a boolean.
- * @param bool $default Default value if the referenced path is missing.
- * Default false.
- * @return bool Value of boolean metadata.
- */
- protected static function get_metadata_boolean( $data, $path, $default = false ) {
- if ( is_bool( $path ) ) {
- return $path;
- }
- if ( is_array( $path ) ) {
- $value = _wp_array_get( $data, $path );
- if ( null !== $value ) {
- return $value;
- }
- }
- return $default;
- }
- /**
- * Merges new incoming data.
- *
- * @since 5.8.0
- * @since 5.9.0 Duotone preset also has origins.
- *
- * @param WP_Theme_JSON $incoming Data to merge.
- */
- public function merge( $incoming ) {
- $incoming_data = $incoming->get_raw_data();
- $this->theme_json = array_replace_recursive( $this->theme_json, $incoming_data );
- /*
- * The array_replace_recursive algorithm merges at the leaf level,
- * but we don't want leaf arrays to be merged, so we overwrite it.
- *
- * For leaf values that are sequential arrays it will use the numeric indexes for replacement.
- * We rather replace the existing with the incoming value, if it exists.
- * This is the case of spacing.units.
- *
- * For leaf values that are associative arrays it will merge them as expected.
- * This is also not the behavior we want for the current associative arrays (presets).
- * We rather replace the existing with the incoming value, if it exists.
- * This happens, for example, when we merge data from theme.json upon existing
- * theme supports or when we merge anything coming from the same source twice.
- * This is the case of color.palette, color.gradients, color.duotone,
- * typography.fontSizes, or typography.fontFamilies.
- *
- * Additionally, for some preset types, we also want to make sure the
- * values they introduce don't conflict with default values. We do so
- * by checking the incoming slugs for theme presets and compare them
- * with the equivalent default presets: if a slug is present as a default
- * we remove it from the theme presets.
- */
- $nodes = static::get_setting_nodes( $incoming_data );
- $slugs_global = static::get_default_slugs( $this->theme_json, array( 'settings' ) );
- foreach ( $nodes as $node ) {
- // Replace the spacing.units.
- $path = $node['path'];
- $path[] = 'spacing';
- $path[] = 'units';
- $content = _wp_array_get( $incoming_data, $path, null );
- if ( isset( $content ) ) {
- _wp_array_set( $this->theme_json, $path, $content );
- }
- // Replace the presets.
- foreach ( static::PRESETS_METADATA as $preset ) {
- $override_preset = ! static::get_metadata_boolean( $this->theme_json['settings'], $preset['prevent_override'], true );
- foreach ( static::VALID_ORIGINS as $origin ) {
- $base_path = $node['path'];
- foreach ( $preset['path'] as $leaf ) {
- $base_path[] = $leaf;
- }
- $path = $base_path;
- $path[] = $origin;
- $content = _wp_array_get( $incoming_data, $path, null );
- if ( ! isset( $content ) ) {
- continue;
- }
- if ( 'theme' === $origin && $preset['use_default_names'] ) {
- foreach ( $content as $key => $item ) {
- if ( ! isset( $item['name'] ) ) {
- $name = static::get_name_from_defaults( $item['slug'], $base_path );
- if ( null !== $name ) {
- $content[ $key ]['name'] = $name;
- }
- }
- }
- }
- if (
- ( 'theme' !== $origin ) ||
- ( 'theme' === $origin && $override_preset )
- ) {
- _wp_array_set( $this->theme_json, $path, $content );
- } else {
- $slugs_node = static::get_default_slugs( $this->theme_json, $node['path'] );
- $slugs = array_merge_recursive( $slugs_global, $slugs_node );
- $slugs_for_preset = _wp_array_get( $slugs, $preset['path'], array() );
- $content = static::filter_slugs( $content, $slugs_for_preset );
- _wp_array_set( $this->theme_json, $path, $content );
- }
- }
- }
- }
- }
- /**
- * Converts all filter (duotone) presets into SVGs.
- *
- * @since 5.9.1
- *
- * @param array $origins List of origins to process.
- * @return string SVG filters.
- */
- public function get_svg_filters( $origins ) {
- $blocks_metadata = static::get_blocks_metadata();
- $setting_nodes = static::get_setting_nodes( $this->theme_json, $blocks_metadata );
- $filters = '';
- foreach ( $setting_nodes as $metadata ) {
- $node = _wp_array_get( $this->theme_json, $metadata['path'], array() );
- if ( empty( $node['color']['duotone'] ) ) {
- continue;
- }
- $duotone_presets = $node['color']['duotone'];
- foreach ( $origins as $origin ) {
- if ( ! isset( $duotone_presets[ $origin ] ) ) {
- continue;
- }
- foreach ( $duotone_presets[ $origin ] as $duotone_preset ) {
- $filters .= wp_get_duotone_filter_svg( $duotone_preset );
- }
- }
- }
- return $filters;
- }
- /**
- * Determines whether a presets should be overridden or not.
- *
- * @since 5.9.0
- * @deprecated 6.0.0 Use {@see 'get_metadata_boolean'} instead.
- *
- * @param array $theme_json The theme.json like structure to inspect.
- * @param array $path Path to inspect.
- * @param bool|array $override Data to compute whether to override the preset.
- * @return boolean
- */
- protected static function should_override_preset( $theme_json, $path, $override ) {
- _deprecated_function( __METHOD__, '6.0.0', 'get_metadata_boolean' );
- if ( is_bool( $override ) ) {
- return $override;
- }
- /*
- * The relationship between whether to override the defaults
- * and whether the defaults are enabled is inverse:
- *
- * - If defaults are enabled => theme presets should not be overridden
- * - If defaults are disabled => theme presets should be overridden
- *
- * For example, a theme sets defaultPalette to false,
- * making the default palette hidden from the user.
- * In that case, we want all the theme presets to be present,
- * so they should override the defaults.
- */
- if ( is_array( $override ) ) {
- $value = _wp_array_get( $theme_json, array_merge( $path, $override ) );
- if ( isset( $value ) ) {
- return ! $value;
- }
- // Search the top-level key if none was found for this node.
- $value = _wp_array_get( $theme_json, array_merge( array( 'settings' ), $override ) );
- if ( isset( $value ) ) {
- return ! $value;
- }
- return true;
- }
- }
- /**
- * Returns the default slugs for all the presets in an associative array
- * whose keys are the preset paths and the leafs is the list of slugs.
- *
- * For example:
- *
- * array(
- * 'color' => array(
- * 'palette' => array( 'slug-1', 'slug-2' ),
- * 'gradients' => array( 'slug-3', 'slug-4' ),
- * ),
- * )
- *
- * @since 5.9.0
- *
- * @param array $data A theme.json like structure.
- * @param array $node_path The path to inspect. It's 'settings' by default.
- * @return array
- */
- protected static function get_default_slugs( $data, $node_path ) {
- $slugs = array();
- foreach ( static::PRESETS_METADATA as $metadata ) {
- $path = $node_path;
- foreach ( $metadata['path'] as $leaf ) {
- $path[] = $leaf;
- }
- $path[] = 'default';
- $preset = _wp_array_get( $data, $path, null );
- if ( ! isset( $preset ) ) {
- continue;
- }
- $slugs_for_preset = array();
- foreach ( $preset as $item ) {
- if ( isset( $item['slug'] ) ) {
- $slugs_for_preset[] = $item['slug'];
- }
- }
- _wp_array_set( $slugs, $metadata['path'], $slugs_for_preset );
- }
- return $slugs;
- }
- /**
- * Gets a `default`'s preset name by a provided slug.
- *
- * @since 5.9.0
- *
- * @param string $slug The slug we want to find a match from default presets.
- * @param array $base_path The path to inspect. It's 'settings' by default.
- * @return string|null
- */
- protected function get_name_from_defaults( $slug, $base_path ) {
- $path = $base_path;
- $path[] = 'default';
- $default_content = _wp_array_get( $this->theme_json, $path, null );
- if ( ! $default_content ) {
- return null;
- }
- foreach ( $default_content as $item ) {
- if ( $slug === $item['slug'] ) {
- return $item['name'];
- }
- }
- return null;
- }
- /**
- * Removes the preset values whose slug is equal to any of given slugs.
- *
- * @since 5.9.0
- *
- * @param array $node The node with the presets to validate.
- * @param array $slugs The slugs that should not be overridden.
- * @return array The new node.
- */
- protected static function filter_slugs( $node, $slugs ) {
- if ( empty( $slugs ) ) {
- return $node;
- }
- $new_node = array();
- foreach ( $node as $value ) {
- if ( isset( $value['slug'] ) && ! in_array( $value['slug'], $slugs, true ) ) {
- $new_node[] = $value;
- }
- }
- return $new_node;
- }
- /**
- * Removes insecure data from theme.json.
- *
- * @since 5.9.0
- *
- * @param array $theme_json Structure to sanitize.
- * @return array Sanitized structure.
- */
- public static function remove_insecure_properties( $theme_json ) {
- $sanitized = array();
- $theme_json = WP_Theme_JSON_Schema::migrate( $theme_json );
- $valid_block_names = array_keys( static::get_blocks_metadata() );
- $valid_element_names = array_keys( static::ELEMENTS );
- $theme_json = static::sanitize( $theme_json, $valid_block_names, $valid_element_names );
- $blocks_metadata = static::get_blocks_metadata();
- $style_nodes = static::get_style_nodes( $theme_json, $blocks_metadata );
- foreach ( $style_nodes as $metadata ) {
- $input = _wp_array_get( $theme_json, $metadata['path'], array() );
- if ( empty( $input ) ) {
- continue;
- }
- $output = static::remove_insecure_styles( $input );
- /*
- * Get a reference to element name from path.
- * $metadata['path'] = array( 'styles', 'elements', 'link' );
- */
- $current_element = $metadata['path'][ count( $metadata['path'] ) - 1 ];
- /*
- * $output is stripped of pseudo selectors. Re-add and process them
- * or insecure styles here.
- */
- // TODO: Replace array_key_exists() with isset() check once WordPress drops
- // support for PHP 5.6. See https://core.trac.wordpress.org/ticket/57067.
- if ( array_key_exists( $current_element, static::VALID_ELEMENT_PSEUDO_SELECTORS ) ) {
- foreach ( static::VALID_ELEMENT_PSEUDO_SELECTORS[ $current_element ] as $pseudo_selector ) {
- if ( isset( $input[ $pseudo_selector ] ) ) {
- $output[ $pseudo_selector ] = static::remove_insecure_styles( $input[ $pseudo_selector ] );
- }
- }
- }
- if ( ! empty( $output ) ) {
- _wp_array_set( $sanitized, $metadata['path'], $output );
- }
- }
- $setting_nodes = static::get_setting_nodes( $theme_json );
- foreach ( $setting_nodes as $metadata ) {
- $input = _wp_array_get( $theme_json, $metadata['path'], array() );
- if ( empty( $input ) ) {
- continue;
- }
- $output = static::remove_insecure_settings( $input );
- if ( ! empty( $output ) ) {
- _wp_array_set( $sanitized, $metadata['path'], $output );
- }
- }
- if ( empty( $sanitized['styles'] ) ) {
- unset( $theme_json['styles'] );
- } else {
- $theme_json['styles'] = $sanitized['styles'];
- }
- if ( empty( $sanitized['settings'] ) ) {
- unset( $theme_json['settings'] );
- } else {
- $theme_json['settings'] = $sanitized['settings'];
- }
- return $theme_json;
- }
- /**
- * Processes a setting node and returns the same node
- * without the insecure settings.
- *
- * @since 5.9.0
- *
- * @param array $input Node to process.
- * @return array
- */
- protected static function remove_insecure_settings( $input ) {
- $output = array();
- foreach ( static::PRESETS_METADATA as $preset_metadata ) {
- foreach ( static::VALID_ORIGINS as $origin ) {
- $path_with_origin = $preset_metadata['path'];
- $path_with_origin[] = $origin;
- $presets = _wp_array_get( $input, $path_with_origin, null );
- if ( null === $presets ) {
- continue;
- }
- $escaped_preset = array();
- foreach ( $presets as $preset ) {
- if (
- esc_attr( esc_html( $preset['name'] ) ) === $preset['name'] &&
- sanitize_html_class( $preset['slug'] ) === $preset['slug']
- ) {
- $value = null;
- if ( isset( $preset_metadata['value_key'], $preset[ $preset_metadata['value_key'] ] ) ) {
- $value = $preset[ $preset_metadata['value_key'] ];
- } elseif (
- isset( $preset_metadata['value_func'] ) &&
- is_callable( $preset_metadata['value_func'] )
- ) {
- $value = call_user_func( $preset_metadata['value_func'], $preset );
- }
- $preset_is_valid = true;
- foreach ( $preset_metadata['properties'] as $property ) {
- if ( ! static::is_safe_css_declaration( $property, $value ) ) {
- $preset_is_valid = false;
- break;
- }
- }
- if ( $preset_is_valid ) {
- $escaped_preset[] = $preset;
- }
- }
- }
- if ( ! empty( $escaped_preset ) ) {
- _wp_array_set( $output, $path_with_origin, $escaped_preset );
- }
- }
- }
- return $output;
- }
- /**
- * Processes a style node and returns the same node
- * without the insecure styles.
- *
- * @since 5.9.0
- *
- * @param array $input Node to process.
- * @return array
- */
- protected static function remove_insecure_styles( $input ) {
- $output = array();
- $declarations = static::compute_style_properties( $input );
- foreach ( $declarations as $declaration ) {
- if ( static::is_safe_css_declaration( $declaration['name'], $declaration['value'] ) ) {
- $path = static::PROPERTIES_METADATA[ $declaration['name'] ];
- // Check the value isn't an array before adding so as to not
- // double up shorthand and longhand styles.
- $value = _wp_array_get( $input, $path, array() );
- if ( ! is_array( $value ) ) {
- _wp_array_set( $output, $path, $value );
- }
- }
- }
- return $output;
- }
- /**
- * Checks that a declaration provided by the user is safe.
- *
- * @since 5.9.0
- *
- * @param string $property_name Property name in a CSS declaration, i.e. the `color` in `color: red`.
- * @param string $property_value Value in a CSS declaration, i.e. the `red` in `color: red`.
- * @return bool
- */
- protected static function is_safe_css_declaration( $property_name, $property_value ) {
- $style_to_validate = $property_name . ': ' . $property_value;
- $filtered = esc_html( safecss_filter_attr( $style_to_validate ) );
- return ! empty( trim( $filtered ) );
- }
- /**
- * Returns the raw data.
- *
- * @since 5.8.0
- *
- * @return array Raw data.
- */
- public function get_raw_data() {
- return $this->theme_json;
- }
- /**
- * Transforms the given editor settings according the
- * add_theme_support format to the theme.json format.
- *
- * @since 5.8.0
- *
- * @param array $settings Existing editor settings.
- * @return array Config that adheres to the theme.json schema.
- */
- public static function get_from_editor_settings( $settings ) {
- $theme_settings = array(
- 'version' => static::LATEST_SCHEMA,
- 'settings' => array(),
- );
- // Deprecated theme supports.
- if ( isset( $settings['disableCustomColors'] ) ) {
- if ( ! isset( $theme_settings['settings']['color'] ) ) {
- $theme_settings['settings']['color'] = array();
- }
- $theme_settings['settings']['color']['custom'] = ! $settings['disableCustomColors'];
- }
- if ( isset( $settings['disableCustomGradients'] ) ) {
- if ( ! isset( $theme_settings['settings']['color'] ) ) {
- $theme_settings['settings']['color'] = array();
- }
- $theme_settings['settings']['color']['customGradient'] = ! $settings['disableCustomGradients'];
- }
- if ( isset( $settings['disableCustomFontSizes'] ) ) {
- if ( ! isset( $theme_settings['settings']['typography'] ) ) {
- $theme_settings['settings']['typography'] = array();
- }
- $theme_settings['settings']['typography']['customFontSize'] = ! $settings['disableCustomFontSizes'];
- }
- if ( isset( $settings['enableCustomLineHeight'] ) ) {
- if ( ! isset( $theme_settings['settings']['typography'] ) ) {
- $theme_settings['settings']['typography'] = array();
- }
- $theme_settings['settings']['typography']['lineHeight'] = $settings['enableCustomLineHeight'];
- }
- if ( isset( $settings['enableCustomUnits'] ) ) {
- if ( ! isset( $theme_settings['settings']['spacing'] ) ) {
- $theme_settings['settings']['spacing'] = array();
- }
- $theme_settings['settings']['spacing']['units'] = ( true === $settings['enableCustomUnits'] ) ?
- array( 'px', 'em', 'rem', 'vh', 'vw', '%' ) :
- $settings['enableCustomUnits'];
- }
- if ( isset( $settings['colors'] ) ) {
- if ( ! isset( $theme_settings['settings']['color'] ) ) {
- $theme_settings['settings']['color'] = array();
- }
- $theme_settings['settings']['color']['palette'] = $settings['colors'];
- }
- if ( isset( $settings['gradients'] ) ) {
- if ( ! isset( $theme_settings['settings']['color'] ) ) {
- $theme_settings['settings']['color'] = array();
- }
- $theme_settings['settings']['color']['gradients'] = $settings['gradients'];
- }
- if ( isset( $settings['fontSizes'] ) ) {
- $font_sizes = $settings['fontSizes'];
- // Back-compatibility for presets without units.
- foreach ( $font_sizes as $key => $font_size ) {
- if ( is_numeric( $font_size['size'] ) ) {
- $font_sizes[ $key ]['size'] = $font_size['size'] . 'px';
- }
- }
- if ( ! isset( $theme_settings['settings']['typography'] ) ) {
- $theme_settings['settings']['typography'] = array();
- }
- $theme_settings['settings']['typography']['fontSizes'] = $font_sizes;
- }
- if ( isset( $settings['enableCustomSpacing'] ) ) {
- if ( ! isset( $theme_settings['settings']['spacing'] ) ) {
- $theme_settings['settings']['spacing'] = array();
- }
- $theme_settings['settings']['spacing']['padding'] = $settings['enableCustomSpacing'];
- }
- return $theme_settings;
- }
- /**
- * Returns the current theme's wanted patterns(slugs) to be
- * registered from Pattern Directory.
- *
- * @since 6.0.0
- *
- * @return string[]
- */
- public function get_patterns() {
- if ( isset( $this->theme_json['patterns'] ) && is_array( $this->theme_json['patterns'] ) ) {
- return $this->theme_json['patterns'];
- }
- return array();
- }
- /**
- * Returns a valid theme.json as provided by a theme.
- *
- * Unlike get_raw_data() this returns the presets flattened, as provided by a theme.
- * This also uses appearanceTools instead of their opt-ins if all of them are true.
- *
- * @since 6.0.0
- *
- * @return array
- */
- public function get_data() {
- $output = $this->theme_json;
- $nodes = static::get_setting_nodes( $output );
- /**
- * Flatten the theme & custom origins into a single one.
- *
- * For example, the following:
- *
- * {
- * "settings": {
- * "color": {
- * "palette": {
- * "theme": [ {} ],
- * "custom": [ {} ]
- * }
- * }
- * }
- * }
- *
- * will be converted to:
- *
- * {
- * "settings": {
- * "color": {
- * "palette": [ {} ]
- * }
- * }
- * }
- */
- foreach ( $nodes as $node ) {
- foreach ( static::PRESETS_METADATA as $preset_metadata ) {
- $path = $node['path'];
- foreach ( $preset_metadata['path'] as $preset_metadata_path ) {
- $path[] = $preset_metadata_path;
- }
- $preset = _wp_array_get( $output, $path, null );
- if ( null === $preset ) {
- continue;
- }
- $items = array();
- if ( isset( $preset['theme'] ) ) {
- foreach ( $preset['theme'] as $item ) {
- $slug = $item['slug'];
- unset( $item['slug'] );
- $items[ $slug ] = $item;
- }
- }
- if ( isset( $preset['custom'] ) ) {
- foreach ( $preset['custom'] as $item ) {
- $slug = $item['slug'];
- unset( $item['slug'] );
- $items[ $slug ] = $item;
- }
- }
- $flattened_preset = array();
- foreach ( $items as $slug => $value ) {
- $flattened_preset[] = array_merge( array( 'slug' => (string) $slug ), $value );
- }
- _wp_array_set( $output, $path, $flattened_preset );
- }
- }
- // If all of the static::APPEARANCE_TOOLS_OPT_INS are true,
- // this code unsets them and sets 'appearanceTools' instead.
- foreach ( $nodes as $node ) {
- $all_opt_ins_are_set = true;
- foreach ( static::APPEARANCE_TOOLS_OPT_INS as $opt_in_path ) {
- $full_path = $node['path'];
- foreach ( $opt_in_path as $opt_in_path_item ) {
- $full_path[] = $opt_in_path_item;
- }
- // Use "unset prop" as a marker instead of "null" because
- // "null" can be a valid value for some props (e.g. blockGap).
- $opt_in_value = _wp_array_get( $output, $full_path, 'unset prop' );
- if ( 'unset prop' === $opt_in_value ) {
- $all_opt_ins_are_set = false;
- break;
- }
- }
- if ( $all_opt_ins_are_set ) {
- $node_path_with_appearance_tools = $node['path'];
- $node_path_with_appearance_tools[] = 'appearanceTools';
- _wp_array_set( $output, $node_path_with_appearance_tools, true );
- foreach ( static::APPEARANCE_TOOLS_OPT_INS as $opt_in_path ) {
- $full_path = $node['path'];
- foreach ( $opt_in_path as $opt_in_path_item ) {
- $full_path[] = $opt_in_path_item;
- }
- // Use "unset prop" as a marker instead of "null" because
- // "null" can be a valid value for some props (e.g. blockGap).
- $opt_in_value = _wp_array_get( $output, $full_path, 'unset prop' );
- if ( true !== $opt_in_value ) {
- continue;
- }
- // The following could be improved to be path independent.
- // At the moment it relies on a couple of assumptions:
- //
- // - all opt-ins having a path of size 2.
- // - there's two sources of settings: the top-level and the block-level.
- if (
- ( 1 === count( $node['path'] ) ) &&
- ( 'settings' === $node['path'][0] )
- ) {
- // Top-level settings.
- unset( $output['settings'][ $opt_in_path[0] ][ $opt_in_path[1] ] );
- if ( empty( $output['settings'][ $opt_in_path[0] ] ) ) {
- unset( $output['settings'][ $opt_in_path[0] ] );
- }
- } elseif (
- ( 3 === count( $node['path'] ) ) &&
- ( 'settings' === $node['path'][0] ) &&
- ( 'blocks' === $node['path'][1] )
- ) {
- // Block-level settings.
- $block_name = $node['path'][2];
- unset( $output['settings']['blocks'][ $block_name ][ $opt_in_path[0] ][ $opt_in_path[1] ] );
- if ( empty( $output['settings']['blocks'][ $block_name ][ $opt_in_path[0] ] ) ) {
- unset( $output['settings']['blocks'][ $block_name ][ $opt_in_path[0] ] );
- }
- }
- }
- }
- }
- wp_recursive_ksort( $output );
- return $output;
- }
- /**
- * Sets the spacingSizes array based on the spacingScale values from theme.json.
- *
- * @since 6.1.0
- *
- * @return null|void
- */
- public function set_spacing_sizes() {
- $spacing_scale = _wp_array_get( $this->theme_json, array( 'settings', 'spacing', 'spacingScale' ), array() );
- if ( ! isset( $spacing_scale['steps'] )
- || ! is_numeric( $spacing_scale['steps'] )
- || ! isset( $spacing_scale['mediumStep'] )
- || ! isset( $spacing_scale['unit'] )
- || ! isset( $spacing_scale['operator'] )
- || ! isset( $spacing_scale['increment'] )
- || ! isset( $spacing_scale['steps'] )
- || ! is_numeric( $spacing_scale['increment'] )
- || ! is_numeric( $spacing_scale['mediumStep'] )
- || ( '+' !== $spacing_scale['operator'] && '*' !== $spacing_scale['operator'] ) ) {
- if ( ! empty( $spacing_scale ) ) {
- trigger_error( __( 'Some of the theme.json settings.spacing.spacingScale values are invalid' ), E_USER_NOTICE );
- }
- return null;
- }
- // If theme authors want to prevent the generation of the core spacing scale they can set their theme.json spacingScale.steps to 0.
- if ( 0 === $spacing_scale['steps'] ) {
- return null;
- }
- $unit = '%' === $spacing_scale['unit'] ? '%' : sanitize_title( $spacing_scale['unit'] );
- $current_step = $spacing_scale['mediumStep'];
- $steps_mid_point = round( $spacing_scale['steps'] / 2, 0 );
- $x_small_count = null;
- $below_sizes = array();
- $slug = 40;
- $remainder = 0;
- for ( $below_midpoint_count = $steps_mid_point - 1; $spacing_scale['steps'] > 1 && $slug > 0 && $below_midpoint_count > 0; $below_midpoint_count-- ) {
- if ( '+' === $spacing_scale['operator'] ) {
- $current_step -= $spacing_scale['increment'];
- } elseif ( $spacing_scale['increment'] > 1 ) {
- $current_step /= $spacing_scale['increment'];
- } else {
- $current_step *= $spacing_scale['increment'];
- }
- if ( $current_step <= 0 ) {
- $remainder = $below_midpoint_count;
- break;
- }
- $below_sizes[] = array(
- /* translators: %s: Digit to indicate multiple of sizing, eg. 2X-Small. */
- 'name' => $below_midpoint_count === $steps_mid_point - 1 ? __( 'Small' ) : sprintf( __( '%sX-Small' ), (string) $x_small_count ),
- 'slug' => (string) $slug,
- 'size' => round( $current_step, 2 ) . $unit,
- );
- if ( $below_midpoint_count === $steps_mid_point - 2 ) {
- $x_small_count = 2;
- }
- if ( $below_midpoint_count < $steps_mid_point - 2 ) {
- $x_small_count++;
- }
- $slug -= 10;
- }
- $below_sizes = array_reverse( $below_sizes );
- $below_sizes[] = array(
- 'name' => __( 'Medium' ),
- 'slug' => '50',
- 'size' => $spacing_scale['mediumStep'] . $unit,
- );
- $current_step = $spacing_scale['mediumStep'];
- $x_large_count = null;
- $above_sizes = array();
- $slug = 60;
- $steps_above = ( $spacing_scale['steps'] - $steps_mid_point ) + $remainder;
- for ( $above_midpoint_count = 0; $above_midpoint_count < $steps_above; $above_midpoint_count++ ) {
- $current_step = '+' === $spacing_scale['operator']
- ? $current_step + $spacing_scale['increment']
- : ( $spacing_scale['increment'] >= 1 ? $current_step * $spacing_scale['increment'] : $current_step / $spacing_scale['increment'] );
- $above_sizes[] = array(
- /* translators: %s: Digit to indicate multiple of sizing, eg. 2X-Large. */
- 'name' => 0 === $above_midpoint_count ? __( 'Large' ) : sprintf( __( '%sX-Large' ), (string) $x_large_count ),
- 'slug' => (string) $slug,
- 'size' => round( $current_step, 2 ) . $unit,
- );
- if ( 1 === $above_midpoint_count ) {
- $x_large_count = 2;
- }
- if ( $above_midpoint_count > 1 ) {
- $x_large_count++;
- }
- $slug += 10;
- }
- $spacing_sizes = $below_sizes;
- foreach ( $above_sizes as $above_sizes_item ) {
- $spacing_sizes[] = $above_sizes_item;
- }
- // If there are 7 or less steps in the scale revert to numbers for labels instead of t-shirt sizes.
- if ( $spacing_scale['steps'] <= 7 ) {
- for ( $spacing_sizes_count = 0; $spacing_sizes_count < count( $spacing_sizes ); $spacing_sizes_count++ ) {
- $spacing_sizes[ $spacing_sizes_count ]['name'] = (string) ( $spacing_sizes_count + 1 );
- }
- }
- _wp_array_set( $this->theme_json, array( 'settings', 'spacing', 'spacingSizes', 'default' ), $spacing_sizes );
- }
- }
|