_alignment.scss 1.9 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546
  1. // This targets the editor. It is the closest equivalent to .wp-block-post-content,
  2. // since the editor does not output that class.
  3. .is-root-container {
  4. padding-left: var(--wp--custom--post-content--padding--left);
  5. padding-right: var(--wp--custom--post-content--padding--right);
  6. }
  7. .block-editor-block-list__layout.is-root-container>.wp-block[data-align=full],
  8. .wp-block-post-content > .alignfull {
  9. margin-left: calc(-1 * var(--wp--custom--post-content--padding--left)) !important;
  10. margin-right: calc(-1 * var(--wp--custom--post-content--padding--right)) !important;
  11. width: calc( 100% + var(--wp--custom--post-content--padding--left) + var(--wp--custom--post-content--padding--right) ) !important;
  12. }
  13. .site-header,
  14. .post-header,
  15. .page-content,
  16. [data-align="full"] p,
  17. .alignfull p {
  18. padding-left: var(--wp--custom--post-content--padding--left);
  19. padding-right: var(--wp--custom--post-content--padding--right);
  20. }
  21. @include break-mobile {
  22. // limit size of any element that is aligned left/right
  23. .wp-block[data-align="left"], // This is for the editor
  24. .wp-block[data-align="right"], // This is for the editor
  25. .wp-site-blocks .alignleft,
  26. .wp-site-blocks .alignright {
  27. max-width: var(--wp--custom--alignment--aligned-max-width);
  28. }
  29. }
  30. // When content is aligned left/right (particularly inside of a container) it is floated left/right
  31. // and needs something to ensure that the content follows the block rather than nestling up beside the floated element.
  32. // The issue should be resolved upstream: https://github.com/WordPress/gutenberg/issues/10299
  33. .wp-block-group:not(.site-header) {
  34. overflow: auto;
  35. }
  36. // This was added for the 'site-logo' block which centers with an 'align:center' attribute
  37. // instead of 'textAlign' center which sets an .aligncenter class instead of a has-text-align-center
  38. // class which would do this for us. I'm not sure why but this centers things appropriately.
  39. .aligncenter {
  40. text-align: center;
  41. }