WordPress.org

Make WordPress Core

Changeset 48459


Ignore:
Timestamp:
07/13/2020 05:06:57 PM (15 months ago)
Author:
whyisjake
Message:

Bundled Themes: Add custom color pallettes for block editor.

Gutenberg 7.9 added support for themes to bundle their own custom styles in to the editor. These changes have been added to 2010 - 2016.

See #50120.

Props kjellr, sabernhardt, ianbelanger.

Location:
trunk/src/wp-content/themes
Files:
7 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-content/themes/twentyeleven/editor-blocks.css

    r45862 r48459  
    13135.0 Blocks - Layout Elements
    14146.0 Blocks - Widgets
     157.0 Blocks - Colors
    1516--------------------------------------------------------------*/
    1617
     
    472473    margin-right: 0;
    473474}
     475
     476/*--------------------------------------------------------------
     4777.0 Blocks - Colors
     478--------------------------------------------------------------*/
     479
     480:root .editor-styles-wrapper .has-blue-color {
     481    color: #1982d1;
     482}
     483
     484:root .editor-styles-wrapper .has-blue-background-color {
     485    background-color: #1982d1;
     486}
     487
     488:root .editor-styles-wrapper .has-black-color {
     489    color: #000;
     490}
     491
     492:root .editor-styles-wrapper .has-black-background-color {
     493    background-color: #000;
     494}
     495
     496:root .editor-styles-wrapper .has-dark-gray-color {
     497    color: #373737;
     498}
     499
     500:root .editor-styles-wrapper .has-dark-gray-background-color {
     501    background-color: #373737;
     502}
     503
     504:root .editor-styles-wrapper .has-medium-gray-color {
     505    color: #666;
     506}
     507
     508:root .editor-styles-wrapper .has-medium-gray-background-color {
     509    background-color: #666;
     510}
     511
     512:root .editor-styles-wrapper .has-light-gray-color {
     513    color: #e2e2e2;
     514}
     515
     516:root .editor-styles-wrapper .has-light-gray-background-color {
     517    background-color: #e2e2e2;
     518}
     519
     520:root .editor-styles-wrapper .has-white-color {
     521    color: #fff;
     522}
     523
     524:root .editor-styles-wrapper .has-white-background-color {
     525    background-color: #fff;
     526}
  • trunk/src/wp-content/themes/twentyfifteen/css/editor-blocks.css

    r47934 r48459  
    13135.0 Blocks - Layout Elements
    14146.0 Blocks - Widgets
     157.0 Blocks - Colors
    1516--------------------------------------------------------------*/
    1617
     
    869870    margin-bottom: 16px;
    870871}
     872
     873/*--------------------------------------------------------------
     8747.0 Blocks - Colors
     875--------------------------------------------------------------*/
     876
     877:root .editor-styles-wrapper .has-dark-gray-color {
     878    color: #111;
     879}
     880
     881:root .editor-styles-wrapper .has-dark-gray-background-color {
     882    background-color: #111;
     883}
     884
     885:root .editor-styles-wrapper .has-light-gray-color {
     886    color: #f1f1f1;
     887}
     888
     889:root .editor-styles-wrapper .has-light-gray-background-color {
     890    background-color: #f1f1f1;
     891}
     892
     893:root .editor-styles-wrapper .has-white-color {
     894    color: #fff;
     895}
     896
     897:root .editor-styles-wrapper .has-white-background-color {
     898    background-color: #fff;
     899}
     900
     901:root .editor-styles-wrapper .has-yellow-color {
     902    color: #f4ca16;
     903}
     904
     905:root .editor-styles-wrapper .has-yellow-background-color {
     906    background-color: #f4ca16;
     907}
     908
     909:root .editor-styles-wrapper .has-dark-brown-color {
     910    color: #352712;
     911}
     912
     913:root .editor-styles-wrapper .has-dark-brown-background-color {
     914    background-color: #352712;
     915}
     916
     917:root .editor-styles-wrapper .has-medium-pink-color {
     918    color: #e53b51;
     919}
     920
     921:root .editor-styles-wrapper .has-medium-pink-background-color {
     922    background-color: #e53b51;
     923}
     924
     925:root .editor-styles-wrapper .has-light-pink-color {
     926    color: #ffe5d1;
     927}
     928
     929:root .editor-styles-wrapper .has-light-pink-background-color {
     930    background-color: #ffe5d1;
     931}
     932
     933:root .editor-styles-wrapper .has-dark-purple-color {
     934    color: #2e2256;
     935}
     936
     937:root .editor-styles-wrapper .has-dark-purple-background-color {
     938    background-color: #2e2256;
     939}
     940
     941:root .editor-styles-wrapper .has-purple-color {
     942    color: #674970;
     943}
     944
     945:root .editor-styles-wrapper .has-purple-background-color {
     946    background-color: #674970;
     947}
     948
     949:root .editor-styles-wrapper .has-blue-gray-color {
     950    color: #22313f;
     951}
     952
     953:root .editor-styles-wrapper .has-blue-gray-background-color {
     954    background-color: #22313f;
     955}
     956
     957:root .editor-styles-wrapper .has-bright-blue-color {
     958    color: #55c3dc;
     959}
     960
     961:root .editor-styles-wrapper .has-bright-blue-background-color {
     962    background-color: #55c3dc;
     963}
     964
     965:root .editor-styles-wrapper .has-light-blue-color {
     966    color: #e9f2f9;
     967}
     968
     969:root .editor-styles-wrapper .has-light-blue-background-color {
     970    background-color: #e9f2f9;
     971}
  • trunk/src/wp-content/themes/twentyfourteen/css/editor-blocks.css

    r44381 r48459  
    13135.0 Blocks - Layout Elements
    14146.0 Blocks - Widgets
     157.0 Blocks - Colors
    1516--------------------------------------------------------------*/
    1617
     
    483484    margin-right: 0;
    484485}
     486
     487/*--------------------------------------------------------------
     4887.0 Blocks - Colors
     489--------------------------------------------------------------*/
     490
     491:root .editor-styles-wrapper .has-green-color {
     492    color: #24890d;
     493}
     494
     495:root .editor-styles-wrapper .has-green-background-color {
     496    background-color: #24890d;
     497}
     498
     499:root .editor-styles-wrapper .has-black-color {
     500    color: #000;
     501}
     502
     503:root .editor-styles-wrapper .has-black-background-color {
     504    background-color: #000;
     505}
     506
     507:root .editor-styles-wrapper .has-dark-gray-color {
     508    color: #2b2b2b;
     509}
     510
     511:root .editor-styles-wrapper .has-dark-gray-background-color {
     512    background-color: #2b2b2b;
     513}
     514
     515:root .editor-styles-wrapper .has-medium-gray-color {
     516    color: #767676;
     517}
     518
     519:root .editor-styles-wrapper .has-medium-gray-background-color {
     520    background-color: #767676;
     521}
     522
     523:root .editor-styles-wrapper .has-light-gray-color {
     524    color: #f5f5f5;
     525}
     526
     527:root .editor-styles-wrapper .has-light-gray-background-color {
     528    background-color: #f5f5f5;
     529}
     530
     531:root .editor-styles-wrapper .has-white-color {
     532    color: #fff;
     533}
     534
     535:root .editor-styles-wrapper .has-white-background-color {
     536    background-color: #fff;
     537}
  • trunk/src/wp-content/themes/twentysixteen/css/editor-blocks.css

    r47273 r48459  
    13135.0 Blocks - Layout Elements
    14146.0 Blocks - Widgets
     157.0 Blocks - Colors
    1516--------------------------------------------------------------*/
    1617
     
    615616    margin-bottom: 16px;
    616617}
     618
     619/*--------------------------------------------------------------
     6207.0 Blocks - Colors
     621--------------------------------------------------------------*/
     622
     623:root .editor-styles-wrapper .has-dark-gray-color {
     624    color: #1a1a1a;
     625}
     626
     627:root .editor-styles-wrapper .has-dark-gray-background-color {
     628    background-color: #1a1a1a;
     629}
     630
     631:root .editor-styles-wrapper .has-medium-gray-color {
     632    color: #686868;
     633}
     634
     635:root .editor-styles-wrapper .has-medium-gray-background-color {
     636    background-color: #686868;
     637}
     638
     639:root .editor-styles-wrapper .has-light-gray-color {
     640    color: #e5e5e5;
     641}
     642
     643:root .editor-styles-wrapper .has-light-gray-background-color {
     644    background-color: #e5e5e5;
     645}
     646
     647:root .editor-styles-wrapper .has-white-color {
     648    color: #fff;
     649}
     650
     651:root .editor-styles-wrapper .has-white-background-color {
     652    background-color: #fff;
     653}
     654
     655:root .editor-styles-wrapper .has-blue-gray-color {
     656    color: #4d545c;
     657}
     658
     659:root .editor-styles-wrapper .has-blue-gray-background-color {
     660    background-color: #4d545c;
     661}
     662
     663:root .editor-styles-wrapper .has-bright-blue-color {
     664    color: #007acc;
     665}
     666
     667:root .editor-styles-wrapper .has-bright-blue-background-color {
     668    background-color: #007acc;
     669}
     670
     671:root .editor-styles-wrapper .has-light-blue-color {
     672    color: #9adffd;
     673}
     674
     675:root .editor-styles-wrapper .has-light-blue-background-color {
     676    background-color: #9adffd;
     677}
     678
     679:root .editor-styles-wrapper .has-dark-brown-color {
     680    color: #402b30;
     681}
     682
     683:root .editor-styles-wrapper .has-dark-brown-background-color {
     684    background-color: #402b30;
     685}
     686
     687:root .editor-styles-wrapper .has-medium-brown-color {
     688    color: #774e24;
     689}
     690
     691:root .editor-styles-wrapper .has-medium-brown-background-color {
     692    background-color: #774e24;
     693}
     694
     695:root .editor-styles-wrapper .has-dark-red-color {
     696    color: #640c1f;
     697}
     698
     699:root .editor-styles-wrapper .has-dark-red-background-color {
     700    background-color: #640c1f;
     701}
     702
     703:root .editor-styles-wrapper .has-bright-red-color {
     704    color: #ff675f;
     705}
     706
     707:root .editor-styles-wrapper .has-bright-red-background-color {
     708    background-color: #ff675f;
     709}
     710
     711:root .editor-styles-wrapper .has-yellow-color {
     712    color: #ffef8e;
     713}
     714
     715:root .editor-styles-wrapper .has-yellow-background-color {
     716    background-color: #ffef8e;
     717}
  • trunk/src/wp-content/themes/twentyten/editor-blocks.css

    r44313 r48459  
    12124.0 Blocks - Formatting
    13135.0 Blocks - Widgets
     146.0 Blocks - Colors
    1415--------------------------------------------------------------*/
    1516
     
    307308    margin-bottom: 1em;
    308309}
     310
     311/*--------------------------------------------------------------
     3126.0 Blocks - Colors
     313--------------------------------------------------------------*/
     314
     315:root .editor-styles-wrapper .has-blue-color,
     316:root .editor-styles-wrapper .has-blue-color:visited {
     317    color: #0066cc;
     318}
     319
     320:root .editor-styles-wrapper .has-blue-background-color,
     321:root .editor-styles-wrapper .has-blue-background-color:visited {
     322    background-color: #0066cc;
     323}
     324
     325:root .editor-styles-wrapper .has-black-color,
     326:root .editor-styles-wrapper .has-black-color:visited {
     327    color: #000;
     328}
     329
     330:root .editor-styles-wrapper .has-black-background-color,
     331:root .editor-styles-wrapper .has-black-background-color:visited {
     332    background-color: #000;
     333}
     334
     335:root .editor-styles-wrapper .has-medium-gray-color,
     336:root .editor-styles-wrapper .has-medium-gray-color:visited {
     337    color: #666;
     338}
     339
     340:root .editor-styles-wrapper .has-medium-gray-background-color,
     341:root .editor-styles-wrapper .has-medium-gray-background-color:visited {
     342    background-color: #666;
     343}
     344
     345:root .editor-styles-wrapper .has-light-gray-color,
     346:root .editor-styles-wrapper .has-light-gray-color:visited {
     347    color: #f1f1f1;
     348}
     349
     350:root .editor-styles-wrapper .has-light-gray-background-color,
     351:root .editor-styles-wrapper .has-light-gray-background-color:visited {
     352    background-color: #f1f1f1;
     353}
     354
     355:root .editor-styles-wrapper .has-white-color,
     356:root .editor-styles-wrapper .has-white-color:visited {
     357    color: #fff;
     358}
     359
     360:root .editor-styles-wrapper .has-white-background-color,
     361:root .editor-styles-wrapper .has-white-background-color:visited {
     362    background-color: #fff;
     363}
  • trunk/src/wp-content/themes/twentythirteen/css/editor-blocks.css

    r45606 r48459  
    13135.0 Blocks - Layout Elements
    14146.0 Blocks - Widgets
     157.0 Blocks - Colors
    1516--------------------------------------------------------------*/
    1617
     
    437438    margin-bottom: 1em;
    438439}
     440
     441/*--------------------------------------------------------------
     4427.0 Blocks - Colors
     443--------------------------------------------------------------*/
     444
     445:root .editor-styles-wrapper .has-dark-gray-color {
     446    color: #141412;
     447}
     448
     449:root .editor-styles-wrapper .has-dark-gray-background-color {
     450    background-color: #141412;
     451}
     452
     453:root .editor-styles-wrapper .has-red-color {
     454    color: #bc360a;
     455}
     456
     457:root .editor-styles-wrapper .has-red-background-color {
     458    background-color: #bc360a;
     459}
     460
     461:root .editor-styles-wrapper .has-medium-orange-color {
     462    color: #db572f;
     463}
     464
     465:root .editor-styles-wrapper .has-medium-orange-background-color {
     466    background-color: #db572f;
     467}
     468
     469:root .editor-styles-wrapper .has-light-orange-color {
     470    color: #ea9629;
     471}
     472
     473:root .editor-styles-wrapper .has-light-orange-background-color {
     474    background-color: #ea9629;
     475}
     476
     477:root .editor-styles-wrapper .has-yellow-color {
     478    color: #fbca3c;
     479}
     480
     481:root .editor-styles-wrapper .has-yellow-background-color {
     482    background-color: #fbca3c;
     483}
     484
     485:root .editor-styles-wrapper .has-white-color {
     486    color: #fff;
     487}
     488
     489:root .editor-styles-wrapper .has-white-background-color {
     490    background-color: #fff;
     491}
     492
     493:root .editor-styles-wrapper .has-dark-brown-color {
     494    color: #220e10;
     495}
     496
     497:root .editor-styles-wrapper .has-dark-brown-background-color {
     498    background-color: #220e10;
     499}
     500
     501:root .editor-styles-wrapper .has-medium-brown-color {
     502    color: #722d19;
     503}
     504
     505:root .editor-styles-wrapper .has-medium-brown-background-color {
     506    background-color: #722d19;
     507}
     508
     509:root .editor-styles-wrapper .has-light-brown-color {
     510    color: #eadaa6;
     511}
     512
     513:root .editor-styles-wrapper .has-light-brown-background-color {
     514    background-color: #eadaa6;
     515}
     516
     517:root .editor-styles-wrapper .has-beige-color {
     518    color: #e8e5ce;
     519}
     520
     521:root .editor-styles-wrapper .has-beige-background-color {
     522    background-color: #e8e5ce;
     523}
     524
     525:root .editor-styles-wrapper .has-off-white-color {
     526    color: #f7f5e7;
     527}
     528
     529:root .editor-styles-wrapper .has-off-white-background-color {
     530    background-color: #f7f5e7;
     531}
  • trunk/src/wp-content/themes/twentytwelve/css/editor-blocks.css

    r45124 r48459  
    13135.0 Blocks - Layout Elements
    14146.0 Blocks - Widgets
     157.0 Blocks - Colors
    1516--------------------------------------------------------------*/
    1617
     
    456457    padding-right: 0;
    457458}
     459
     460/*--------------------------------------------------------------
     4617.0 Blocks - Colors
     462--------------------------------------------------------------*/
     463
     464:root .editor-styles-wrapper .has-blue-color,
     465:root .editor-styles-wrapper .has-blue-color:visited {
     466    color: #21759b;
     467}
     468
     469:root .editor-styles-wrapper .has-blue-background-color,
     470:root .editor-styles-wrapper .has-blue-background-color:visited {
     471    background-color: #21759b;
     472}
     473
     474:root .editor-styles-wrapper .has-dark-gray-color,
     475:root .editor-styles-wrapper .has-dark-gray-color:visited {
     476    color: #373737;
     477}
     478
     479:root .editor-styles-wrapper .has-dark-gray-background-color,
     480:root .editor-styles-wrapper .has-dark-gray-background-color:visited {
     481    background-color: #373737;
     482}
     483
     484:root .editor-styles-wrapper .has-medium-gray-color,
     485:root .editor-styles-wrapper .has-medium-gray-color:visited {
     486    color: #9f9f9f;
     487}
     488
     489:root .editor-styles-wrapper .has-medium-gray-background-color,
     490:root .editor-styles-wrapper .has-medium-gray-background-color:visited {
     491    background-color: #9f9f9f;
     492}
     493
     494:root .editor-styles-wrapper .has-light-gray-color,
     495:root .editor-styles-wrapper .has-light-gray-color:visited {
     496    color: #e6e6e6;
     497}
     498
     499:root .editor-styles-wrapper .has-light-gray-background-color,
     500:root .editor-styles-wrapper .has-light-gray-background-color:visited {
     501    background-color: #e6e6e6;
     502}
     503
     504:root .editor-styles-wrapper .has-white-color,
     505:root .editor-styles-wrapper .has-white-color:visited {
     506    color: #fff;
     507}
     508
     509:root .editor-styles-wrapper .has-white-background-color,
     510:root .editor-styles-wrapper .has-white-background-color:visited {
     511    background-color: #fff;
     512}
Note: See TracChangeset for help on using the changeset viewer.