_editor.scss 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134
  1. .a8c-template-editor {
  2. @media (min-width: 600px) {
  3. .block-editor-block-list__layout .block-editor-block-list__block[data-align="full"] .block-editor-block-list__layout .block-editor-block-list__block[data-align="full"] {
  4. margin-left: 0;
  5. margin-right: 0;
  6. }
  7. }
  8. // Match margins for template parts rendered in the page and template part editor view.
  9. .block-editor-block-list__block-edit {
  10. [data-block] {
  11. margin: 12px 0 0 0;
  12. }
  13. }
  14. }
  15. .template-block {
  16. .fse-template-part {
  17. padding: #{map-deep-get($config-global, "spacing", "unit")};
  18. @include media(mobile) {
  19. padding: #{map-deep-get($config-global, "spacing", "vertical")} 0;
  20. }
  21. figure.fse-site-logo {
  22. width: auto;
  23. }
  24. // Hide the (+) icons when rendering the Template Part block inside the Page editor.
  25. .block-list-appender {
  26. display: none;
  27. }
  28. // Remove the top margin if the Site Title block is the first in a column block
  29. .wp-block-column .block-editor-block-list__layout [data-type='a8c/site-title']:first-child .site-title {
  30. margin-top: 0;
  31. }
  32. }
  33. }
  34. .fse-template-part {
  35. .wp-block-cover,
  36. .wp-block-cover-image {
  37. .site-title,
  38. .site-description {
  39. background: transparent;
  40. color: inherit;
  41. }
  42. }
  43. .block-editor-block-list__layout .block-editor-block-list__block[data-align='full'] > .block-editor-block-list__block-edit figure.fse-site-logo {
  44. width: auto;
  45. }
  46. // Make sure each column in a Columns block is max width, so that nested FSE blocks can behave as expected.
  47. .wp-block-column {
  48. width: 100%;
  49. }
  50. // Remove large margins on column children when used in a template part.
  51. .wp-block-columns .wp-block-column {
  52. & > * {
  53. margin: 0 0 5px 0;
  54. }
  55. }
  56. @import '../components/header/site-main-navigation';
  57. .main-navigation {
  58. text-align: center;
  59. .alignwide, .alignfull {
  60. width: 100%;
  61. }
  62. @import "../base/extends";
  63. .button {
  64. @extend %button-style
  65. }
  66. .main-menu.footer-menu li {
  67. a {
  68. font-size: inherit;
  69. }
  70. &.menu-item-has-children > a::after {
  71. font-size: 0.6em;
  72. vertical-align: middle;
  73. }
  74. }
  75. .has-text-color > .main-menu.footer-menu > li > a {
  76. color: inherit;
  77. }
  78. .has-text-align-left > .main-menu.footer-menu {
  79. justify-content: flex-start;
  80. }
  81. .has-text-align-center > .main-menu.footer-menu {
  82. justify-content: center;
  83. }
  84. .has-text-align-right > .main-menu.footer-menu {
  85. justify-content: flex-end;
  86. }
  87. .has-background > .main-menu.footer-menu {
  88. padding: #{map-deep-get($config-global, "spacing", "unit")};
  89. }
  90. }
  91. }
  92. // Remove top margin/padding from the header if the first block is .alignfull
  93. @include media(mobile) {
  94. .a8c-template-editor.fse-header .block-editor-block-list__layout > .block-editor-block-list__block {
  95. &.is-selected:first-child[data-align='full'] > .block-editor-block-list__block-edit > [data-block] {
  96. margin-top: 14px;
  97. }
  98. &:not(.is-selected):first-child[data-align='full'] > .block-editor-block-list__block-edit > [data-block] {
  99. margin-top: 0;
  100. }
  101. }
  102. }
  103. .template-block .fse-header .block-editor-block-list__layout > .block-editor-block-list__block:first-child[data-align='full'] {
  104. margin-top: -16px;
  105. @include media(mobile) {
  106. margin-top: -32px;
  107. }
  108. }
  109. .post-content__block {
  110. margin-bottom: 160px;
  111. margin-top: 36px;
  112. // Minimum z-index to appear above the Template block overlay.
  113. // @see https://github.com/WordPress/gutenberg/blob/f198997e2c8e377423beb230ce5283914076d396/packages/block-editor/src/components/block-list/style.scss#L495-L496
  114. // @see https://github.com/WordPress/gutenberg/blob/f198997e2c8e377423beb230ce5283914076d396/assets/stylesheets/_z-index.scss#L8
  115. z-index: 20;
  116. }