_editor.scss 5.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233
  1. // Editor UI font styles
  2. .wp-block.block-editor-default-block-appender > textarea {
  3. font-family: var(--global--font-secondary);
  4. font-size: var(--global--font-size-md);
  5. }
  6. // Gutenberg text color options
  7. .has-text-color {}
  8. .has-primary-color[class] {
  9. color: var(--global--color-primary);
  10. }
  11. .has-secondary-color[class] {
  12. color: var(--global--color-secondary);
  13. }
  14. .has-foreground-color[class] {
  15. color: var(--global--color-foreground);
  16. }
  17. .has-foreground-low-contrast-color[class] {
  18. color: var(--global--color-foreground-low-contrast);
  19. }
  20. .has-foreground-high-contrast-color[class] {
  21. color: var(--global--color-foreground-high-contrast);
  22. }
  23. .has-tertiary-color[class] {
  24. color: var(--global--color-tertiary);
  25. }
  26. .has-background-dark-color[class] {
  27. color: var(--global--color-background-dark);
  28. }
  29. .has-background-color[class] {
  30. color: var(--global--color-background);
  31. }
  32. // Gutenberg background-color options
  33. .has-background {
  34. &:not(.has-background-background-color) a,
  35. p, h1, h2, h3, h4, h5, h6 {
  36. color: currentColor;
  37. }
  38. }
  39. .has-primary-background-color[class] {
  40. background-color: var(--global--color-primary);
  41. color: var(--global--color-background);
  42. }
  43. .has-primary-background-color[class] {
  44. background-color: var(--global--color-primary);
  45. color: var(--global--color-background);
  46. }
  47. .has-secondary-background-color[class] {
  48. background-color: var(--global--color-secondary);
  49. color: var(--global--color-background);
  50. }
  51. .has-foreground-background-color[class] {
  52. background-color: var(--global--color-foreground);
  53. color: var(--global--color-background);
  54. }
  55. .has-foreground-light-background-color[class] {
  56. background-color: var(--global--color-foreground-low-contrast);
  57. color: var(--global--color-background);
  58. }
  59. .has-foreground-high-contrast-background-color[class] {
  60. background-color: var(--global--color-foreground-high-contrast);
  61. color: var(--global--color-background);
  62. }
  63. .has-tertiary-background-color[class] {
  64. background-color: var(--global--color-tertiary);
  65. color: var(--global--color-foreground);
  66. }
  67. .has-background-dark-background-color[class] {
  68. background-color: var(--global--color-background-dark);
  69. color: var(--global--color-foreground);
  70. }
  71. .has-background-background-color[class] {
  72. background-color: var(--global--color-background);
  73. color: var(--global--color-foreground);
  74. }
  75. .has-white-background-color[class] {
  76. background-color: var(--global--color-white);
  77. color: var(--global--color-secondary);
  78. }
  79. .has-black-background-color[class] {
  80. background-color: var(--global--color-black);
  81. color: var(--global--color-primary);
  82. }
  83. // Gutenberg Font-size utility classes
  84. .is-tiny-text,
  85. .has-tiny-font-size {
  86. font-size: var(--global--font-size-xs);
  87. }
  88. .is-small-text,
  89. .has-small-font-size {
  90. font-size: var(--global--font-size-sm);
  91. }
  92. .is-regular-text,
  93. .has-regular-font-size,
  94. .has-normal-font-size,
  95. .has-medium-font-size {
  96. font-size: var(--global--font-size-md);
  97. }
  98. .is-large-text,
  99. .has-large-font-size {
  100. font-size: var(--global--font-size-lg);
  101. line-height: var(--global--line-height-heading);
  102. }
  103. .is-larger-text,
  104. .has-larger-font-size,
  105. .has-huge-font-size {
  106. font-size: var(--global--font-size-xl);
  107. line-height: var(--global--line-height-heading);
  108. }
  109. // Drop cap
  110. .has-drop-cap:not(:focus)::first-letter {
  111. font-family: var(--heading--font-family);
  112. font-size: calc(2 * var(--heading--font-size-h1));
  113. font-weight: var(--heading--font-weight);
  114. }
  115. /**
  116. * Spacing Overrides
  117. */
  118. @import "spacing-overrides";
  119. [data-block] {
  120. margin-top: var(--global--spacing-vertical);
  121. margin-bottom: var(--global--spacing-vertical);
  122. }
  123. /*
  124. * Custom gradients
  125. */
  126. .has-hard-diagonal-gradient-background {
  127. background: linear-gradient(to bottom right, var(--global--color-secondary) 49.9%, var(--global--color-tertiary) 50%);
  128. }
  129. .has-hard-diagonal-inverted-gradient-background {
  130. background: linear-gradient(to top left, var(--global--color-secondary) 49.9%, var(--global--color-tertiary) 50%);
  131. }
  132. .has-diagonal-gradient-background {
  133. background: linear-gradient(to bottom right, var(--global--color-secondary), var(--global--color-tertiary));
  134. }
  135. .has-diagonal-inverted-gradient-background {
  136. background: linear-gradient(to top left, var(--global--color-secondary), var(--global--color-tertiary));
  137. }
  138. .has-hard-horizontal-gradient-background {
  139. background: linear-gradient(to bottom, var(--global--color-secondary) 50%, var(--global--color-tertiary) 50%);
  140. }
  141. .has-hard-horizontal-inverted-gradient-background {
  142. background: linear-gradient(to top, var(--global--color-secondary) 50%, var(--global--color-tertiary) 50%);
  143. }
  144. .has-horizontal-gradient-background {
  145. background: linear-gradient(to bottom, var(--global--color-secondary), var(--global--color-tertiary));
  146. }
  147. .has-horizontal-inverted-gradient-background {
  148. background: linear-gradient(to top, var(--global--color-secondary), var(--global--color-tertiary));
  149. }
  150. .has-stripe-gradient-background {
  151. background: linear-gradient(to bottom, transparent 20%, var(--global--color-secondary) 20%, var(--global--color-secondary) 80%, transparent 80%);
  152. }
  153. /* Block Alignments */
  154. .wp-block {
  155. // Gutenberg injects a rule that limits the max width of .wp-block to 580px
  156. // This line overrides it to use the responsive spacing rules for default width content
  157. max-width: var(--responsive--aligndefault-width);
  158. // Use the theme's max-width for wide alignment.
  159. &[data-align="wide"],
  160. &.alignwide {
  161. max-width: var(--responsive--alignwide-width);
  162. }
  163. &[data-align="full"],
  164. &.alignfull {
  165. max-width: none;
  166. }
  167. }
  168. // Selects the post editor and not the site editor
  169. .block-editor-block-list__layout:not(.edit-site-block-editor__block-list){
  170. .wp-block {
  171. &[data-align="full"],
  172. &.alignfull {
  173. &>[data-block] {
  174. margin-top: 0;
  175. margin-bottom: 0;
  176. }
  177. }
  178. }
  179. }
  180. .alignleft {
  181. margin: 0;
  182. margin-right: var(--global--spacing-horizontal);
  183. }
  184. .alignright {
  185. margin: 0;
  186. margin-left: var(--global--spacing-horizontal);
  187. }