From 6374c2dfabb4c2b40b2e8643fed757e8649640ab Mon Sep 17 00:00:00 2001 From: Benjamin Intal Date: Tue, 8 Aug 2023 18:37:46 +0800 Subject: [PATCH 01/43] removed v1 backward compatibility --- gulpfile.js | 9 - plugin.php | 1 - src/deprecated/v1/block-accordion.scss | 103 ------ src/deprecated/v1/block-blockquote.scss | 122 ------ src/deprecated/v1/block-blog-post.scss | 194 ---------- src/deprecated/v1/block-button.scss | 68 ---- src/deprecated/v1/block-call-to-action.scss | 31 -- src/deprecated/v1/block-card.scss | 64 ---- src/deprecated/v1/block-container.scss | 121 ------ src/deprecated/v1/block-count-up.scss | 102 ----- src/deprecated/v1/block-divider.scss | 22 -- src/deprecated/v1/block-expand.scss | 33 -- src/deprecated/v1/block-feature-grid.scss | 99 ----- src/deprecated/v1/block-feature.scss | 153 -------- src/deprecated/v1/block-header.scss | 151 -------- src/deprecated/v1/block-icon-list.scss | 78 ---- src/deprecated/v1/block-image-box.scss | 349 ------------------ src/deprecated/v1/block-notification.scss | 136 ------- src/deprecated/v1/block-number-box.scss | 133 ------- src/deprecated/v1/block-pricing-box.scss | 149 -------- src/deprecated/v1/block-team-member.scss | 177 --------- src/deprecated/v1/block-testimonial.scss | 140 ------- src/deprecated/v1/block-video-popup.scss | 218 ----------- src/deprecated/v1/common.scss | 88 ----- src/deprecated/v1/component-button-edit.scss | 154 -------- .../component-panel-background-settings.scss | 67 ---- src/deprecated/v1/init.php | 119 ------ src/deprecated/v1/readme.md | 6 - src/deprecated/v1/twentytwenty-compat.scss | 10 - src/welcome/admin.js | 10 - 30 files changed, 3107 deletions(-) delete mode 100644 src/deprecated/v1/block-accordion.scss delete mode 100644 src/deprecated/v1/block-blockquote.scss delete mode 100644 src/deprecated/v1/block-blog-post.scss delete mode 100644 src/deprecated/v1/block-button.scss delete mode 100644 src/deprecated/v1/block-call-to-action.scss delete mode 100644 src/deprecated/v1/block-card.scss delete mode 100644 src/deprecated/v1/block-container.scss delete mode 100644 src/deprecated/v1/block-count-up.scss delete mode 100644 src/deprecated/v1/block-divider.scss delete mode 100644 src/deprecated/v1/block-expand.scss delete mode 100644 src/deprecated/v1/block-feature-grid.scss delete mode 100644 src/deprecated/v1/block-feature.scss delete mode 100644 src/deprecated/v1/block-header.scss delete mode 100644 src/deprecated/v1/block-icon-list.scss delete mode 100644 src/deprecated/v1/block-image-box.scss delete mode 100644 src/deprecated/v1/block-notification.scss delete mode 100644 src/deprecated/v1/block-number-box.scss delete mode 100644 src/deprecated/v1/block-pricing-box.scss delete mode 100644 src/deprecated/v1/block-team-member.scss delete mode 100644 src/deprecated/v1/block-testimonial.scss delete mode 100644 src/deprecated/v1/block-video-popup.scss delete mode 100644 src/deprecated/v1/common.scss delete mode 100644 src/deprecated/v1/component-button-edit.scss delete mode 100644 src/deprecated/v1/component-panel-background-settings.scss delete mode 100644 src/deprecated/v1/init.php delete mode 100644 src/deprecated/v1/readme.md delete mode 100644 src/deprecated/v1/twentytwenty-compat.scss diff --git a/gulpfile.js b/gulpfile.js index 9e1bc136e..ca988da46 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -373,18 +373,9 @@ gulp.task( 'style-deprecated-v2', function() { .pipe( gulp.dest( 'dist/deprecated/' ) ) } ) -gulp.task( 'style-deprecated-v1', function() { - return gulp.src( [ path.resolve( __dirname, './src/deprecated/v1/*.scss' ) ] ) - .pipe( sass( deprecatedV2SassOptions ).on( 'error', sass.logError ) ) - .pipe( concat( 'frontend_blocks_deprecated.css' ) ) - .pipe( postcss( postCSSOptions ) ) - .pipe( gulp.dest( 'dist/deprecated/' ) ) -} ) - gulp.task( 'style-deprecated', gulp.parallel( 'style-editor-deprecated-v2', 'style-deprecated-v2', - 'style-deprecated-v1', ) ) /********************************************************************* diff --git a/plugin.php b/plugin.php index 722a1739d..3f6cc1e5a 100644 --- a/plugin.php +++ b/plugin.php @@ -251,7 +251,6 @@ function stackable_deactivation_cleanup() { /** * V2 Deprecated */ -require_once( plugin_dir_path( __FILE__ ) . 'src/deprecated/v1/init.php' ); require_once( plugin_dir_path( __FILE__ ) . 'src/deprecated/v2/init.php' ); require_once( plugin_dir_path( __FILE__ ) . 'src/deprecated/v2/blocks.php' ); require_once( plugin_dir_path( __FILE__ ) . 'src/deprecated/v2/disabled-blocks.php' ); diff --git a/src/deprecated/v1/block-accordion.scss b/src/deprecated/v1/block-accordion.scss deleted file mode 100644 index f310524d9..000000000 --- a/src/deprecated/v1/block-accordion.scss +++ /dev/null @@ -1,103 +0,0 @@ -/** - * Deprecated < v2 - */ - -@import "common"; - -.ugb-accordion:not([class*="ugb-accordion--v"]) { - @include baseBlock(); - position: relative; - &.ugb-accordion--open .ugb-accordion__heading svg { - transform: rotate(180deg); - } -} -.ugb-accordion:not([class*="ugb-accordion--v"]) .ugb-accordion__heading { - @include box(); - padding: ($box-hori-padding * 0.5) $box-hori-padding; - margin: 0 !important; - display: flex; - align-items: center; - justify-content: space-between; - cursor: pointer; - > * { - margin: 0 !important; - } - > *:first-child { - margin-right: 1em !important; - } - svg { - transition: transform 0.3s ease-in-out; - transform: rotate(0deg); - } - &:focus { - outline-width: 1px; - outline-style: dotted; - } - - // Common shadow #9 doesn't show up since notification is too short. - &.ugb--shadow-9 { - box-shadow: 0 25px 60px -15px rgba(72, 73, 121, 0.38) !important; - } -} -.ugb-accordion:not([class*="ugb-accordion--v"]) .ugb-accordion__text { - transition: max-height 0.3s linear, transform 0.4s ease-in-out, opacity 0.3s ease-in-out, margin 0.1s linear; - transform: translateY(0); - opacity: 1; - margin-top: $box-hori-padding !important; - margin-bottom: 0 !important; - margin-left: $box-hori-padding; - margin-right: $box-hori-padding; -} -body:not(.wp-admin) .ugb-accordion:not([class*="ugb-accordion--v"]):not(.ugb-accordion--open) .ugb-accordion__text { - max-height: 0; - transform: translateY(25px); - opacity: 0; - transition: max-height 0.3s linear, transform 0.4s ease-in-out, opacity 0.3s ease-in-out, margin 0.4s linear; - margin-top: 0 !important; -} -.ugb-accordion:not([class*="ugb-accordion--v"]).ugb-accordion--design-plain { - .ugb-accordion__heading { - box-shadow: none; - border-radius: 0; - padding: 0; - &:focus { - outline-offset: 10px; - } - } - .ugb-accordion__text { - margin: $box-hori-padding 0 0 !important; - } -} - -/** - * Deprecated < v1.11 - */ -.ugb-accordion:not([class*="ugb-accordion--v"]) > input[type="checkbox"] { - display: none !important; -} - -// Open at start state. -.ugb-accordion:not([class*="ugb-accordion--v"]) > input[type="checkbox"]:checked { - ~ .ugb-accordion__text.ugb-accordion__text { - max-height: 800px; - transition: max-height 0.3s linear, transform 0.4s ease-in-out, opacity 0.3s ease-in-out, margin 0.1s linear; - transform: translateY(0); - opacity: 1; - margin: 35px 35px 0 !important; - } - ~ .ugb-accordion__heading svg { - transform: rotate(0deg); - } -} -body:not(.wp-admin) .ugb-accordion:not([class*="ugb-accordion--v"]).ugb-accordion--open > input[type="checkbox"]:checked { - ~ .ugb-accordion__text.ugb-accordion__text { - max-height: 0; - transform: translateY(25px); - opacity: 0; - transition: max-height 0.3s linear, transform 0.4s ease-in-out, opacity 0.3s ease-in-out, margin 0.4s linear; - margin-top: 0 !important; - } - ~ .ugb-accordion__heading svg { - transform: rotate(180deg); - } -} diff --git a/src/deprecated/v1/block-blockquote.scss b/src/deprecated/v1/block-blockquote.scss deleted file mode 100644 index 876a73e4e..000000000 --- a/src/deprecated/v1/block-blockquote.scss +++ /dev/null @@ -1,122 +0,0 @@ -// stylelint-disable declaration-property-unit-allowed-list -/** - * Deprecated < v2 - */ - -@import "common"; - -.ugb-blockquote.ugb-blockquote--v2, -.ugb-blockquote:not([class*="ugb-blockquote--v"]) { - border: 0 !important; - @include baseBlock(); - padding: $box-hori-padding; - margin-left: $box-hori-padding; - margin-right: $box-hori-padding; - font-style: italic; - text-align: inherit; - background: transparent; - position: relative; - overflow: visible; - --quote-color: rgba(129, 141, 165, 0.32); - p { - margin: 0; - } - &, - p { - position: relative; - z-index: 2; - &::after, - &::before { - display: none; - } - } - - &.alignfull { - border-radius: 0 !important; - margin-top: 0; - margin-bottom: 0; - padding-left: 10vw; - padding-right: 10vw; - &::after { - left: calc(10vw - 70px); - } - } - &.ugb--has-background::after, - &.ugb-has-background::after { - top: 0; - left: 10px; - } - - &.ugb-blockquote--v2 { - padding: 0; - .ugb-content-wrapper { - padding: $box-vert-padding $box-hori-padding; - position: relative; - } - &::after { - content: ""; - display: none; - } - svg { - position: absolute; - fill: rgba(129, 141, 165, 0.32); - width: 70px; - height: 70px; - transform: translateX(-50%) translateY(-30%); - top: 0; - left: 0; - z-index: 1; - } - } - &.ugb-blockquote--small-quote svg { - top: $box-vert-padding; - left: $box-hori-padding; - transform: translateX(-100%) translateY(-80%); - } -} - -.ugb-blockquote.ugb-blockquote--v2, -.ugb-blockquote:not([class*="ugb-blockquote--v"]) { - &.ugb-blockquote--design-plain { - box-shadow: none; - border-radius: 0; - overflow: visible; - } -} - -.ugb-blockquote.ugb-blockquote--v2, -.ugb-blockquote:not([class*="ugb-blockquote--v"]) { - &.ugb-blockquote--design-basic { - @include box(); - overflow: hidden; - padding: 0; - svg { - transform: translateX(-30%) translateY(-30%); - top: 21px; - left: 35px; - } - &.ugb-blockquote--small-quote svg { - top: $box-vert-padding; - left: $box-hori-padding; - transform: translateX(-100%) translateY(-80%); - } - } -} - - -.ugb-blockquote.ugb-blockquote--v2, -.ugb-blockquote:not([class*="ugb-blockquote--v"]) { - &::after { - content: "❛❛"; - display: block; - position: absolute; - font-family: Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif", "Bitstream Vera Serif", "Liberation Serif", Georgia, serif; - font-style: normal; - font-size: 100px; - line-height: 1em; - left: -35px; - top: -15px; - opacity: 1; - color: var(--quote-color); - } -} diff --git a/src/deprecated/v1/block-blog-post.scss b/src/deprecated/v1/block-blog-post.scss deleted file mode 100644 index f2b7d81fc..000000000 --- a/src/deprecated/v1/block-blog-post.scss +++ /dev/null @@ -1,194 +0,0 @@ -/** - * Deprecated < v2 - */ - -@import "common"; - -.ugb-blog-posts:not([class*="ugb-blog-posts--v"]) { - @include baseBlock(); - .ugb-blog-posts__item { - @include baseBlock(); - } - time { - display: inline-block; - } - .ugb-blog-posts__title { - a, - a:hover { - box-shadow: none; - text-decoration: none; - } - } - - // Last paragraph of excerpts interfere with margins. - .ugb-blog-posts__excerpt > *:last-child { - margin-bottom: 0; - } - - &.ugb-blog-posts--align-right { - text-align: right; - } - &.ugb-blog-posts--align-left { - text-align: left; - } - &.ugb-blog-posts--align-center { - text-align: center; - } - - // Add side paddings to wide & fullwidth. - &.alignwide, - &.alignfull { - padding-left: $box-hori-padding; - padding-right: $box-hori-padding; - } - - .ugb-blog-posts__featured-image { - @include box(); - padding: 0 !important; - margin-left: 0; - margin-right: 0; - } - - &.ugb-blog-posts--feature-image-shape-full { - .ugb-blog-posts__featured-image { - a { - display: block; - } - img { - display: block; - width: 100%; - height: auto; - } - } - } - &.ugb-blog-posts--feature-image-shape-square, - &.ugb-blog-posts--feature-image-shape-landscape, - &.ugb-blog-posts--feature-image-shape-portrait { - .ugb-blog-posts__featured-image { - a { - position: relative; - height: 0; - padding-bottom: 50%; - display: block; - } - img { - position: absolute; - max-height: none; - max-width: none; - top: 0; - left: 0; - right: 0; - bottom: 0; - object-fit: cover; - height: 100%; - width: 100%; - } - } - } - &.ugb-blog-posts--feature-image-shape-square { - .ugb-blog-posts__featured-image a { - padding-bottom: 100%; - } - } - &.ugb-blog-posts--feature-image-shape-portrait { - .ugb-blog-posts__featured-image a { - padding-bottom: 150%; - } - } - &.ugb-blog-posts--feature-image-shape-landscape { - .ugb-blog-posts__featured-image a { - padding-bottom: 50%; - } - } - - .ugb-blog-posts__category-list { - font-size: 0.75em; - text-transform: uppercase; - a, - a:hover { - text-decoration: none; - box-shadow: none; - } - } - - .ugb-blog-posts__meta { - font-size: 0.75em; - text-transform: uppercase; - color: var(--s-accent-color, var(--s-primary-color, #2091e1)); - > *:not(.ugb-blog-posts__sep) { - margin: 0; - } - > .ugb-blog-posts__sep { - margin: 0 0.25em; - } - } - - &.ugb-blog-posts--columns-1 { - grid-template-columns: minmax(0, 1fr); - } - &.ugb-blog-posts--columns-2 { - grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); - } - &.ugb-blog-posts--columns-3 { - grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); - } - &.ugb-blog-posts--columns-4 { - grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); - } - display: grid; - grid-column-gap: $box-hori-padding; - grid-row-gap: $box-vert-padding; - - @media screen and (max-width: $break-wide) { - &.ugb-blog-posts--columns-4 { - grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); - } - } - @media screen and (max-width: $break-medium) { - &.ugb-blog-posts--columns-3 { - grid-template-columns: minmax(0, 1fr); - } - } - @media screen and (max-width: $break-small) { - &.ugb-blog-posts--columns-2, - &.ugb-blog-posts--columns-4 { - grid-template-columns: minmax(0, 1fr); - } - } - - /** - * List design. - */ - &.ugb-blog-posts--design-list { - .ugb-blog-posts__item { - display: grid; - grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr); - grid-gap: $box-hori-padding; - } - .ugb-blog-posts__featured-image { - align-self: flex-start; - } - .ugb-blog-posts__side { - @include baseBlock(); - } - @media screen and (max-width: $break-huge) { - &.ugb-blog-posts--columns-3, - &.ugb-blog-posts--columns-4 { - grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); - } - } - @media screen and (max-width: $break-large) { - &.ugb-blog-posts--columns-2, - &.ugb-blog-posts--columns-3, - &.ugb-blog-posts--columns-4 { - grid-template-columns: minmax(0, 1fr); - } - } - @media screen and (max-width: $break-small) { - .ugb-blog-posts__item { - grid-template-columns: minmax(0, 1fr); - grid-gap: 0; - } - } - } -} diff --git a/src/deprecated/v1/block-button.scss b/src/deprecated/v1/block-button.scss deleted file mode 100644 index 97e6e730d..000000000 --- a/src/deprecated/v1/block-button.scss +++ /dev/null @@ -1,68 +0,0 @@ -// Fix for buttons giong left align when migrating from v1 to v2. -.wp-block-ugb-button.ugb-button-wrapper:not(.ugb-main-block) { - margin-left: auto; - margin-right: auto; - .ugb-button--align-center { - text-align: center; - } - .ugb-button--align-left { - text-align: left; - } - .ugb-button--align-right { - text-align: right; - } - .ugb-button--align-full { - .ugb-button { - width: 100%; - } - } -} - -// Deprecated < v2 -.ugb-button-wrapper:not(.ugb-main-block) { - margin-top: 1.5em; - margin-bottom: 1.5em; - display: flex !important; - justify-content: center; - flex-wrap: wrap; - align-items: center; - margin-left: -0.5em; - margin-right: -0.5em; - .ugb-button { - margin: 0 0.5em 0.5em; - display: block; - } - .ugb-button.ugb-button--has-icon, - .ugb-button.ugb-has-icon { - display: flex; - } - - &.ugb-button--align-left { - justify-content: flex-start; - } - &.ugb-button--align-right { - justify-content: flex-end; - } - &.ugb-button--align-full { - > div { - flex: 1; - text-align: center; - } - } -} - -// Deprecated < v1.11 -.ugb-button-wrapper:not(.ugb-main-block) { - &.ugb-button-left { - justify-content: flex-start; - } - &.ugb-button-right { - justify-content: flex-end; - } - &.ugb-button-full { - > div { - flex: 1; - text-align: center; - } - } -} diff --git a/src/deprecated/v1/block-call-to-action.scss b/src/deprecated/v1/block-call-to-action.scss deleted file mode 100644 index abefd251f..000000000 --- a/src/deprecated/v1/block-call-to-action.scss +++ /dev/null @@ -1,31 +0,0 @@ -// Deprecated version < 2 - -@import "common"; - -.ugb-cta:not([class*="ugb-cta--v"]) { - text-align: center; - background-color: #f4f4f4; - @include baseBlock(); - @include box(); - .ugb-content-wrapper { - @include baseBlock(); - } - .ugb-button { - margin-top: 0; - margin-bottom: 0; - } -} - -.ugb-cta:not([class*="ugb-cta--v"]).ugb-cta--design-plain, -.ugb-cta:not([class*="ugb-cta--v"]).ugb-design-plain { - box-shadow: none; - border-radius: 0; - padding: 0; - overflow: visible; - background: transparent; -} - -// Backward compatibility version < 1.0 -.wp-block-ugb-button .wp-ugb-button:hover { - color: #fff; -} diff --git a/src/deprecated/v1/block-card.scss b/src/deprecated/v1/block-card.scss deleted file mode 100644 index 0b9940b04..000000000 --- a/src/deprecated/v1/block-card.scss +++ /dev/null @@ -1,64 +0,0 @@ -/** - * Deprecated < v2 - */ - -@import "common"; - -.ugb-card:not([class*="ugb-card--v"]) { - border-radius: 4px; - margin: 30px 0; - overflow: hidden; - @include baseBlock(); - @include box(); - .ugb-card__image-container, - .ugb-card-image-container { // Old class name. - height: 300px; - background-size: cover; - background-position: center; - padding-top: 0; - margin: calc(var(--box-padding-vert) * -1) calc(var(--box-padding-hori) * -1) var(--box-padding-vert) !important; - width: calc(100% + var(--box-padding-hori) * 2); - + *:not(.wp-ugb-button) { - margin-top: 0 !important; - padding-top: 0 !important; - } - } - .ugb-card__tagline, - .ugb-tagline { // Old class name. - font-size: 0.85em; - } - .ugb-button { - margin-top: 0; - margin-bottom: 0; - } - - // This is the button container. - > div:not(.editor-rich-text) { - display: flex; - .ugb-button--align-center, - .ugb-button-center { // Old style. - align-self: center; - } - .ugb-button--align-left, - .ugb-button-left { // Old style. - align-self: flex-start; - } - .ugb-button--align-right, - .ugb-button-right { // Old style. - align-self: flex-end; - } - } -} - -.ugb-:not([class*="ugb-card--v"]).ugb-card--design-plain, -.ugb-card:not([class*="ugb-card--v"]).ugb-design-plain { // Old class name. - box-shadow: none; - border-radius: 0; - padding: 0; - overflow: visible; - .ugb-card__image-container, - .ugb-card-image-container { // Old class name. - margin: 0 0 calc(var(--box-padding-vert) / 2) !important; - width: 100%; - } -} diff --git a/src/deprecated/v1/block-container.scss b/src/deprecated/v1/block-container.scss deleted file mode 100644 index 70516fe61..000000000 --- a/src/deprecated/v1/block-container.scss +++ /dev/null @@ -1,121 +0,0 @@ -/** - * Deprecated < v2 - */ - -@import "common"; - -body:not(.wp-admin) { - .ugb-container:not([class*="ugb-container--v"])[style*="--ugb-text-color"] { - &, - p, - h1, - h2, - h3, - h4, - h5, - h6, - * { - color: var(--ugb-text-color); - } - } -} -.ugb-container:not([class*="ugb-container--v"]) { - @include baseBlock(); - @include box(); - - &:not(.ugb--has-background):not(.ugb-has-background) { - box-shadow: none; - border-radius: 0; - overflow: visible; - } - &:not(.ugb--has-background):not(.ugb-has-background):not(.alignfull) { - padding-left: 0; - padding-right: 0; - } - - .ugb-container__wrapper { - width: 100%; - } - .ugb-container__content-wrapper { - @include baseBlock(); - margin: 0; - } - - // Different container heights. - &.ugb-container--height-short, - &.ugb-height-short { - padding: $box-hori-padding; - } - &.ugb-container--height-tall, - &.ugb-height-tall { - padding-top: $box-vert-padding * 2; - padding-bottom: $box-vert-padding * 2; - } - &.ugb-container--height-half, - &.ugb-container--height-full, - &.ugb-height-half, - &.ugb-height-full { - min-height: 50vh; - display: flex; - justify-content: center; - flex-direction: column; - } - &.ugb-container--height-full, - &.ugb-height-full { - min-height: 100vh; - } - - &.ugb-container--content-left, - &.ugb-content-left { - text-align: left; - } - &.ugb-container--content-center, - &.ugb-content-center { - text-align: center; - } - &.ugb-container--content-right, - &.ugb-content-right { - text-align: right; - } - &.alignfull { - border-radius: 0 !important; - margin-top: 0; - margin-bottom: 0; - } - - &.ugb--content-width .ugb-container__wrapper, - &.ugb-content-width .ugb-container__wrapper { - max-width: var(--content-width); - margin: 0 auto; - } - - &.ugb-container--align-horizontal-left .ugb-container__content-wrapper, - &.ugb-align-horizontal-left .ugb-container__content-wrapper { - width: 50%; - margin: 0 auto 0 0; - } - &.ugb-container--align-horizontal-center .ugb-container__content-wrapper, - &.ugb-align-horizontal-center .ugb-container__content-wrapper { - width: 50%; - margin: 0 auto; - } - &.ugb-container--align-horizontal-right .ugb-container__content-wrapper, - &.ugb-align-horizontal-right .ugb-container__content-wrapper { - width: 50%; - margin: 0 0 0 auto; - } - @media screen and (max-width: $break-small) { - &.ugb-container--align-horizontal-left .ugb-container__content-wrapper, - &.ugb-align-horizontal-left .ugb-container__content-wrapper { - width: 70%; - } - &.ugb-container--align-horizontal-center .ugb-container__content-wrapper, - &.ugb-align-horizontal-center .ugb-container__content-wrapper { - width: 70%; - } - &.ugb-container--align-horizontal-right .ugb-container__content-wrapper, - &.ugb-align-horizontal-right .ugb-container__content-wrapper { - width: 70%; - } - } -} diff --git a/src/deprecated/v1/block-count-up.scss b/src/deprecated/v1/block-count-up.scss deleted file mode 100644 index 2b68c6bfe..000000000 --- a/src/deprecated/v1/block-count-up.scss +++ /dev/null @@ -1,102 +0,0 @@ -// stylelint-disable declaration-property-unit-allowed-list -// Deprecated < v2 - -@import "common"; - -.ugb-countup, -.ugb-countup .ugb-content-wrapper { - - // Collapse to 4 columns to 2 rows of 2-columns. - @media screen and (max-width: $break-medium) { - &.ugb-countup--columns-4 .ugb-content-wrapper, - &.columns-4 { - display: grid !important; - grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); - justify-content: center; - align-items: center; - grid-gap: $box-hori-padding; - .ugb-countup-item { - margin: 0 !important; - } - } - - // Resize numbers to make them smaller in small screens. - .ugb-countup__counter, - .ugb-counter { - font-size: calc(1rem + 4vw); - } - } - - // Collapse 3 columns to 1 column. - @media screen and (max-width: $break-small) { - &.ugb-countup--columns-3 .ugb-content-wrapper, - &.columns-3 { - flex-direction: column; - .ugb-countup__item:not(:last-child), - .ugb-countup-item:not(:last-child) { - margin-bottom: $box-hori-padding !important; - } - } - } -} - -.ugb-countup.ugb-countup--v3 { - @include baseBlock(); - text-align: center; - .ugb-countup--hide, - .ugb-countup-hide { - visibility: hidden; - } - .ugb-countup__counter, - .ugb-counter { - line-height: 1em !important; - } - .ugb-content-wrapper { - width: 100%; - } - &.alignfull { - border-radius: 0 !important; - margin-top: 0; - margin-bottom: 0; - } -} - -.ugb-countup.ugb-countup--v3, -.ugb-countup.ugb-countup--v3 .ugb-content-wrapper { - @include baseBlock(); - text-align: center; - display: flex !important; - flex-wrap: nowrap; - flex-direction: row; - justify-content: center; - .ugb-countup__item, - .ugb-countup-item { - @include baseBlock(); - flex: 1; - margin: 0 ($box-hori-padding * 0.5) !important; - } -} - -.ugb-countup.ugb-countup--v3 { - &.ugb-countup--design-basic { - @include box(); - } -} -.ugb-countup.ugb-countup-v3 { - &.ugb-design-basic { - @include box(); - } -} - -// Backward compatibility. < 1.10 when we didn't have a "plain" design. -.ugb-countup.ugb-countup-v2 { - &:not(.ugb-has-background):not(.alignwide) { - margin-left: (- $box-hori-padding * 0.5); - margin-right: (- $box-hori-padding * 0.5); - } -} - -// Backward compatibility. < v1.5 when we only had 1 column. -.ugb-countup:not([class*="ugb-countup-v"]) { - flex-direction: column; -} diff --git a/src/deprecated/v1/block-divider.scss b/src/deprecated/v1/block-divider.scss deleted file mode 100644 index 773b43e60..000000000 --- a/src/deprecated/v1/block-divider.scss +++ /dev/null @@ -1,22 +0,0 @@ - -/** - * Deprecated < v2 - */ - -@import "common"; - -.ugb-divider:not([class*="ugb-divider--v"]) { - border: 0; - height: 1px; - width: 100%; - background-color: transparent; - @include baseBlock(); - hr { - background-color: #ddd; - border: 0 !important; - padding: 0 !important; - max-width: none !important; - margin-left: auto !important; - margin-right: auto !important; - } -} diff --git a/src/deprecated/v1/block-expand.scss b/src/deprecated/v1/block-expand.scss deleted file mode 100644 index c28ce0d43..000000000 --- a/src/deprecated/v1/block-expand.scss +++ /dev/null @@ -1,33 +0,0 @@ -@import "common"; - -/** - * Deprecated < v2 - */ -.ugb-expand:not([class*="ugb-expand--v"]) { - @include baseBlock(); -} - -/** - * Deprecated < 1.10 - */ -.ugb-expand:not([class*="ugb-expand--v"]) { - @include baseBlock(); - p:last-child { - margin-bottom: 0; - } - &.ugb-more { - .ugb-expand-less-text, - .ugb-expand-more { - display: none; - } - .ugb-expand-more-text, - .ugb-expand-less { - display: block !important; - } - } - - .ugb-expand__less-text p:last-child, - .ugb-expand__more-text p:last-child { - margin-bottom: 0; - } -} diff --git a/src/deprecated/v1/block-feature-grid.scss b/src/deprecated/v1/block-feature-grid.scss deleted file mode 100644 index 9947a96d4..000000000 --- a/src/deprecated/v1/block-feature-grid.scss +++ /dev/null @@ -1,99 +0,0 @@ -@import "common"; - -/** - * Deprecated < v2 - */ -.ugb-feature-grid:not([class*="ugb-feature-grid--v"]) { - @include baseBlock(); - display: flex; - flex-wrap: nowrap; - margin: 0 (-$box-hori-padding * 0.5); - > div { - flex: 1; - &, - &:first-child, - &:last-child { - margin: ($box-hori-padding * 0.5) !important; - } - } - .ugb-feature-grid__item { - @include box(); - } - .ugb-feature-grid__content { - text-align: center; - @include baseBlock(); - &:last-child { - margin-bottom: 0; - } - } - .ugb-feature-grid__image { - img { - display: block; - margin: 0 auto; - } - } - .ugb-button { - margin-top: 0; - margin-bottom: 0; - } -} - -.ugb-feature-grid--design-plain:not([class*="ugb-feature-grid--v"]) { - .ugb-feature-grid__item, - .ugb-feature-grid-item { - box-shadow: none; - padding: 0; - border-radius: 0; - - @media screen and (max-width: $break-medium) { - padding: 0; - } - @media screen and (max-width: $break-small) { - padding-left: 0; - padding-right: 0; - padding-top: #{($box-hori-padding * 0.5)}; - padding-bottom: #{($box-hori-padding * 0.5)}; - } - } -} - -.ugb-feature-grid--design-basic:not([class*="ugb-feature-grid--v"]), -.ugb-feature-grid--design-plain:not([class*="ugb-feature-grid--v"]) { - .ugb-feature-grid__item { - @include baseBlock(); - } -} - -// For 3 columns, make sure the images are still seen if columns are narrow. -@media screen and (max-width: $break-large) { - .ugb-feature-grid:not([class*="ugb-feature-grid--v"]).ugb-feature-grid--columns-3 { - .ugb-feature-grid__content > img, - .ugb-feature-grid-item > img { - width: 100% !important; - } - } -} - -// For small screens, collapse & make sure our images aren't too large. -@media screen and (max-width: $break-small) { - .ugb-feature-grid:not([class*="ugb-feature-grid--v"]) { - .ugb-feature-grid__content > img, - .ugb-feature-grid-item > img { - max-width: 30vw; - } - } - .ugb-feature-grid:not([class*="ugb-feature-grid--v"]) { - flex-direction: column; - } -} - -/** - * Deprecated < v1.11 - */ -.ugb-feature-grid { - .ugb-feature-grid-item { - text-align: center; - @include baseBlock(); - @include box(); - } -} diff --git a/src/deprecated/v1/block-feature.scss b/src/deprecated/v1/block-feature.scss deleted file mode 100644 index 28049f34a..000000000 --- a/src/deprecated/v1/block-feature.scss +++ /dev/null @@ -1,153 +0,0 @@ -@import "common"; - -/** - * Deprecated < v2 - */ - -.ugb-feature:not([class*="ugb-feature--v"]) { - @include baseBlock(); - .ugb-content-wrapper, - .ugb-feature-wrapper { // Old class. - display: flex; - flex-wrap: nowrap; - margin: 0 (-$box-hori-padding * 0.5); - > div { - justify-content: center; - display: flex; - flex-direction: column; - flex: 1; - @include baseBlock(); - margin: 0 ($box-hori-padding * 0.5); - } - } - &.ugb-feature--invert .ugb-content-wrapper, - &.ugb-invert .ugb-feature-wrapper { // Old class. - flex-direction: row-reverse; - } - .ugb-feature__image { // Fix for IE11 stretching images vertically. - min-height: 1px; - } - .ugb-feature__image-side, - .ugb-feature-image-side { - align-items: center; - img { - max-width: var(--image-size, 400px); - width: 100%; - } - } - &.ugb-feature--content-left, - &.ugb-content-left { - text-align: left; - } - &.ugb-feature--content-center, - &.ugb-content-center { - text-align: center; - } - &.ugb-feature--content-right, - &.ugb-content-right { - text-align: right; - } - - &.alignfull.ugb--has-background, - &.alignfull.ugb-has-background { - border-radius: 0; - margin-top: 0; - margin-bottom: 0; - } - .ugb-button { - margin-top: 0; - margin-bottom: 0; - } - &.alignfull { - border-radius: 0 !important; - } -} - -.ugb-feature:not([class*="ugb-feature--v"]) { - &.ugb-feature--design-basic, - &.ugb-feature--design-plain { - .ugb-feature__image { - max-width: var(--image-size, 400px); - width: 100%; - object-fit: contain; - img { - margin: 0 auto; - } - } - } -} -body:not(.wp-admin) .ugb-feature:not([class*="ugb-feature--v"]).ugb-feature--design-plain { - .ugb-feature__image { - flex: 0; - min-height: auto; - height: auto; - } -} -// Fallback for IE11: Plain image display as 1px. -@media all and (-ms-high-contrast: none) { - *::-ms-backdrop, - body:not(.wp-admin) .ugb-feature:not([class*="ugb-feature--v"]).ugb-feature--design-plain { - .ugb-feature__image { - flex: none; - } - } -} -.ugb-feature:not([class*="ugb-feature--v"]).ugb-feature--design-basic { - @include box(); -} -.ugb-feature:not([class*="ugb-feature--v"]).alignfull.ugb-feature--design-plain { - padding-right: $box-hori-padding; - padding-left: $box-hori-padding; -} - -/** - * Backward compatibility < 1.11 - */ -.ugb-feature { - &.alignfull .ugb-feature-wrapper { - max-width: var(--content-width, 900px); - margin: 0 auto; - } - &.ugb-has-background { - @include box(); - } -} - -// Collapse into a single column on small screens, always put image on top. -@media screen and (max-width: 768px) { - .ugb-feature { - .ugb-content-wrapper, - &.ugb-feature--invert .ugb-content-wrapper, - .ugb-feature-wrapper, // Old class. - &.ugb-invert .ugb-feature-wrapper { // Old class. - flex-direction: column-reverse; - } - .ugb-content-wrapper { - .ugb-feature__content { - margin-top: $box-vert-padding; - } - .ugb-feature__image-side { - img { - width: 60vw; - } - } - } - - // Old class. - .ugb-feature-wrapper { - text-align: center; - > div:first-child { - margin-top: $box-vert-padding; - } - .ugb-feature-image-side { - img { - width: 60vw; - } - } - } - - .ugb-button { - margin: 0 auto; - } - } -} diff --git a/src/deprecated/v1/block-header.scss b/src/deprecated/v1/block-header.scss deleted file mode 100644 index 2ff976050..000000000 --- a/src/deprecated/v1/block-header.scss +++ /dev/null @@ -1,151 +0,0 @@ -@import "common"; - -.ugb-header__buttons { - display: flex; - align-items: center; - justify-content: center; - margin-left: -0.5em; - margin-right: -0.5em; -} - -.ugb-header__buttons > * { - margin: 0 0.5em 0.5em; -} - -/** - * Deprecated < v2 - */ -.ugb-header.ugb-header--v2 { - @include baseBlock(); - text-align: center; - @include box(); - padding: 60px 150px; - position: relative; - .ugb-content-wrapper, - .ugb-header-wrapper { - @include baseBlock(); - } - .ugb-button { - position: relative; - margin-top: 0; - margin-bottom: 0; - } - &.alignfull.ugb--has-background { - border-radius: 0 !important; - margin-top: 0; - margin-bottom: 0; - } - &.ugb-header--full-height { - min-height: 100vh; - align-items: center; - display: flex; - } - - &.ugb-header--design-basic { - @include box(); - padding: 9.5rem 4rem; - } - &.ugb-header--design-plain { - box-shadow: none; - // padding: 0; - padding: 9.5rem 4rem; - border-radius: 0; - } -} - -/** - * Deprecated as of v1.11 - */ -.ugb-header.ugb-header--v2 { - padding: 9.5rem 4rem; - .wp-block-button.ugb-button-center { - left: 0; - transform: translateX(0); - margin-bottom: 1.5em; - } - .wp-block-button.ugb-button-right { - transform: translateX(-50%); - left: 50%; - margin-bottom: 1.5em; - } - .wp-block-button.ugb-button-left { - transform: translateX(50%); - left: -50%; - margin-bottom: 1.5em; - } - .ugb-header-title:not(.editor-rich-text__editable) { - margin-bottom: 1rem; - padding-bottom: 0; - margin-top: 0; - position: relative; - } - .ugb-header-subtitle:not(.editor-rich-text__editable) { - margin-bottom: 2rem; - padding-bottom: 0; - position: relative; - } - button.components-button { - margin-bottom: 0.5em; - position: relative; - } -} - -/** - * Deprecated as of v1.4 - */ -.ugb-header.has-image { - padding: 0; - .ugb-header-section { - padding: 9.5rem 4rem; - background-size: cover; - background-repeat: no-repeat; - background-position: center; - } -} -.ugb-header { - .ugb-header-overlay { - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - margin: 0 !important; - } -} -.ugb-header-overlay.overlay-opacity.overlay-opacity-1 { - opacity: 0.1; -} -.ugb-header-overlay.overlay-opacity.overlay-opacity-2 { - opacity: 0.2; -} -.ugb-header-overlay.overlay-opacity.overlay-opacity-3 { - opacity: 0.3; -} -.ugb-header-overlay.overlay-opacity.overlay-opacity-4 { - opacity: 0.4; -} -.ugb-header-overlay.overlay-opacity.overlay-opacity-5 { - opacity: 0.5; -} -.ugb-header-overlay.overlay-opacity.overlay-opacity-6 { - opacity: 0.6; -} -.ugb-header-overlay.overlay-opacity.overlay-opacity-7 { - opacity: 0.7; -} -.ugb-header-overlay.overlay-opacity.overlay-opacity-8 { - opacity: 0.8; -} -.ugb-header-overlay.overlay-opacity.overlay-opacity-9 { - opacity: 0.9; -} -.ugb-header-overlay.overlay-opacity.overlay-opacity-10 { - opacity: 1; -} - -/** - * Frontend Styles. - */ -.wp-block-ugb-header.has-no-content { - display: none; -} diff --git a/src/deprecated/v1/block-icon-list.scss b/src/deprecated/v1/block-icon-list.scss deleted file mode 100644 index b88ca4dd4..000000000 --- a/src/deprecated/v1/block-icon-list.scss +++ /dev/null @@ -1,78 +0,0 @@ -@import "common"; - -/** - * Deprecated < v2 - */ -.ugb-icon-list:not([class*="ugb-icon-list--v"]) { - margin: 0 0 1.5em 0 !important; - padding: 0 !important; - list-style: none !important; - li::before { - content: ""; - display: inline-block; - vertical-align: middle; - height: var(--icon-size, 20px); - width: var(--icon-size, 20px); - margin-right: 1em; - background-image: var(--icon); - background-size: cover; - background-position: center; - transform: translateY(-10%); - } - li { - margin-top: 0 !important; - margin-bottom: var(--gap, 16) !important; - - // Force this for compatibility with others like Genesis themes. - list-style: none !important; - - // text-indent here plus the padding-left in the container makes sure our text doesn't wrap below the bullet. - text-indent: calc(var(--icon-size, 20px) * -1 - 1em) !important; - padding-left: calc(var(--icon-size, 20px) + 1em) !important; - - // Minimal support for nest lists. - ul { - margin-top: var(--gap, 16) !important; - list-style: none; - margin-left: 0; - } - } - li:last-child { - margin-bottom: 0; - } - &.ugb-icon--columns-2, - &.column-2 { // Old style. - columns: 2; - } - &.ugb-icon--columns-3, - &.column-3 { // Old style. - columns: 3; - } - @media screen and (max-width: $break-small) { - &.ugb-icon--columns-3, - &.column-3 { // Old style. - columns: 2; - } - } - // @from https://css-tricks.com/almanac/properties/b/break-inside/ - &.ugb-icon-columns-2, - &.ugb-icon-columns-3, - &.column-2, // Old style. - &.column-3 { // Old style. - li { - page-break-inside: avoid; /* Firefox */ - break-inside: avoid; - } - } -} - -// Fallback for IE11: SVG icons will not display as bullets, fallback to normal bullets. -@media all and (-ms-high-contrast: none) { - *::-ms-backdrop, - .ugb-icon-list:not([class*="ugb-icon-list--v"]) li { - list-style: inside disc !important; - &::before { - content: none !important; - } - } -} diff --git a/src/deprecated/v1/block-image-box.scss b/src/deprecated/v1/block-image-box.scss deleted file mode 100644 index b4ae7ea9a..000000000 --- a/src/deprecated/v1/block-image-box.scss +++ /dev/null @@ -1,349 +0,0 @@ -@import "common"; - -/** - * Deprecated < v2 - */ - -.ugb-image-box.ugb-image-box--v3 { - @include baseBlock(); - display: grid; - grid-gap: $box-hori-padding; - &.ugb-image-box--columns-4 { - grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); - } - &.ugb-image-box--columns-3 { - grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); - } - &.ugb-image-box--columns-2 { - grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); - } - &.ugb-image-box--columns-1:not(.alignwide):not(.alignfull) { - grid-template-columns: minmax(0, 1fr); - .ugb-image-box__item { - margin: 0 auto; - } - } - - // Add side paddings to full-width > 1 columns. - &.alignfull:not(.ugb-image-box--columns-1) { - padding-left: $box-hori-padding; - padding-right: $box-hori-padding; - } - - // No border-radius for full width 1 column. - &.alignfull.ugb-image-box--columns-1 { - .ugb-image-box__item { - border-radius: 0; - } - } - - // Collapse - @media screen and (max-width: $break-large) { - &.ugb-image-box--columns-4 { - grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); - } - } - @media screen and (max-width: $break-medium) { - &.ugb-image-box--columns-3 { - grid-template-columns: minmax(0, 1fr); - } - } - @media screen and (max-width: $break-mobile) { - &.ugb-image-box--columns-4, - &.ugb-image-box--columns-2 { - grid-template-columns: minmax(0, 1fr); - } - } -} - -.ugb-image-box.ugb-image-box--v3 { - .ugb-image-box__item { - // Safari fix for flashing overlay outside border-radius. - -webkit-mask-image: -webkit-radial-gradient(#fff, #000); - // Edge fix for flashing overlay outside border-radius. - transform: translateZ(0px); - background-size: cover; - background-position: center; - display: flex; - flex-direction: column; - justify-content: center; - align-items: stretch; - position: relative; - overflow: hidden; - background-color: #999; - @include box(); - padding: $box-hori-padding; - max-width: 100%; - width: 100%; - margin: 0; - * { - transition: all 0.4s ease-in-out !important; - border: 0 !important; - box-shadow: none !important; - } - &:hover .ugb-image-box__overlay { - opacity: 0.7; - } - &:hover .ugb-image-box__description { - opacity: 1; - transform: translateY(0); - } - } -} - -// Overlay opacity. -.ugb-image-box.ugb-image-box--v3 { - @for $i from 0 through 10 { - &.ugb-image-box--overlay-#{ $i } { - .ugb-image-box__item:hover .ugb-image-box__overlay { - opacity: $i * 0.1; - } - } - } -} - -.ugb-image-box.ugb-image-box--v3 { - .ugb-image-box__image-effect { - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background-size: cover; - background-position: center; - z-index: 1; - } - .ugb-image-box__overlay { - position: absolute; - z-index: 2; - top: 0; - left: 0; - right: 0; - bottom: 0; - opacity: 0; - margin: 0 !important; - background-color: var(--overlay-color, #000); - } - .ugb-image-box__content { - z-index: 3; - pointer-events: none; - @include baseBlock(); - } - .ugb-image-box__description { - margin: 0 !important; - opacity: 0; - transform: translateY(-15px); - } -} - -/** - * Arrow - */ -.ugb-image-box.ugb-image-box--v3 { - .ugb-image-box__arrow { - fill: #fff; - z-index: 2; - width: 30px; - height: 20px; - position: absolute; - bottom: 35px; - left: auto; - right: auto; - z-index: 4; - opacity: 0; - transform: translateY(15px); - pointer-events: none; - &.ugb-image-box__arrow--align-left { - left: $box-hori-padding; - } - &.ugb-image-box__arrow--align-right { - right: $box-hori-padding; - } - &.ugb-image-box__arrow--align-center { - left: 50%; - transform: translateX(-50%) translateY(15px); - } - } - .ugb-image-box__item:hover { - .ugb-image-box__arrow { - opacity: 1; - transform: none; - &.ugb-image-box__arrow--align-center { - transform: translateX(-50%); - } - } - } - - // Adjust some locations if we have an arrow. - - // Basic design, text aligned bottom should make space for arrow. - .ugb-image-box--arrow:not([class*="ugb-image-box--design"]) { - .ugb-image-box__item[style*="flex-end"] .ugb-image-box__content { - margin-bottom: 50px; - } - } -} - -/** - * Hover effects - */ -.ugb-image-box.ugb-image-box--v3 { - &.ugb-image-box--effect-zoom-in .ugb-image-box__item:hover { - .ugb-image-box__image-effect { - transform: scale(1.1); - } - } - &.ugb-image-box--effect-zoom-out .ugb-image-box__item { - .ugb-image-box__image-effect { - transform: scale(1.1); - } - &:hover { - .ugb-image-box__image-effect { - transform: scale(1); - } - } - } -} - -/** - * Deprecated styles < 1.11 - */ -.ugb-image-box-wrapper.ugb-image-box-v2 { // Old style. - @include baseBlock(); - display: grid; - grid-gap: $box-hori-padding; - &.columns-4 { // Old style. - grid-template-columns: 1fr 1fr 1fr 1fr; - } - &.columns-3 { // Old style. - grid-template-columns: 1fr 1fr 1fr; - } - &.columns-2 { // Old style. - grid-template-columns: 1fr 1fr; - } - &.columns-1:not(.alignwide):not(.alignfull) { - grid-template-columns: 1fr; - .ugb-image-box { - margin: 0 auto; - } - } - .ugb-image-box { - margin: 0; - > a { - background-color: var(--overlay-color, #000); - } - } - - .ugb-image-box { - width: 100%; - margin-bottom: 0 !important; // Container class forces bottom margin. - } - - // Add side paddings to full-width > 1 columns. - &.alignfull:not(.columns-1) { - padding-left: $box-hori-padding; - padding-right: $box-hori-padding; - } - - // No border-radius for full width 1 column. - &.alignfull.columns-1 { - .ugb-image-box { - border-radius: 0; - } - } - - // Collapse - @media screen and (max-width: $break-large) { - &.columns-4 { - grid-template-columns: 1fr 1fr; - } - } - @media screen and (max-width: $break-medium) { - &.columns-3 { - grid-template-columns: 1fr; - } - } - @media screen and (max-width: $break-mobile) { - &.columns-4, - &.columns-2 { - grid-template-columns: 1fr; - } - } - - > .ugb-image-box { // Old style. - background-size: cover; - background-position: center; - display: flex; - flex-direction: column; - justify-content: center; - align-items: stretch; - position: relative; - overflow: hidden; - background-color: #999; - @include baseBlock(); - @include box(); - padding: $box-hori-padding; - margin-left: auto; - margin-right: auto; - max-width: 100%; - * { - transition: all 0.4s ease-in-out !important; - border: 0 !important; - box-shadow: none !important; - } - button.components-button { - z-index: 3; - margin-bottom: 1em; - } - > a { - position: absolute; - z-index: 2; - top: 0; - left: 0; - right: 0; - bottom: 0; - opacity: 0; - margin: 0 !important; - } - h4, - p { - z-index: 3; - pointer-events: none; - } - p { - margin: 0 !important; - opacity: 0; - transform: translateY(-15px); - } - &:hover a { - opacity: 0.7; - } - &:hover p { - opacity: 1; - transform: translateY(0); - } - // Behavior for non-touch devices. - // @media not all and (hover: none) { - // &:hover a { - // opacity: .7; - // } - // &:hover p { - // opacity: 1; - // transform: translateY(0); - // } - // } - // a:hover, a:active { - // opacity: .7; - // } - } -} - -/** - * Deprecated styles < 1.5 - */ -.ugb-image-box.full-width { - width: 100% !important; -} -.wp-block-ugb-image-box.has-no-content { - display: none; -} diff --git a/src/deprecated/v1/block-notification.scss b/src/deprecated/v1/block-notification.scss deleted file mode 100644 index e9291fa54..000000000 --- a/src/deprecated/v1/block-notification.scss +++ /dev/null @@ -1,136 +0,0 @@ -@import "common"; - -/** - * Deprecated < v2 - */ - -.ugb-notification:not([class*="ugb-notification--v"]) { - @include baseBlock(); - @include box(); - padding: $box-hori-padding; - background-color: #40ba7b; - position: relative; - overflow: visible; - .ugb-notification__close-button.ugb-notification__close-button { - margin-top: 30px !important; - } - &, - p { - color: #fff; - } - svg { - fill: #fff; - } - &.ugb-notification--type-error { - background-color: #d9534f; - svg { - fill: #fff; - } - } - &.ugb-notification--type-info { - background-color: #2091e1; - svg { - fill: #fff; - } - } - &.ugb-notification--type-warning { - background-color: #ffdd57; - &, - p { - color: #424242; - } - svg { - fill: #424242; - } - } - &.ugb-notification--dismissible { - padding-right: $box-vert-padding; - - // Hide at the start, JS will show it to avoid flickering. - display: none; - } - - // Common shadow #9 doesn't show up since notification is too short. - &.ugb--shadow-9 { - box-shadow: 0 30px 90px -30px rgba(72, 73, 121, 0.38) !important; - } -} - -/** - * Deprecated. Version < 1.11 - */ - -.wp-block-ugb-notification { - position: relative; -} -.ugb-notification:not([class*="ugb-notification--v"]) { - border-radius: 4px; - color: #fff; - @include baseBlock(); - @include box(); - padding: $box-hori-padding; - background-color: #40ba7b; - &, - p { - color: #fff; - } - &.type-error { - background-color: #d9534f; - } - &.type-info { - background-color: #2091e1; - } - &.type-warning { - background-color: #ffdd57; - &, - p { - color: #424242; - } - } -} - -.ugb-notification:not([class*="ugb-notification--v"]), -.wp-block-ugb-notification:not([class*="ugb-notification--v"]) { - position: relative; - .close-button { - position: absolute; - right: 0; - z-index: 2; - margin-right: 1.5rem; - margin-top: 1.3rem; - font-size: 8px; - padding-top: 0.3rem; - cursor: pointer; - svg { - width: 13px; - height: auto; - } - } -} -.ugb-notification:not([class*="ugb-notification--v"]) { - &.dismissible-true { - .wp-ugb-notif { - padding-right: $box-vert-padding; - } - } - &.type-success svg, - &.type-error svg, - &.type-info svg { - fill: #fff; - } - &.type-warning svg { - fill: #424242; - } - &.dismissible-true[data-uid] { - display: none; - } - - // Fix bug where previously saved < v1.11 custom backgrounds - // only color the middle area when viewing the page >= 1.11 - &:not([style*="background-color"]) { - p[style*="background-color"] { - margin: -35px !important; - padding: 35px; - } - } -} diff --git a/src/deprecated/v1/block-number-box.scss b/src/deprecated/v1/block-number-box.scss deleted file mode 100644 index 523571006..000000000 --- a/src/deprecated/v1/block-number-box.scss +++ /dev/null @@ -1,133 +0,0 @@ -// stylelint-disable declaration-property-unit-allowed-list -@import "common"; - -/** - * Deprecated < v2 - */ - -.ugb-number-box__item { - display: flex; - flex-direction: column; - @include box(); -} -.ugb-number-box .ugb-inner-block { - text-align: center; -} - -.ugb-number-box.ugb-number-box--design-plain { - .ugb-number-box__item { - box-shadow: none; - border-radius: 0; - padding: 0; - background: none; - } -} - -.ugb-number-box__number { - background-color: var(--s-primary-color, #ddd); - color: #fff; - border-radius: 100%; - font-size: 3em; - display: block; - padding: 0; - overflow: visible; - margin: 0 auto; - height: 2.5em; - width: 2.5em; - line-height: 2.5em; - box-sizing: content-box; - white-space: nowrap !important; - text-align: center; - z-index: 3; -} -.ugb-number-box--number-style-square .ugb-number-box__number { - border-radius: 0; -} -.ugb-number-box--number-style-none .ugb-number-box__number { - display: block; - background: none; - border-radius: 0; - color: var(--s-primary-color, #222); - line-height: 1em; - height: auto; - width: 100%; -} - -// Deprecated < 1.15.2 -.ugb-number-box.ugb-number-box--v2 { - @include baseBlock(); - display: grid; - grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); - grid-gap: $box-hori-padding; - - &.ugb-number-box--columns-2 { - grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); - } - &.ugb-number-box--columns-1 { - grid-template-columns: minmax(0, 1fr); - } - @media screen and (max-width: $break-medium) { - &.ugb-number-box--columns-3 { - grid-template-columns: minmax(0, 1fr); - } - } - @media screen and (max-width: $break-small) { - &.ugb-number-box--columns-2 { - grid-template-columns: minmax(0, 1fr); - } - } - - .ugb-number-box__item { - margin-bottom: 0 !important; - } -} - -// Deprecated < 1.11 -.ugb-number-box:not(.ugb-number-box--v2):not(.ugb-number-box--v3) { - @include baseBlock(); - display: flex; - flex-wrap: wrap; - margin: 0 (-$box-hori-padding * 0.5); - span, // Old - .blocks-rich-text span { // Old - background-color: var(--s-primary-color, #ddd); - color: #fff; - border-radius: 100%; - font-size: 3em; - display: block; - padding: 0; - text-align: center; - overflow: hidden; - margin: 0 auto; - height: 2.5em; - width: 2.5em; - line-height: 2.5em !important; - } - > div { - text-align: center; - @include baseBlock(); - @include box(); - flex: 1; - min-width: 250px; - &, - &:first-child, - &:last-child { - margin: ($box-hori-padding * 0.5) !important; - } - p { - text-align: center; - } - } - &.column-1 { - > div:nth-child(2), - > div:nth-child(3) { - display: none; - } - } - &.column-2 { - > div:nth-child(3) { - display: none; - } - } - -} diff --git a/src/deprecated/v1/block-pricing-box.scss b/src/deprecated/v1/block-pricing-box.scss deleted file mode 100644 index 2876a3393..000000000 --- a/src/deprecated/v1/block-pricing-box.scss +++ /dev/null @@ -1,149 +0,0 @@ -// stylelint-disable declaration-property-unit-allowed-list -@import "common"; - -/** - * Deprecated < v2 - */ -.ugb-pricing-box.ugb-pricing-box--v2 { - @include baseBlock(); - display: grid; - grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); - grid-gap: $box-hori-padding; - - &.ugb-pricing-box--columns-3 { - grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); - } - &.ugb-pricing-box--columns-1 { - grid-template-columns: minmax(0, 1fr); - } - @media screen and (max-width: $break-medium) { - &.ugb-pricing-box--columns-3 { - grid-template-columns: minmax(0, 1fr); - } - } - @media screen and (max-width: $break-small) { - &.ugb-pricing-box--columns-2 { - grid-template-columns: minmax(0, 1fr); - } - } -} - -.ugb-pricing-box.ugb-pricing-box--v2 { - .ugb-pricing-box__item { - @include box(); - margin-bottom: 0 !important; - text-align: center; - flex: 1; - .ugb-pricing-box__price { - font-size: 3.5em; - line-height: 100% !important; - } - } - - .ugb-pricing-box__price-wrapper { - @include baseBlock(); - } - - .ugb-pricing-box__image { - img { - margin: 0 auto; - } - margin-bottom: 2em !important; - } - .ugb-pricing-box__price-line { - display: flex; - justify-content: center; - } - .ugb-pricing-box__price-prefix { - align-self: flex-start; - font-size: 1.2em; - } - .ugb-pricing-box__price-suffix { - align-self: flex-end; - font-size: 1.5em; - } - - .ugb-pricing-box__price { - font-size: 3.5em; - line-height: 100% !important; - } - .ugb-pricing-box__subprice { - font-size: 0.75em; - opacity: 0.3; - text-transform: uppercase; - line-height: 100% !important; - } -} - -.ugb-pricing-box.ugb-pricing-box--v2.ugb-pricing-box--design-plain { - .ugb-pricing-box__item { - @include baseBlock(); - box-shadow: none; - padding: 0; - border-radius: 0; - } -} -.ugb-pricing-box.ugb-pricing-box--v2.ugb-pricing-box--design-basic { - .ugb-pricing-box__item { - @include baseBlock(); - &.ugb-pricing-box--highlighted { - *:not(.ugb-button--inner) { - color: #222; - } - &.ugb-pricing-box--is-dark { - *:not(.ugb-button--inner) { - color: #fff; - } - } - } - } -} - -/** - * Compatibility < v1.11 - */ -.ugb-pricing-box:not([class*="ugb-pricing-box--v"]) { - @include baseBlock(); - display: flex; - flex-wrap: wrap; - margin: 0 (-$box-hori-padding * 0.5); - > div { - text-align: center; - @include baseBlock(); - @include box(); - flex: 1; - min-width: 250px; - &, - &:first-child, - &:last-child { - margin: ($box-hori-padding * 0.5) !important; - } - } - h3 { - line-height: 100% !important; - } - .ugb-pricing-box-pricing { - font-size: 3.5em; - line-height: 100% !important; - } - .ugb-pricing-box-per-month-label { - font-size: 0.75em; - opacity: 0.3; - text-transform: uppercase; - line-height: 100% !important; - } -} -.ugb-pricing-box.column-1 { - .ugb-pricing-box-column-two, - .ugb-pricing-box-column-three { - display: none; - } -} -.ugb-pricing-box.column-2 { - .ugb-pricing-box-column-three { - display: none; - } -} -.blocks-button__inline-link.pricing-box { - margin: 5px auto 0 auto; -} diff --git a/src/deprecated/v1/block-team-member.scss b/src/deprecated/v1/block-team-member.scss deleted file mode 100644 index 4ae20ec9b..000000000 --- a/src/deprecated/v1/block-team-member.scss +++ /dev/null @@ -1,177 +0,0 @@ -@import "common"; - -/** - * Deprecated < v2 - */ -.ugb-team-member.ugb-team-member--v2 { - .ugb-team-member__image { - width: 300px; - height: 300px; - background-size: cover; - background-position: center; - margin: 0 auto 2em; - } - .ugb-team-member--image-circle .ugb-team-member__image { - border-radius: 100%; - } -} - -.ugb-team-member.ugb-team-member--v2.ugb-team-member--columns-2 { - .ugb-team-member__image { - width: 220px; - height: 220px; - } -} -.ugb-team-member.ugb-team-member--v2.ugb-team-member--columns-3 { - .ugb-team-member__image { - width: 150px; - height: 150px; - } -} - -.ugb-team-member.ugb-team-member--v2 { - @include baseBlock(); - display: grid; - grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); - grid-gap: $box-hori-padding; - text-align: center; - - .ugb-team-member__item { - margin-bottom: 0 !important; - } - - .ugb-team-member__content { - margin: 0; - } - - &.ugb-team-member--columns-2 { - grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); - } - &.ugb-team-member--columns-1 { - grid-template-columns: minmax(0, 1fr); - } - @media screen and (max-width: $break-medium) { - &.ugb-team-member--columns-3 { - grid-template-columns: minmax(0, 1fr); - } - } - @media screen and (max-width: $break-small) { - &.ugb-team-member--columns-2 { - grid-template-columns: minmax(0, 1fr); - } - } - .ugb-team-member__position { - opacity: 0.7; - } -} - -.ugb-team-member.ugb-team-member--v2.ugb-team-member--design-basic { - .ugb-team-member__item { - @include box(); - } -} - -.ugb-team-member.ugb-team-member--v2.ugb-team-member--design-basic, -.ugb-team-member.ugb-team-member--v2.ugb-team-member--design-plain { - .ugb-team-member__content { - @include baseBlock(); - } -} - -/** - * Deprecated < 1.11 - */ -.ugb-team-member:not([class*="ugb-team-member--v"]) { - @include baseBlock(); - display: flex; - flex-wrap: wrap; - margin: 0 (-$box-hori-padding * 0.5); - - .team-member-image { - width: 300px; - height: 300px; - background-size: cover; - background-position: center; - } - &.columns-2 { - .team-member-image { - width: 220px; - height: 220px; - } - } - &.columns-3 { - .team-member-image { - width: 150px; - height: 150px; - } - } - &.image-circle .team-member-image { - border-radius: 100%; - } - - > div { - text-align: center; - @include baseBlock(); - p { - text-align: center; - } - flex: 1; - min-width: 250px; - &, - &:first-child, - &:last-child { - margin: ($box-hori-padding * 0.5) !important; - } - } - .ugb-team-member-position { - opacity: 0.7; - } -} - -/** - * Deprecated. < v1.5 - */ -.ugb-team-member:not([class*="ugb-team-member--v"]) { - h4 { - margin: 0 0 0.5rem !important; - padding-top: 0; - } - .team-member-image { - margin: 0 auto 1.3rem; - } - &.column-2 { - .team-member-image { - width: 220px; - height: 220px; - } - } - &.column-3 { - .team-member-image { - width: 150px; - height: 150px; - } - } - .ugb-team-member-position { - opacity: 0.3; - font-size: 0.75em; - text-transform: uppercase; - } - .ugb-team-member-des, - .ugb-team-member-des-two, - .ugb-team-member-des-three { - opacity: 0.5; - margin: 0 0 1rem; - left: 0; - } -} -.ugb-team-member.column-1 { - .ugb-team-member-column-two, - .ugb-team-member-column-three { - display: none; - } -} -.ugb-team-member.column-2 { - .ugb-team-member-column-three { - display: none; - } -} diff --git a/src/deprecated/v1/block-testimonial.scss b/src/deprecated/v1/block-testimonial.scss deleted file mode 100644 index 3af923dde..000000000 --- a/src/deprecated/v1/block-testimonial.scss +++ /dev/null @@ -1,140 +0,0 @@ -// stylelint-disable declaration-property-unit-allowed-list -@import "common"; - -/** - * Compatibility < v.11 - */ -.ugb-testimonial:not([class*="ugb-testimonial--v"]) { - @include baseBlock(); - display: flex; - flex-wrap: wrap; - margin: 0 (-$box-hori-padding * 0.5); - .testimonial-image { - height: 75px; - width: 75px; - background-size: cover; - background-position: center; - border-radius: 100%; - margin: 0 auto 1.3rem; - } - > div { - text-align: center; - @include baseBlock(); - p { - text-align: center; - } - flex: 1; - min-width: 250px; - &, - &:first-child, - &:last-child { - margin: ($box-hori-padding * 0.5) !important; - } - } - h4 { - margin: 0 0 0.5rem !important; - padding-top: 0; - } - .ugb-testimonial-position { - opacity: 0.5; - } -} - -/** - * Deprecated. < v1.5 - */ -.ugb-testimonial { - .ugb-testimonial-position, - .ugb-testimonial-position-two, - .ugb-testimonial-position-three { - // opacity: 0.3; - font-size: 0.75em; - margin: 0 0 1rem; - text-transform: uppercase; - } - .ugb-testimonial-body, - .ugb-testimonial-body-two, - .ugb-testimonial-body-three { - // opacity: 0.5; - margin: 0 0 1rem; - left: 0; - } - .quote-icon { - height: 75px; - display: flex; - justify-content: center; - align-items: center; - svg { - height: 50px; - width: auto; - fill: #e6e6e6; - } - } -} - -/** - * Deprecated < v2 - */ -.ugb-testimonial--v2.ugb-testimonial { - @include baseBlock(); - display: grid; - grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); - grid-gap: $box-hori-padding; - text-align: center; - - .ugb-testimonial__item { - margin-bottom: 0 !important; - } - .ugb-testimonial__body-wrapper { - margin-bottom: 1em; - } - &.ugb-testimonial--serif .ugb-testimonial__body { - font-family: Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif", "Bitstream Vera Serif", "Liberation Serif", Georgia, serif !important; - font-style: italic; - font-size: 20px; - line-height: 1.7em !important; - font-weight: 400; - color: #555; - } - - &.ugb-testimonial--columns-2 { - grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); - } - &.ugb-testimonial--columns-1 { - grid-template-columns: minmax(0, 1fr); - } - @media screen and (max-width: $break-medium) { - &.ugb-testimonial--columns-3 { - grid-template-columns: minmax(0, 1fr); - } - } - @media screen and (max-width: $break-small) { - &.ugb-testimonial--columns-2 { - grid-template-columns: minmax(0, 1fr); - } - } - - .ugb-testimonial__person { - @include baseBlock(); - margin-top: 0; - margin-bottom: 0; - } - .ugb-testimonial.ugb-testimonial--design-basic { - .ugb-testimonial__item { - @include box(); - } - } - .ugb-testimonial__image { - height: 75px; - width: 75px; - background-size: cover; - background-position: center; - border-radius: 100%; - margin: 0 auto 1.3rem; - } - .ugb-testimonial__position { - font-size: 0.75em; - text-transform: uppercase; - opacity: 0.7; - } -} diff --git a/src/deprecated/v1/block-video-popup.scss b/src/deprecated/v1/block-video-popup.scss deleted file mode 100644 index d1926d4de..000000000 --- a/src/deprecated/v1/block-video-popup.scss +++ /dev/null @@ -1,218 +0,0 @@ -@import "common"; - -/** - * Compatibility < 2 - */ -.ugb-video-popup.ugb-video-popup--v2 { - position: relative; - @include baseBlock(); - @include box(); - padding: 0; - overflow: hidden; - &:not(.alignfull) { - width: 100%; - margin-left: auto; - margin-right: auto; - } - - // Override box padding. - &.ugb--has-background { - padding: 0; - } - - &.aligncenter { - max-width: 600px; - } - &.alignwide { - .ugb-video-popup__wrapper { - min-height: 500px; - padding-bottom: 40%; - } - } - &.alignfull { - .ugb-video-popup__wrapper { - min-height: 500px; - padding-bottom: 35%; - } - } - - .ugb-video-popup__wrapper { - position: relative; - width: 100%; - padding-bottom: 56.25%; - border: 0 !important; - box-shadow: none !important; - } - - // Background tint. - &::before { - transition: all 0.3s ease-in-out; - } - &.ugb--background-opacity-0:hover::before { - opacity: 0.3; - } - &.ugb--background-opacity-1:hover::before { - opacity: 0.4; - } - &.ugb--background-opacity-2:hover::before { - opacity: 0.5; - } - &.ugb--background-opacity-3:hover::before { - opacity: 0.6; - } - &.ugb--background-opacity-4:hover::before { - opacity: 0.1; - } - &.ugb--background-opacity-5:hover::before { - opacity: 0.2; - } - &.ugb--background-opacity-6:hover::before { - opacity: 0.3; - } - &.ugb--background-opacity-7:hover::before { - opacity: 0.4; - } - &.ugb--background-opacity-8:hover::before { - opacity: 0.5; - } - &.ugb--background-opacity-9:hover::before { - opacity: 0.6; - } - &.ugb--background-opacity-10:hover::before { - opacity: 0.7; - } -} - -/** - * Compatibility < 1.11 - */ -.ugb-video-popup:not([class*="ugb-video-popup--v"]) { - &::before { - transition: all 0.3s ease-in-out; - } - &.ugb-has-background-opacity-0:hover::before { - opacity: 0.3; - } - &.ugb-has-background-opacity-1:hover::before { - opacity: 0.4; - } - &.ugb-has-background-opacity-2:hover::before { - opacity: 0.5; - } - &.ugb-has-background-opacity-3:hover::before { - opacity: 0.6; - } - &.ugb-has-background-opacity-4:hover::before { - opacity: 0.1; - } - &.ugb-has-background-opacity-5:hover::before { - opacity: 0.2; - } - &.ugb-has-background-opacity-6:hover::before { - opacity: 0.3; - } - &.ugb-has-background-opacity-7:hover::before { - opacity: 0.4; - } - &.ugb-has-background-opacity-8:hover::before { - opacity: 0.5; - } - &.ugb-has-background-opacity-9:hover::before { - opacity: 0.6; - } - &.ugb-has-background-opacity-10:hover::before { - opacity: 0.7; - } -} - -.video-popup-image { - height: 220px; - width: 220px; - background-position: center; - background-size: cover; - margin-bottom: 10px; -} - -.ugb-video-popup:not([class*="ugb-video-popup--v"]) { - position: relative; - width: 100%; - max-width: 600px; - @include baseBlock(); - @include box(); - margin-left: auto; - margin-right: auto; - padding: 0; - overflow: hidden; - - .ugb-video-preview, - a, - .ugb-video-overlay, - .ugb-play-button { - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - } - .ugb-video-preview { - margin: 0 !important; - background-size: cover; - background-position: center; - opacity: 0.4; - transition: all 0.3s ease-in-out; - z-index: 1; - } - &:hover .ugb-video-preview { - opacity: 0.5; - } - .ugb-video-wrapper { - position: relative; - width: 100%; - padding-bottom: 56.25%; - border: 0 !important; - box-shadow: none !important; - } - a, - .ugb-video-overlay { - z-index: 3; - box-shadow: none !important; - background: transparent !important; - display: block !important; - } - .ugb-play-button { - z-index: 2; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - } - svg { - fill: #fff; - } -} - -.ugb-video-popup-link .editor-url-input input[type="text"] { - width: auto !important; -} - -.ugb-video-popup { - button.components-button.button { - position: absolute; - z-index: 4; - left: 50%; - transform: translateX(-50%); - top: 30%; - &:active { - transform: translateX(-50%); - } - } -} - -// Don't add a background color to the popup's close button. -// stylelint-disable-next-line selector-id-pattern -#bp_container .bp-x { - &, - &:hover { - background: none !important; - } -} diff --git a/src/deprecated/v1/common.scss b/src/deprecated/v1/common.scss deleted file mode 100644 index f7b58f761..000000000 --- a/src/deprecated/v1/common.scss +++ /dev/null @@ -1,88 +0,0 @@ -/** - * #.# Common SCSS - * - * Can include things like variables and mixins - * that are used across the project. -*/ -@use "sass:math"; - -// Most used breakpoints -$break-huge: 1440px; -$break-wide: 1280px; -$break-large: 960px; // admin sidebar auto folds. Breakpoint for tablet -$break-medium: 782px; // adminbar goes big -$break-small: 600px; // Breakpoint for mobile -$break-mobile: 480px; -$break-js-tablet: 1025px; -$break-js-mobile: 768px; - -// Box -$box-radius: 12px; -$box-hori-padding: 35px; -$box-vert-padding: 60px; - -/** - * For blocks with a box outline, we can use the custom properties: - * --box-padding-vert - * --box-padding-hori - * to get the current padding values - */ -@mixin boxNoPadding() { - box-shadow: 0 5px 5px 0 rgba(18, 63, 82, 0.035), 0 0 0 1px rgba(176, 181, 193, 0.2); - background-color: #fff; - border-radius: $box-radius; - overflow: hidden; -} -@mixin box() { - @include boxNoPadding(); - padding: $box-vert-padding $box-hori-padding; - --box-padding-vert: #{$box-vert-padding}; - --box-padding-hori: #{$box-hori-padding}; - @media screen and (max-width: $break-medium) { - padding: math.div($box-vert-padding * 2, 3) math.div($box-hori-padding * 2, 3); - --box-padding-vert: #{math.div($box-vert-padding * 2, 3)}; - --box-padding-hori: #{math.div($box-hori-padding * 2, 3)}; - } - @media screen and (max-width: $break-small) { - padding: $box-hori-padding ($box-hori-padding * 0.5); - --box-padding-vert: #{$box-hori-padding}; - --box-padding-hori: #{($box-hori-padding * 0.5)}; - } -} - -/** - * Deprecated < v2 - */ - -// A block can have a ugb-content-width class to make it's content fit the content-width. -.ugb--content-width .ugb-content-wrapper, -.ugb-content-width .ugb-content-wrapper { // Old naming convention. - max-width: var(--content-width); - margin: 0 auto; -} - - -@mixin baseBlock() { - @include blockContentReset(); - margin-top: 1.5em; - margin-bottom: 1.5em; -} - -@mixin blockContentReset() { - > * { - margin-top: 0 !important; - margin-bottom: 1rem !important; - &:first-child { - margin-top: 0 !important; - } - &:last-child { - margin-bottom: 0 !important; - } - } -} - -// Fixed background images. -.ugb--has-background-image { - background-size: cover; - background-position: center; -} diff --git a/src/deprecated/v1/component-button-edit.scss b/src/deprecated/v1/component-button-edit.scss deleted file mode 100644 index 1abdd4322..000000000 --- a/src/deprecated/v1/component-button-edit.scss +++ /dev/null @@ -1,154 +0,0 @@ -@import "common"; - -/** - * Button link form styles. - */ -.ugb-button { - .ugb-button-inner { - text-decoration: none !important; - display: block; - color: #fff; - box-shadow: none !important; - margin: 0 !important; - padding: 0 !important; - transition: all 0.2s ease-in-out; - } -} -.ugb-button .ugb-button-inner:hover { - color: #fff; -} - -.ugb-button-tiny.ugb-button { - padding-left: 1em; - padding-right: 1em; - padding-top: calc(0.3em - var(--s-border, 0px)); - padding-bottom: calc(0.3em - var(--s-border, 0px)); - .ugb-button-inner { - font-size: 0.7em; - } -} -.ugb-button-small.ugb-button .ugb-button-inner { - font-size: 0.85em; -} -.ugb-button-medium.ugb-button { - padding-left: 1.5em; - padding-right: 1.5em; - padding-top: calc(0.6em - var(--s-border, 0px)); - padding-bottom: calc(0.6em - var(--s-border, 0px)); - .ugb-button-inner { - font-size: 1.075em; - } -} -.ugb-button-large.ugb-button { - padding-left: 1.75em; - padding-right: 1.75em; - padding-top: calc(0.8em - var(--s-border, 0px)); - padding-bottom: calc(0.8em - var(--s-border, 0px)); - .ugb-button-inner { - font-size: 1.15em; - } -} -.ugb-button-left { - margin-right: auto; -} -.ugb-button-center { - margin-left: auto; - margin-right: auto; -} -.ugb-button-right { - margin-left: auto; -} -.ugb-button-full { - text-align: center; -} - -// Ghost button design. -.ugb-button.ugb-ghost-button { - background-color: transparent; - --s-border: 2px; - border: var(--s-border, 0px) solid var(--s-primary-color, #2091e1); - .ugb-button-inner { - color: var(--s-primary-color, #2091e1); - } - &:hover { - opacity: 0.85; - box-shadow: none !important; - .ugb-button-inner { - color: var(--s-primary-color, #2091e1); - } - } - &.ugb-button--ghost-to-normal-effect:hover { - background-color: var(--s-primary-color, #2091e1); - svg, - .ugb-button--inner { - color: #fff; - } - } -} - -// Link design. -.ugb-button.ugb-plain-button { - background-color: transparent; - border: none; - padding-left: 0; - padding-right: 0; - .ugb-button-inner { - color: var(--s-primary-color, #2091e1); - } - &:hover { - opacity: 0.85; - box-shadow: none !important; - .ugb-button-inner { - color: var(--s-primary-color, #2091e1); - } - } -} - -// Just a link -.ugb-button.ugb-link-button { - background: transparent; - padding: 0; - border-radius: 0 !important; -} - -.ugb-button.ugb-has-icon { - display: inline-flex; - justify-content: center; - align-items: center; - svg { - color: #fff; - width: 1em; - height: 1em; - margin-bottom: 0 !important; - margin-right: 0.75em; - } - &.ugb-button--icon-position-right { - flex-direction: row-reverse; - svg { - margin-right: 0; - margin-left: 0.75em; - } - } -} -.ugb-button.ugb-has-icon.ugb-ghost-button, -.ugb-button.ugb-has-icon.ugb-plain-button { - svg { - color: var(--s-primary-color, #2091e1); - } -} -.ugb-button-tiny.ugb-button.ugb-has-icon svg { - width: 0.75em; - height: 0.75em; -} -.ugb-button-small.ugb-button.ugb-has-icon svg { - width: 0.75em; - height: 0.75em; -} -.ugb-button-medium.ugb-button.ugb-has-icon svg { - width: 1.25em; - height: 1.25em; -} -.ugb-button-large.ugb-button.ugb-has-icon svg { - width: 1.5em; - height: 1.5em; -} diff --git a/src/deprecated/v1/component-panel-background-settings.scss b/src/deprecated/v1/component-panel-background-settings.scss deleted file mode 100644 index 81255942e..000000000 --- a/src/deprecated/v1/component-panel-background-settings.scss +++ /dev/null @@ -1,67 +0,0 @@ -@import "common"; - -/** - * Background/boxed styles - */ -.ugb--has-background, -.ugb-has-background { - @include box(); -} -.ugb--has-background-image, -.ugb-has-background-image, -.ugb--has-background-gradient, -.ugb--has-background-video { - position: relative; - background-size: cover; - background-position: center; - - // We need to reset this to none, or else the container's - // background color will apply to all child blocks. - --ugb-background-color: none; - --ugb-background-color2: none; - --ugb-background-direction: none; - - &::before { - display: block !important; - content: ""; - position: absolute; - z-index: 2; - top: 0; - right: 0; - left: 0; - bottom: 0; - background-color: var(--ugb-background-color, #fff); - } - &.ugb--has-background-gradient { - overflow: hidden; - &::before { - background-image: linear-gradient(var(--ugb-background-direction, 0deg), var(--ugb-background-color, #fff), var(--ugb-background-color2, #fff)); - } - } - .ugb-video-background { - position: absolute; - top: 50%; - left: 50%; - transform: translateX(-50%) translateY(-50%); - width: 100%; - height: 100%; - z-index: 1; - object-fit: cover; - } - > * { - position: relative; - z-index: 3; - } -} -.alignfull.ugb--has-background, -.alignfull.ugb-has-background { - border-radius: 0; - margin-top: 0; - margin-bottom: 0; -} -@for $i from 0 through 10 { - .ugb--background-opacity-#{ $i }::before, - .ugb-has-background-opacity-#{ $i }::before { - opacity: $i * 0.1; - } -} diff --git a/src/deprecated/v1/init.php b/src/deprecated/v1/init.php deleted file mode 100644 index e9b8df9e5..000000000 --- a/src/deprecated/v1/init.php +++ /dev/null @@ -1,119 +0,0 @@ - 'string', - 'description' => __( 'Load version 1 styles for backward compatibility', STACKABLE_I18N ), - 'sanitize_callback' => 'sanitize_text_field', - 'show_in_rest' => true, - 'default' => '', - ) - ); - } - add_action( 'init', 'stackable_register_load_v1_styles_option' ); -} - -if ( ! function_exists( 'stackable_should_load_v1_styles' ) ) { - - /** - * Should we load v1 styles - * - * @return Boolean - * - * @since 2.0 - */ - function stackable_should_load_v1_styles() { - return get_option( 'stackable_load_v1_styles' ) === '1'; - } -} - -/******************************************************************************************** - * END Version 1 frontend styles backward compatibility. - ********************************************************************************************/ - -/******************************************************************************************** - * Version 1 & TwentyTwenty frontend styles backward compatibility. - ********************************************************************************************/ - -if ( ! function_exists( 'stackable_twentytwenty_body_class' ) ) { - /** - * Adds a twentytwenty class name to the body if the twentytwenty is used. - */ - function stackable_twentytwenty_body_class( $classes ) { - $classes[] = 'ugb--twentytwentytwenty-compat'; - return $classes; - } - - function stackable_twentytwenty_compat() { - if ( function_exists( 'twentytwenty_theme_support' ) && stackable_should_load_v1_styles() ) { - add_filter( 'body_class','stackable_twentytwenty_body_class' ); - } - } - add_action( 'wp', 'stackable_twentytwenty_compat' ); -} - -/******************************************************************************************** - * END Version 1 & TwentyTwenty frontend styles backward compatibility. - ********************************************************************************************/ diff --git a/src/deprecated/v1/readme.md b/src/deprecated/v1/readme.md deleted file mode 100644 index cc17ed4ec..000000000 --- a/src/deprecated/v1/readme.md +++ /dev/null @@ -1,6 +0,0 @@ -Deprecated Styles -================= - -All the styles in this folder are kept here for backward compatibility for < v2.0 - -These styles are compiled into **frontend_blocks_deprecated.css** and is only loaded in the frontend when it was detected that an earlier version of Stackable was previously activated in the site. diff --git a/src/deprecated/v1/twentytwenty-compat.scss b/src/deprecated/v1/twentytwenty-compat.scss deleted file mode 100644 index 421e48e36..000000000 --- a/src/deprecated/v1/twentytwenty-compat.scss +++ /dev/null @@ -1,10 +0,0 @@ -// There is a problem with TwentyTwenty / 2020 and migrated blocks. -// Because of how we define the migrated selector rules, it's overriding -// and adding margin-left and margin-right and prevents the blocks -// from centering. This is a fix for TwentyTwenty only. -body.ugb--twentytwentytwenty-compat { - [class*="wp-block-ugb-"]:not(.ugb-main-block) { - margin-left: auto; - margin-right: auto; - } -} diff --git a/src/welcome/admin.js b/src/welcome/admin.js index 7e5fecc77..26373bb17 100644 --- a/src/welcome/admin.js +++ b/src/welcome/admin.js @@ -484,7 +484,6 @@ const GlobalSettings = () => { const AdditionalOptions = props => { const [ helpTooltipsDisabled, setHelpTooltipsDisabled ] = useState( false ) - const [ v1BackwardCompatibility, setV1BackwardCompatibility ] = useState( false ) const [ v2EditorBackwardCompatibility, setV2EditorBackwardCompatibility ] = useState( false ) const [ v2EditorBackwardCompatibilityUsage, setV2EditorBackwardCompatibilityUsage ] = useState( false ) const [ v2FrontendBackwardCompatibility, setV2FrontendBackwardCompatibility ] = useState( false ) @@ -497,7 +496,6 @@ const AdditionalOptions = props => { const settings = new models.Settings() settings.fetch().then( response => { setHelpTooltipsDisabled( !! response.stackable_help_tooltip_disabled ) - setV1BackwardCompatibility( response.stackable_load_v1_styles === '1' ) setV2EditorBackwardCompatibility( response.stackable_v2_editor_compatibility === '1' ) setV2EditorBackwardCompatibilityUsage( response.stackable_v2_editor_compatibility_usage === '1' ) setV2FrontendBackwardCompatibility( response.stackable_v2_frontend_compatibility === '1' ) @@ -574,14 +572,6 @@ const AdditionalOptions = props => { setV2FrontendBackwardCompatibility( checked ) } } /> - { - updateSetting( { stackable_load_v1_styles: checked ? '1' : '' } ) // eslint-disable-line camelcase - setV1BackwardCompatibility( checked ) - } } - /> { isBusy &&
From 710d04fceb60125ec6195af23e586d7454cc992e Mon Sep 17 00:00:00 2001 From: Benjamin Intal Date: Tue, 8 Aug 2023 18:41:52 +0800 Subject: [PATCH 02/43] don't load proton compatibility functions if Jetpack proton is not present --- src/jetpack.php | 99 ++++++++++++++++++++++++------------------------- 1 file changed, 49 insertions(+), 50 deletions(-) diff --git a/src/jetpack.php b/src/jetpack.php index 1123f0675..9b32b9733 100644 --- a/src/jetpack.php +++ b/src/jetpack.php @@ -11,64 +11,63 @@ exit; } -if ( ! function_exists( 'stackable_jetpack_photon_render_block_replace_style_images' ) ) { - /** - * Replace the url with a Photon url. - * - * @param array $matches Matches returned by preg_replace_callback. These are urls. - * - * @return string The replacement string. - */ - function stackable_jetpack_photon_render_block_replace_style_images( $matches ) { - return jetpack_photon_url( $matches[0] ); +// Only when Jetpack's Photon is enabled. +if ( function_exists( 'jetpack_photon_url' ) ) { + if ( ! function_exists( 'stackable_jetpack_photon_render_block_replace_style_images' ) ) { + /** + * Replace the url with a Photon url. + * + * @param array $matches Matches returned by preg_replace_callback. These are urls. + * + * @return string The replacement string. + */ + function stackable_jetpack_photon_render_block_replace_style_images( $matches ) { + return jetpack_photon_url( $matches[0] ); + } } -} -if ( ! function_exists( 'stackable_jetpack_photon_render_block_replace_style' ) ) { - /** - * Find all the image urls that needs ot be replaced with CDN urls. - * - * @param array $matches Matches returned by preg_replace_callback. - * - * @return string The replacement string. - */ - function stackable_jetpack_photon_render_block_replace_style( $matches ) { - return preg_replace_callback( '/https?:[^;\}<]+.(jpg|gif|png)/i', 'stackable_jetpack_photon_render_block_replace_style_images', $matches[0] ); + if ( ! function_exists( 'stackable_jetpack_photon_render_block_replace_style' ) ) { + /** + * Find all the image urls that needs ot be replaced with CDN urls. + * + * @param array $matches Matches returned by preg_replace_callback. + * + * @return string The replacement string. + */ + function stackable_jetpack_photon_render_block_replace_style( $matches ) { + return preg_replace_callback( '/https?:[^;\}<]+.(jpg|gif|png)/i', 'stackable_jetpack_photon_render_block_replace_style_images', $matches[0] ); + } } -} -if ( ! function_exists( 'stackable_jetpack_photon_render_block' ) ) { - /** - * Replaces all image urls inside style tags into CDN tags. - * - * @param string $block_content The block output. - * @param array $block The block object being rendered. - * - * @return string The modified block output. - */ - function stackable_jetpack_photon_render_block( $block_content, $block ) { - if ( $block_content === null ) { - return $block_content; - } + if ( ! function_exists( 'stackable_jetpack_photon_render_block' ) ) { + /** + * Replaces all image urls inside style tags into CDN tags. + * + * @param string $block_content The block output. + * @param array $block The block object being rendered. + * + * @return string The modified block output. + */ + function stackable_jetpack_photon_render_block( $block_content, $block ) { + if ( $block_content === null ) { + return $block_content; + } - // Only when Jetpack's Photon is enabled. - if ( ! function_exists( 'jetpack_photon_url' ) ) { - return $block_content; - } + // Only for Stackable blocks. + $block_name = isset( $block['blockName'] ) ? $block['blockName'] : ''; + if ( strpos( $block_name, 'ugb/', 0 ) === false ) { + return $block_content; + } - // Only for Stackable blocks. - $block_name = isset( $block['blockName'] ) ? $block['blockName'] : ''; - if ( strpos( $block_name, 'ugb/', 0 ) === false ) { - return $block_content; - } + // Just a quick check: Only change if there're images found in the style tag. + if ( ! preg_match( '/ Date: Tue, 8 Aug 2023 18:42:03 +0800 Subject: [PATCH 03/43] save an option lookup if not needed --- src/css-optimize.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/css-optimize.php b/src/css-optimize.php index a5b5d4cdc..7eba35a67 100644 --- a/src/css-optimize.php +++ b/src/css-optimize.php @@ -202,9 +202,9 @@ public function load_cached_css_for_post() { if ( is_singular() && ! is_preview() && ! is_attachment() ) { $post_id = get_the_ID(); $this->optimized_css = get_post_meta( $post_id, 'stackable_optimized_css', true ); - $this->css_raw = get_post_meta( $post_id, 'stackable_optimized_css_raw', true ); if ( ! empty( $this->optimized_css ) ) { + $this->css_raw = get_post_meta( $post_id, 'stackable_optimized_css_raw', true ); add_action( 'wp_head', array( $this, 'print_optimized_styles' ) ); } } From e04e6ba1c9d84d09bc6ced7ad7afd39f37b901f3 Mon Sep 17 00:00:00 2001 From: Benjamin Intal Date: Tue, 8 Aug 2023 18:44:43 +0800 Subject: [PATCH 04/43] only run filter when block is present --- src/deprecated/v2/block/blog-posts/index.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/deprecated/v2/block/blog-posts/index.php b/src/deprecated/v2/block/blog-posts/index.php index d17e41a5b..740a2909a 100644 --- a/src/deprecated/v2/block/blog-posts/index.php +++ b/src/deprecated/v2/block/blog-posts/index.php @@ -642,7 +642,7 @@ function stackable_render_block_blog_posts_v2( $block_content, $block ) { } return $parts[0] . $parts[1] . $block_content . $parts[2]; } - add_filter( 'render_block', 'stackable_render_block_blog_posts_v2', 10, 2 ); + add_filter( 'render_block_ugb/blog-posts', 'stackable_render_block_blog_posts_v2', 10, 2 ); } if ( ! function_exists( 'stackable_rest_get_terms_v2' ) ) { From 21a41ed19a58b69ff9cb659feb60f9033e7e142f Mon Sep 17 00:00:00 2001 From: Benjamin Intal Date: Tue, 8 Aug 2023 21:39:49 +0800 Subject: [PATCH 05/43] improve performance by removing some regex usage --- src/fonts.php | 22 +++++++++++++++++++--- 1 file changed, 19 insertions(+), 3 deletions(-) diff --git a/src/fonts.php b/src/fonts.php index e1b57aa61..77df11b5c 100644 --- a/src/fonts.php +++ b/src/fonts.php @@ -8,6 +8,20 @@ exit; } +if ( ! function_exists( 'str_ends_with' ) ) { + /** + * This function is only available in PHP 8.0 and above. + * + * @param {string} $haystack + * @param {string} $needle + * @return {boolean} + */ + function str_ends_with( $haystack, $needle ) { + $needle_len = strlen( $needle ); + return ( $needle_len === 0 || 0 === substr_compare( $haystack, $needle, - $needle_len ) ); + } +} + if ( ! class_exists( 'Stackable_Google_Fonts' ) ) { class Stackable_Google_Fonts { @@ -21,9 +35,11 @@ function __construct() { public function gather_google_fonts( $block_content, $block ) { $block_name = isset( $block['blockName'] ) ? $block['blockName'] : ''; if ( $this->is_stackable_block( $block_name ) && is_array( $block['attrs'] ) ) { - foreach ( $block['attrs'] as $attr_name => $font_name ) { - if ( preg_match( '/fontFamily$/i', $attr_name ) ) { - self::register_font( $font_name ); + if ( stripos( $block_content, 'family' ) !== false ) { + foreach ( $block['attrs'] as $attr_name => $font_name ) { + if ( str_ends_with( strtolower( $attr_name ), 'fontfamily' ) ) { + self::register_font( $font_name ); + } } } } From 41d96f22954579fc3ac9dde510d6a1812b87ddf3 Mon Sep 17 00:00:00 2001 From: Benjamin Intal Date: Tue, 8 Aug 2023 21:54:46 +0800 Subject: [PATCH 06/43] optimize global settings to add hook only when the option is set --- src/global-settings.php | 12 +++++------- 1 file changed, 5 insertions(+), 7 deletions(-) diff --git a/src/global-settings.php b/src/global-settings.php index 98755f1d8..d559d6f8b 100644 --- a/src/global-settings.php +++ b/src/global-settings.php @@ -65,7 +65,10 @@ function __construct() { add_action( 'after_setup_theme', array( $this, 'typography_parse_global_styles' ) ); // For some native blocks, add a note that they're core blocks. - add_filter( 'render_block', array( $this, 'typography_detect_native_blocks' ), 10, 2 ); + // Only do this when we need to style native blocks. + if ( in_array( $this->get_apply_typography_to(), array( 'blocks-stackable-native', 'blocks-all' ) ) ) { + add_filter( 'render_block', array( $this, 'typography_detect_native_blocks' ), 10, 2 ); + } // Fixes columns issue with Native Posts block. add_filter( 'stackable_global_typography_selectors', array( $this, 'posts_block_columns_fix' ), 10, 2 ); @@ -700,16 +703,11 @@ public function clamp_inherited_style( $value, $max = 999999, $min = -999999 ) { * @return string Rendered block */ public function typography_detect_native_blocks( $block_content, $block ) { - $block_name = isset( $block['blockName'] ) ? $block['blockName'] : ''; - if ( $block_content === null ) { return $block_content; } - // Only do this when we need to style native blocks. - if ( ! in_array( $this->get_apply_typography_to(), array( 'blocks-stackable-native', 'blocks-all' ) ) ) { - return $block_content; - } + $block_name = isset( $block['blockName'] ) ? $block['blockName'] : ''; // Only do this if we have some global typography settings to apply. if ( empty( $this->generated_typography_css ) ) { From 1d81907e0f8b1a9592296fc1c31465c0ac0502e1 Mon Sep 17 00:00:00 2001 From: Benjamin Intal Date: Tue, 8 Aug 2023 22:04:47 +0800 Subject: [PATCH 07/43] removed some regex to improve performance --- src/init.php | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/init.php b/src/init.php index 53716de6a..d37b970be 100644 --- a/src/init.php +++ b/src/init.php @@ -214,9 +214,7 @@ public function load_frontend_scripts_conditionally( $block_content, $block ) { $stackable_block = ''; $block_name = isset( $block['blockName'] ) ? $block['blockName'] : ''; if ( stripos( $block_name, 'stackable/' ) === 0 ) { - if ( preg_match( '#stackable/([\w\d-]+)#', $block_name, $matches ) ) { - $stackable_block = $matches[1]; - } + $stackable_block = substr( $block_name, 10 ); } else if ( stripos( $block_content, '