1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677 |
- @include break-mobile {
- // limit size of any element that is aligned left/right
- .wp-block[data-align="left"], // This is for the editor
- .wp-block[data-align="right"], // This is for the editor
- .wp-site-blocks .alignleft,
- .wp-site-blocks .alignright {
- max-width: var(--wp--custom--alignment--aligned-max-width);
- }
- }
- // This was added for the 'site-logo' block which centers with an 'align:center' attribute
- // instead of 'textAlign' center which sets an .aligncenter class instead of a has-text-align-center
- // class which would do this for us. I'm not sure why but this centers things appropriately.
- // Display and margin properties added to support image alignment from the classic editor.
- .aligncenter {
- text-align: center;
- display: block;
- margin-right: auto;
- margin-left: auto;
- }
- /*
- * Alignment styles - from TT2
- * These rules are temporary, and should not be relied on or
- * modified too heavily by themes or plugins that build on
- * Twenty Twenty-Two. These are meant to be a precursor to
- * a global solution provided by the Block Editor.
- *
- * Relevant issues:
- * https://github.com/WordPress/gutenberg/issues/35607
- * https://github.com/WordPress/gutenberg/issues/35884
- */
- .wp-site-blocks,
- body > .is-root-container,
- .edit-post-visual-editor__post-title-wrapper,
- .wp-block-group.alignfull,
- .wp-block-group.has-background,
- .wp-block-columns.alignfull.has-background,
- .wp-block-cover.alignfull,
- .is-root-container .wp-block[data-align="full"] > .wp-block-group,
- .is-root-container .wp-block[data-align="full"] > .wp-block-columns.has-background,
- .is-root-container .wp-block[data-align="full"] > .wp-block-cover {
- padding-left: var(--wp--custom--gap--horizontal);
- padding-right: var(--wp--custom--gap--horizontal);
- }
- .wp-site-blocks .alignfull,
- .wp-site-blocks > .wp-block-group.has-background,
- .wp-site-blocks > .wp-block-cover,
- .wp-site-blocks > .wp-block-template-part > .wp-block-group.has-background,
- .wp-site-blocks > .wp-block-template-part > .wp-block-cover,
- body > .is-root-container > .wp-block-cover,
- body > .is-root-container > .wp-block-template-part > .wp-block-group.has-background,
- body > .is-root-container > .wp-block-template-part > .wp-block-cover,
- .is-root-container .wp-block[data-align="full"] {
- margin-left: calc(-1 * var(--wp--custom--gap--horizontal)) !important;
- margin-right: calc(-1 * var(--wp--custom--gap--horizontal)) !important;
- max-width: unset;
- width: unset;
- }
- /* Blocks inside columns don't have negative margins. */
- .wp-site-blocks .wp-block-columns .wp-block-column .alignfull,
- .is-root-container .wp-block-columns .wp-block-column .wp-block[data-align="full"],
- .wp-site-blocks .alignfull:not(.wp-block-group) .alignfull,
- .is-root-container .wp-block[data-align="full"] > *:not(.wp-block-group) .wp-block[data-align="full"] {
- margin-left: auto !important;
- margin-right: auto !important;
- width: inherit;
- }
- /* Spacing for group blocks with a background color. */
- .wp-block-group.has-background {
- padding: var(--wp--custom--gap--vertical) var(--wp--custom--gap--horizontal);
- }
|