_alignment.scss 3.0 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677
  1. @include break-mobile {
  2. // limit size of any element that is aligned left/right
  3. .wp-block[data-align="left"], // This is for the editor
  4. .wp-block[data-align="right"], // This is for the editor
  5. .wp-site-blocks .alignleft,
  6. .wp-site-blocks .alignright {
  7. max-width: var(--wp--custom--alignment--aligned-max-width);
  8. }
  9. }
  10. // This was added for the 'site-logo' block which centers with an 'align:center' attribute
  11. // instead of 'textAlign' center which sets an .aligncenter class instead of a has-text-align-center
  12. // class which would do this for us. I'm not sure why but this centers things appropriately.
  13. // Display and margin properties added to support image alignment from the classic editor.
  14. .aligncenter {
  15. text-align: center;
  16. display: block;
  17. margin-right: auto;
  18. margin-left: auto;
  19. }
  20. /*
  21. * Alignment styles - from TT2
  22. * These rules are temporary, and should not be relied on or
  23. * modified too heavily by themes or plugins that build on
  24. * Twenty Twenty-Two. These are meant to be a precursor to
  25. * a global solution provided by the Block Editor.
  26. *
  27. * Relevant issues:
  28. * https://github.com/WordPress/gutenberg/issues/35607
  29. * https://github.com/WordPress/gutenberg/issues/35884
  30. */
  31. .wp-site-blocks,
  32. body > .is-root-container,
  33. .edit-post-visual-editor__post-title-wrapper,
  34. .wp-block-group.alignfull,
  35. .wp-block-group.has-background,
  36. .wp-block-columns.alignfull.has-background,
  37. .wp-block-cover.alignfull,
  38. .is-root-container .wp-block[data-align="full"] > .wp-block-group,
  39. .is-root-container .wp-block[data-align="full"] > .wp-block-columns.has-background,
  40. .is-root-container .wp-block[data-align="full"] > .wp-block-cover {
  41. padding-left: var(--wp--custom--gap--horizontal);
  42. padding-right: var(--wp--custom--gap--horizontal);
  43. }
  44. .wp-site-blocks .alignfull,
  45. .wp-site-blocks > .wp-block-group.has-background,
  46. .wp-site-blocks > .wp-block-cover,
  47. .wp-site-blocks > .wp-block-template-part > .wp-block-group.has-background,
  48. .wp-site-blocks > .wp-block-template-part > .wp-block-cover,
  49. body > .is-root-container > .wp-block-cover,
  50. body > .is-root-container > .wp-block-template-part > .wp-block-group.has-background,
  51. body > .is-root-container > .wp-block-template-part > .wp-block-cover,
  52. .is-root-container .wp-block[data-align="full"] {
  53. margin-left: calc(-1 * var(--wp--custom--gap--horizontal)) !important;
  54. margin-right: calc(-1 * var(--wp--custom--gap--horizontal)) !important;
  55. max-width: unset;
  56. width: unset;
  57. }
  58. /* Blocks inside columns don't have negative margins. */
  59. .wp-site-blocks .wp-block-columns .wp-block-column .alignfull,
  60. .is-root-container .wp-block-columns .wp-block-column .wp-block[data-align="full"],
  61. .wp-site-blocks .alignfull:not(.wp-block-group) .alignfull,
  62. .is-root-container .wp-block[data-align="full"] > *:not(.wp-block-group) .wp-block[data-align="full"] {
  63. margin-left: auto !important;
  64. margin-right: auto !important;
  65. width: inherit;
  66. }
  67. /* Spacing for group blocks with a background color. */
  68. .wp-block-group.has-background {
  69. padding: var(--wp--custom--gap--vertical) var(--wp--custom--gap--horizontal);
  70. }