_editor.scss 5.6 KB

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