wpcom-editor-colors.php 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221
  1. <?php declare( strict_types = 1 ); ?>
  2. <?php
  3. /*
  4. * Custom Editor Colors
  5. */
  6. // Background Color
  7. // $config-global--color-background-default
  8. add_editor_color_rule( 'bg', '#FFFFFF', array(
  9. // Background-color
  10. array( '#editor .editor-styles-wrapper', 'background-color' ),
  11. // Text-color
  12. array( '#editor .editor-styles-wrapper .button,
  13. #editor .editor-styles-wrapper .button.has-focus,
  14. #editor .editor-styles-wrapper .button:focus,
  15. #editor .editor-styles-wrapper .button:hover,
  16. #editor .editor-styles-wrapper .wp-block-a8c-blog-posts + .button,
  17. #editor .editor-styles-wrapper .wp-block-a8c-blog-posts + .button:focus,
  18. #editor .editor-styles-wrapper .wp-block-a8c-blog-posts + .button:hover,
  19. #editor .editor-styles-wrapper .wp-block-a8c-blog-posts + .has-focus.button,
  20. #editor .editor-styles-wrapper .wp-block-button__link,
  21. #editor .editor-styles-wrapper .wp-block-button__link.has-focus,
  22. #editor .editor-styles-wrapper .wp-block-button__link:focus,
  23. #editor .editor-styles-wrapper .wp-block-button__link:hover,
  24. #editor .editor-styles-wrapper table.is-style-stripes tbody tr:nth-child(odd),
  25. #editor .editor-styles-wrapper .wp-block-table.is-style-stripes tbody tr:nth-child(odd),
  26. #editor .editor-styles-wrapper .wp-block-search .wp-block-search__button,
  27. #editor .editor-styles-wrapper .has-background a,
  28. #editor .editor-styles-wrapper .wp-block-pullquote.is-style-solid-color', 'color' ),
  29. /**
  30. * Utility Classes
  31. */
  32. // Text-color
  33. array( '#editor .editor-styles-wrapper .has-primary-background-color[class],
  34. #editor .editor-styles-wrapper .has-secondary-background-color[class],
  35. #editor .editor-styles-wrapper .has-foreground-background-color[class],
  36. #editor .editor-styles-wrapper .has-foreground-dark-background-color[class],
  37. #editor .editor-styles-wrapper .has-foreground-light-background-color[class],
  38. #editor .editor-styles-wrapper .has-background-color[class]', 'color' ),
  39. // Background-color
  40. array( '#editor .editor-styles-wrapper .has-background-background-color[class]', 'background-color' ),
  41. // Text-color darkened
  42. array( '#editor .editor-styles-wrapper .has-background-dark-color[class]', 'color', '-1' ),
  43. // Background-color darkened
  44. array( '#editor .editor-styles-wrapper .has-background-dark-background-color[class]', 'background-color', '-1' ),
  45. // Text-color lightened
  46. array( '#editor .editor-styles-wrapper .has-background-light-color[class]', 'color', '+1' ),
  47. // Background-color lightened
  48. array( '#editor .editor-styles-wrapper .has-background-light-background-color[class]', 'background-color', '+1' ),
  49. /**
  50. * Grays
  51. * Uses a slightly darker color
  52. */
  53. // Color
  54. array( '#editor .editor-styles-wrapper .wp-block-separator.is-style-dots', 'color', '-1' ),
  55. // Border-color
  56. array( '#editor .editor-styles-wrapper .wp-block-code', 'border-color', '-1' ),
  57. // Border-top-color
  58. array( '#editor .editor-styles-wrapper .wp-block-pullquote', 'border-top-color', '-1' ),
  59. // Border-bottom-color
  60. array( '#editor .editor-styles-wrapper .wp-block-pullquote,
  61. #editor .editor-styles-wrapper .wp-block-separator', 'border-bottom-color', '-1' ),
  62. /**
  63. * Clean up for nested items
  64. */
  65. // Text-color
  66. array( '#editor .editor-styles-wrapper .has-background:not(.has-background-background-color) .wp-block-quote .wp-block-quote__citation,
  67. #editor .editor-styles-wrapper [class*="background-color"]:not(.has-background-background-color) .wp-block-quote .wp-block-quote__citation,
  68. #editor .editor-styles-wrapper [style*="background-color"]:not(.has-background-background-color) .wp-block-quote .wp-block-quote__citation,
  69. #editor .editor-styles-wrapper .wp-block-cover[style*="background-image"] .wp-block-quote .wp-block-quote__citation', 'color' ),
  70. // Border-color
  71. array( '#editor .editor-styles-wrapper .has-background:not(.has-background-background-color) .wp-block-quote,
  72. #editor .editor-styles-wrapper [class*="background-color"]:not(.has-background-background-color) .wp-block-quote,
  73. #editor .editor-styles-wrapper [style*="background-color"]:not(.has-background-background-color) .wp-block-quote,
  74. #editor .editor-styles-wrapper .wp-block-cover[style*="background-image"] .wp-block-quote', 'border-color'),
  75. ), __( 'Background Color' ) );
  76. // Link Color
  77. // $config-global--color-primary-default
  78. add_editor_color_rule( 'link', '#000000', array(
  79. // Background-color
  80. array( '#editor .editor-styles-wrapper .button,
  81. #editor .editor-styles-wrapper .wp-block-search .wp-block-search__button,
  82. #editor .editor-styles-wrapper .wp-block-a8c-blog-posts + .button,
  83. #editor .editor-styles-wrapper .wp-block-button:not(.is-style-outline) .wp-block-button__link:not(.has-background),
  84. #editor .editor-styles-wrapper .wp-block-pullquote.is-style-solid-color', 'background-color' ),
  85. // Text-color
  86. array( '#editor .editor-styles-wrapper .is-style-outline .wp-block-button__link:not(.has-text-color),
  87. #editor .editor-styles-wrapper .wp-block-button__link.is-style-outline:not(.has-text-color),
  88. #editor .editor-styles-wrapper a', 'color' ),
  89. // Border color left
  90. array( '#editor .editor-styles-wrapper .wp-block-quote', 'border-left-color' ),
  91. // Border color right
  92. array( '#editor .editor-styles-wrapper .wp-block-quote[style*="text-align: right"],
  93. #editor .editor-styles-wrapper .wp-block-quote[style*="text-align:right"]', 'border-right-color' ),
  94. /**
  95. * Utility Classes
  96. */
  97. // Background-color
  98. array( '#editor .editor-styles-wrapper .has-primary-background-color[class]', 'background-color' ),
  99. // Text-color
  100. array( '#editor .editor-styles-wrapper .has-primary-color[class]', 'color' ),
  101. ), __( 'Link Color' ) );
  102. // Text Color
  103. // $config-global--color-foreground-default
  104. add_editor_color_rule( 'txt', '#444444', array(
  105. // Text-color
  106. array( '#editor .editor-styles-wrapper .editor-post-title__block .editor-post-title__input,
  107. #editor .editor-styles-wrapper .wp-block-pullquote,
  108. #editor .editor-styles-wrapper', 'color' ),
  109. // Background-color
  110. array( '#editor .editor-styles-wrapper table.is-style-stripes tbody tr:nth-child(odd),
  111. #editor .editor-styles-wrapper .wp-block-table.is-style-stripes tbody tr:nth-child(odd)', 'background-color' ),
  112. /**
  113. * Utility Classes
  114. */
  115. // Text-color
  116. array( '#editor .editor-styles-wrapper .has-foreground-color[class],
  117. #editor .editor-styles-wrapper .has-background-background-color[class],
  118. #editor .editor-styles-wrapper .has-background-dark-background-color[class],
  119. #editor .editor-styles-wrapper .has-background-light-background-color[class],
  120. #editor .editor-styles-wrapper .has-background-background-color[class] a', 'color' ),
  121. // Background-color
  122. array( '#editor .editor-styles-wrapper .has-foreground-background-color[class]', 'background-color' ),
  123. // Text-color darkened
  124. array( '#editor .editor-styles-wrapper .has-foreground-dark-color[class]', 'color', '-1' ),
  125. // Background-color darkened
  126. array( '#editor .editor-styles-wrapper .has-foreground-dark-background-color[class]', 'background-color', '-1' ),
  127. // Text-color brightened
  128. array( '#editor .editor-styles-wrapper .has-foreground-light-color[class]', 'color', '+2' ),
  129. // Background-color brightened
  130. array( '#editor .editor-styles-wrapper .has-foreground-light-background-color[class]', 'background-color', '+2' ),
  131. /**
  132. * Grays
  133. * Same as text color
  134. */
  135. // Text-color
  136. array( '#editor .editor-styles-wrapper .a8c-posts-list__item .a8c-posts-list-item__meta,
  137. #editor .editor-styles-wrapper .wp-block-image figcaption,
  138. #editor .editor-styles-wrapper .wp-block-latest-comments .wp-block-latest-comments__comment-date,
  139. #editor .editor-styles-wrapper .wp-block-latest-posts .wp-block-latest-posts__post-date,
  140. #editor .editor-styles-wrapper .wp-block-newspack-blocks-homepage-articles article .cat-links,
  141. #editor .editor-styles-wrapper .wp-block-newspack-blocks-homepage-articles article .entry-meta,
  142. #editor .editor-styles-wrapper .wp-block-pullquote .wp-block-pullquote__citation,
  143. #editor .editor-styles-wrapper .wp-block-pullquote cite,
  144. #editor .editor-styles-wrapper .wp-block-pullquote footer,
  145. #editor .editor-styles-wrapper .wp-block-quote .wp-block-quote__citation,
  146. #editor .editor-styles-wrapper .wp-block-quote cite,
  147. #editor .editor-styles-wrapper .wp-block-quote footer,
  148. #editor .editor-styles-wrapper .wp-block-quote.is-large .wp-block-quote__citation,
  149. #editor .editor-styles-wrapper .wp-block-quote.is-large cite,
  150. #editor .editor-styles-wrapper .wp-block-quote.is-large footer,
  151. #editor .editor-styles-wrapper .wp-block-quote.is-style-large .wp-block-quote__citation,
  152. #editor .editor-styles-wrapper .wp-block-quote.is-style-large cite,
  153. #editor .editor-styles-wrapper .wp-block-quote.is-style-large footer,
  154. #editor .editor-styles-wrapper .wp-block-video figcaption,
  155. #editor .editor-styles-wrapper figcaption', 'color' ),
  156. ), __( 'Text Color' ) );
  157. // Accent Color (Red)
  158. // $config-global--color-secondary-default
  159. add_editor_color_rule( 'fg1', '#FF7A5C', array(
  160. // Text-color
  161. array( '#editor .editor-styles-wrapper .is-style-outline .wp-block-button__link.has-focus,
  162. #editor .editor-styles-wrapper .is-style-outline .wp-block-button__link:focus,
  163. #editor .editor-styles-wrapper .is-style-outline .wp-block-button__link:hover,
  164. #editor .editor-styles-wrapper .wp-block-a8c-blog-posts .cat-links a:active,
  165. #editor .editor-styles-wrapper .wp-block-a8c-blog-posts .cat-links a:hover,
  166. #editor .editor-styles-wrapper .wp-block-a8c-blog-posts .entry-meta a:active,
  167. #editor .editor-styles-wrapper .wp-block-a8c-blog-posts .entry-meta a:hover,
  168. #editor .editor-styles-wrapper .wp-block-a8c-blog-posts .entry-title a:hover,
  169. #editor .editor-styles-wrapper .wp-block-a8c-blog-posts .more-link:active,
  170. #editor .editor-styles-wrapper .wp-block-a8c-blog-posts .more-link:hover,
  171. #editor .editor-styles-wrapper .wp-block-button__link.is-style-outline.has-focus,
  172. #editor .editor-styles-wrapper .wp-block-button__link.is-style-outline:focus,
  173. #editor .editor-styles-wrapper .wp-block-button__link.is-style-outline:hover,
  174. #editor .editor-styles-wrapper a:hover', 'color' ),
  175. // Background-color
  176. array( '#editor .editor-styles-wrapper .button.has-focus,
  177. #editor .editor-styles-wrapper .button:focus,
  178. #editor .editor-styles-wrapper .button:hover,
  179. #editor .editor-styles-wrapper .wp-block-a8c-blog-posts + .button:focus,
  180. #editor .editor-styles-wrapper .wp-block-a8c-blog-posts + .button:hover,
  181. #editor .editor-styles-wrapper .wp-block-a8c-blog-posts + .has-focus.button,
  182. #editor .editor-styles-wrapper .wp-block-button__link.has-focus,
  183. #editor .editor-styles-wrapper .wp-block-button__link:focus,
  184. #editor .editor-styles-wrapper .wp-block-button__link:hover', 'background-color' ),
  185. // Text-decoration-color
  186. array( '#editor .editor-styles-wrapper .wp-block-a8c-blog-posts .more-link', 'text-decoration-color' ),
  187. /**
  188. * Utility Classes
  189. */
  190. // Text-color
  191. array( '#editor .editor-styles-wrapper .has-secondary-color[class]', 'color' ),
  192. // Background-color
  193. array( '#editor .editor-styles-wrapper .has-secondary-background-color[class]', 'background-color' ),
  194. ), __( 'Secondary Color' ) );