/* * Add content area styles to the editor (in addition to the front end), so that users see content the way it will * appear on the front end. */ @import "settings/colors"; @import "../../pub/wporg/css/settings/structure"; @import "settings/structure"; @import "settings/typography"; @import "../../pub/wporg/css/tools/breakpoint"; @import "../../pub/wporg/css/settings/_modular-scale.scss"; @import "../../pub/wporg/css/objects/buttons"; @import "objects/buttons"; @import "objects/hero"; @import "objects/pullquote"; @import "utilities/utilities"; // Un-parallelogram the columns in the editor– `skew` doesn't play well with the nesting of editor components. .block-editor-block-list__block-edit { .is-style-wporg-parallelogram { .wp-block-column { @include breakpoint( $breakpoint-tablet ) { transform: skew(0); &:last-child { position: static; z-index: auto; top: auto; left: auto; right: auto; padding-left: 0; } > * { transform: skew(0); } } } } } // Undo the positioning because it's coupled to the front end layout. Use mobile positioning in the editor. .wp-block-pullquote.is-style-wporg-home-pullquote { position: relative; top: 0; left: 0; width: auto; max-width: 100%; } // font-family and face, etc?