wpcom-editor-colors.php 8.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184
  1. <?php
  2. /*
  3. * Custom Editor Colors
  4. */
  5. // Background Color
  6. // $config-global--color-background-default
  7. add_editor_color_rule( 'bg', '#FFFFFF', array(
  8. // Background-color
  9. array( '#editor .editor-styles-wrapper', 'background-color' ),
  10. // Text-color
  11. array( '#editor .editor-styles-wrapper .button,
  12. #editor .editor-styles-wrapper .button.has-focus,
  13. #editor .editor-styles-wrapper .button:focus,
  14. #editor .editor-styles-wrapper .button:hover,
  15. #editor .editor-styles-wrapper .wp-block-a8c-blog-posts + .button,
  16. #editor .editor-styles-wrapper .wp-block-a8c-blog-posts + .button:focus,
  17. #editor .editor-styles-wrapper .wp-block-a8c-blog-posts + .button:hover,
  18. #editor .editor-styles-wrapper .wp-block-a8c-blog-posts + .has-focus.button,
  19. #editor .editor-styles-wrapper .wp-block-button:not(.is-style-outline) .wp-block-button__link,
  20. #editor .editor-styles-wrapper .wp-block-search .wp-block-search__button,
  21. #editor .editor-styles-wrapper .wp-block-button:not(.is-style-outline) .wp-block-button__link.has-focus,
  22. #editor .editor-styles-wrapper .wp-block-button:not(.is-style-outline) .wp-block-button__link:focus,
  23. #editor .editor-styles-wrapper .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover,
  24. #editor .editor-styles-wrapper .wp-block-media-text,
  25. #editor .editor-styles-wrapper .wp-block-pullquote.is-style-solid-color', 'color' ),
  26. /**
  27. * Utility Classes
  28. */
  29. // Text-color
  30. array( '#editor .editor-styles-wrapper .has-primary-background-color[class],
  31. #editor .editor-styles-wrapper .has-secondary-background-color[class],
  32. #editor .editor-styles-wrapper .has-foreground-background-color[class],
  33. #editor .editor-styles-wrapper .has-foreground-dark-background-color[class],
  34. #editor .editor-styles-wrapper .has-foreground-light-background-color[class],
  35. #editor .editor-styles-wrapper .has-background-color[class]', 'color' ),
  36. // Background-color
  37. array( '#editor .editor-styles-wrapper .has-background-background-color[class]', 'background-color' ),
  38. // Text-color darkened
  39. array( '#editor .editor-styles-wrapper .has-background-dark-color[class]', 'color', '-1' ),
  40. // Background-color darkened
  41. array( '#editor .editor-styles-wrapper .has-background-dark-background-color[class]', 'background-color', '-1' ),
  42. // Text-color lightened
  43. array( '#editor .editor-styles-wrapper .has-background-light-color[class]', 'color', '+1' ),
  44. // Background-color lightened
  45. array( '#editor .editor-styles-wrapper .has-background-light-background-color[class]', 'background-color', '+1' ),
  46. /**
  47. * Grays
  48. * Uses a slightly darker color
  49. */
  50. // Color
  51. array( '#editor .editor-styles-wrapper .wp-block-separator.is-style-dots', 'color', '-1' ),
  52. // Border-color
  53. array( '#editor .editor-styles-wrapper .wp-block-code', 'border-color', '-1' ),
  54. // Border-top-color
  55. array( '#editor .editor-styles-wrapper .wp-block-pullquote', 'border-top-color', '-1' ),
  56. // Border-bottom-color
  57. array( '#editor .editor-styles-wrapper .wp-block-pullquote,
  58. #editor .editor-styles-wrapper .wp-block-separator', 'border-bottom-color', '-1' ),
  59. ), __( 'Background Color' ) );
  60. // Link Color
  61. // $config-global--color-primary-default
  62. add_editor_color_rule( 'link', '#0073AA', array(
  63. // Background-color
  64. array( '#editor .editor-styles-wrapper .button,
  65. #editor .editor-styles-wrapper .wp-block-a8c-blog-posts + .button,
  66. #editor .editor-styles-wrapper .wp-block-button:not(.is-style-outline) .wp-block-button__link:not(.has-background-color),
  67. #editor .editor-styles-wrapper .wp-block-button:not(.is-style-outline) .wp-block-button__link:not(.has-background),
  68. #editor .editor-styles-wrapper .wp-block-search .wp-block-search__button,
  69. #editor .editor-styles-wrapper .wp-block-pullquote.is-style-solid-color', 'background-color' ),
  70. // Text-color
  71. array( '#editor .editor-styles-wrapper .wp-block-a8c-blog-posts .entry-title a,
  72. #editor .editor-styles-wrapper .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color),
  73. #editor .editor-styles-wrapper a', 'color' ),
  74. // Border color left
  75. array( '#editor .editor-styles-wrapper .wp-block-quote', 'border-left-color' ),
  76. // Border color right
  77. array( '#editor .editor-styles-wrapper .wp-block-quote[style*="text-align: right"],
  78. #editor .editor-styles-wrapper .wp-block-quote[style*="text-align:right"]', 'border-right-color' ),
  79. /**
  80. * Utility Classes
  81. */
  82. // Background-color
  83. array( '#editor .editor-styles-wrapper .has-primary-background-color[class]', 'background-color' ),
  84. // Text-color
  85. array( '#editor .editor-styles-wrapper .has-primary-color[class]', 'color' ),
  86. ), __( 'Link Color' ) );
  87. // Text Color
  88. // $config-global--color-foreground-default
  89. add_editor_color_rule( 'txt', '#1e1e1e', array(
  90. // Text-color
  91. array( '#editor .editor-styles-wrapper .editor-post-title__block .editor-post-title__input,
  92. #editor .editor-styles-wrapper .wp-block-pullquote,
  93. #editor .editor-styles-wrapper', 'color' ),
  94. /**
  95. * Utility Classes
  96. */
  97. // Text-color
  98. array( '#editor .editor-styles-wrapper .has-background-background-color[class],
  99. #editor .editor-styles-wrapper .has-background-dark-background-color[class],
  100. #editor .editor-styles-wrapper .has-background-light-background-color[class],
  101. #editor .editor-styles-wrapper .has-foreground-color[class]', 'color' ),
  102. // Background-color
  103. array( '#editor .editor-styles-wrapper .has-foreground-background-color[class]', 'background-color' ),
  104. // Text-color darkened
  105. array( '#editor .editor-styles-wrapper .has-foreground-dark-color[class]', 'color', '-1' ),
  106. // Background-color darkened
  107. array( '#editor .editor-styles-wrapper .has-foreground-dark-background-color[class]', 'background-color', '-1' ),
  108. // Text-color brightened
  109. array( '#editor .editor-styles-wrapper .has-foreground-light-color[class]', 'color', '+2' ),
  110. // Background-color brightened
  111. array( '#editor .editor-styles-wrapper .has-foreground-light-background-color[class]', 'background-color', '+2' ),
  112. /**
  113. * Grays
  114. * Same as text color
  115. */
  116. // Text-color
  117. array( '#editor .editor-styles-wrapper .a8c-posts-list__item .a8c-posts-list-item__meta,
  118. #editor .editor-styles-wrapper .wp-block-image figcaption,
  119. #editor .editor-styles-wrapper .wp-block-latest-comments .wp-block-latest-comments__comment-date,
  120. #editor .editor-styles-wrapper .wp-block-latest-posts .wp-block-latest-posts__post-date,
  121. #editor .editor-styles-wrapper .wp-block-newspack-blocks-homepage-articles article .cat-links,
  122. #editor .editor-styles-wrapper .wp-block-newspack-blocks-homepage-articles article .entry-meta,
  123. #editor .editor-styles-wrapper .wp-block-pullquote .wp-block-pullquote__citation,
  124. #editor .editor-styles-wrapper .wp-block-pullquote cite,
  125. #editor .editor-styles-wrapper .wp-block-pullquote footer,
  126. #editor .editor-styles-wrapper .wp-block-quote .wp-block-quote__citation,
  127. #editor .editor-styles-wrapper .wp-block-quote cite,
  128. #editor .editor-styles-wrapper .wp-block-quote footer,
  129. #editor .editor-styles-wrapper .wp-block-quote.is-large .wp-block-quote__citation,
  130. #editor .editor-styles-wrapper .wp-block-quote.is-large cite,
  131. #editor .editor-styles-wrapper .wp-block-quote.is-large footer,
  132. #editor .editor-styles-wrapper .wp-block-quote.is-style-large .wp-block-quote__citation,
  133. #editor .editor-styles-wrapper .wp-block-quote.is-style-large cite,
  134. #editor .editor-styles-wrapper .wp-block-quote.is-style-large footer,
  135. #editor .editor-styles-wrapper .wp-block-video figcaption,
  136. #editor .editor-styles-wrapper figcaption', 'color' ),
  137. ), __( 'Text Color' ) );
  138. // Accent Color
  139. // $config-global--color-secondary-default
  140. add_editor_color_rule( 'fg1', '#0d1b24', array(
  141. // Background-color
  142. array( '#editor .editor-styles-wrapper .wp-block-media-text', 'background-color' ),
  143. /**
  144. * Utility Classes
  145. */
  146. // Text-color
  147. array( '#editor .editor-styles-wrapper .has-secondary-color[class]', 'color' ),
  148. // Background-color
  149. array( '#editor .editor-styles-wrapper .has-secondary-background-color[class]', 'background-color' ),
  150. ), __( 'Secondary Color' ) );
  151. /**
  152. * Custom CSS
  153. */
  154. function dalston_editor_custom_colors_extra_css() { ?>
  155. #editor .editor-styles-wrapper .has-background:not(.has-background-background-color) a:not(.wp-block-button__link),
  156. #editor .editor-styles-wrapper p.has-text-color a {
  157. color: currentColor;
  158. }
  159. <?php }
  160. add_theme_support( 'custom_colors_extra_css', 'dalston_editor_custom_colors_extra_css' );