search

Codeinwp / otter-blocks

Create beautiful and attracting posts, pages, and landing pages with Gutenberg Blocks and Template Library by Otter.
https://wordpress.org/plugins/otter-blocks/
GNU General Public License v3.0
140 stars 34 forks source link

V2.0.9 Some Custom CSS Causes Page Rendering Problems #1087

Open wags1128 opened 2 years ago

wags1128 commented 2 years ago

When declaring a font-family, the norm is to surround family names that contain whitespace within quotation marks.

For example:

selector { font-family: Garamond, Baskerville, "Baskerville Old Face", "Hoefler Text", "Times New Roman", serif; }

The use of quotation marks as shown above prevents the proper rendering of a page on the second and subsequent refreshes.

On the first refresh and after deleting any page-related CSS file from /uploads/themeisle-gutenberg/, everything appears as it should since the CSS required for proper rendering is found inline (. On the next refresh, a zero length CSS file exists in /uploads/themeisle-gutenberg/.

Before continuing it is assumed that there is no desire to modify /vendor/tubalmartin/cssmin. But it is important to note that the minify function in Minifier.php cannot process certain CSS strings. Specifically, the call shown below fails silently when it attempts to handle escaped quotation marks.

$css = preg_replace_callback( '/(?:"(?:[^\\"]|\\.|\\)")|'."(?:'(?:[^\\']|\\.|\\)')/S", array($this, 'processStringsCallback'), $css );

After the call above, the CSS string may be empty if a failure occurred.

Problems originate in class-css-handler.php. The save_css_file function includes the following line which escapes all quotation marks. Without this line, the call to the compress function fails.

$css = wp_filter_nohtml_kses( $css );

Potentially, one could replace this line with the following line (note: caution this may create other problems).

css = wp_kses( stripslashes( $css ), 'strip' );

A better option seems to be adding the following lines immediately after the call to the compress function.

if ( empty( $css ) ) { return self::delete_css_file( $post_id ); }

This option avoids creating (and using) a zero length CSS file in /uploads/themeisle-gutenberg/. Instead inline CSS is used every time.

This approach described above hides a problem. Otherwise, some kind of alert should tell users not to employ Custom CSS with certain characteristics like those noted above for a font-family.

Additionally, within the enqueue_styles function within class-block-frontend.php, the following block of code fails. It is assumed that wp_style_add_data causes the failure.

    add_action(
        'wp_enqueue_scripts',
        function () use ( $post_id, $file_name, $file_url, $file_path ) {
            wp_enqueue_style( 'otter-' . $file_name, $file_url, array( 'otter-blocks' ), OTTER_BLOCKS_VERSION );
            wp_style_add_data( 'otter-' . $file_name, 'path', $file_path );
        }
    );

Restoring the original line of code (shown below) fixes that problem.

return wp_enqueue_style( 'otter-' . $file_name, $file_url, array( 'otter-blocks' ), THEMEISLE_BLOCKS_VERSION );

HardeepAsrani commented 2 years ago

Hey @wags1128, we released version 2.0.10 last night which should address this issue. Can you try that and let us know if that works for you?

HardeepAsrani commented 2 years ago

Is it working now for you @wags1128?

wags1128 commented 2 years ago

V2.0.10 works better than V2.0.9 but always generates a zero length CSS file in /uploads/themeisle-gutenberg/. This file is not a problem since my pages do not exceed the criteria for use of inline CSS. In other words, I always execute the block of code shown below (found in the enqueue_styles function of class-block-frontend.php).

    if ( $this->total_inline_size + $file_size < $total_inline_limit ) {
        add_action(
            'wp_footer',
            function () use ( $post_id ) {
                return $this->get_post_css( $post_id );
            }
        );

        $this->total_inline_size += (int) $file_size;
        return;
    }

Never will I execute the following block of code.

    add_action(
        'wp_footer',
        function () use ( $file_name, $file_url, $file_path ) {
            wp_enqueue_style( 'otter-' . $file_name, $file_url, array(), OTTER_BLOCKS_VERSION );
        }
    );

If I did, the page would not render properly.

While the enqueue_styles function of class-block-frontend.php is much cleaner now, the minify function in Minifier.php within the /vendor/tubalmartin/cssmin folder continues to fail on the call shown below.

$css = preg_replace_callback( '/(?:"(?:[^\\"]|\.|\)")|'."(?:'(?:[^\\']|\.|\)')/S", array($this, 'processStringsCallback'), $css );

Once a font-family is escaped (see example below) , the preg_replace_callback call above will fail silently and a zero length CSS file will be written in /uploads/themeisle-gutenberg/.

font-family: Garamond, Baskerville, \"Baskerville Old Face\", \"Hoefler Text\", \"Times New Roman\", serif;

I hope this helps.

HardeepAsrani commented 2 years ago

Thanks for the report, we will look into it in the coming versions as we re-approach how we generate CSS.

HardeepAsrani commented 2 years ago

Hey @wags1128,

I tried to reproduce this with the font-family values that you provided and the CSS is always written on our end without any issues. Can you share your block with me using the Export Block as JSON feature of Otter?

wags1128 commented 2 years ago

Sorry but copy and paste for JSON did not work. Please check email.

HardeepAsrani commented 2 years ago

Hey @wags1128,

I didn't get any emails. You can upload it to some website (dropbox or anything) and share the link here.

wags1128 commented 2 years ago

blocks-export.txt

Uploaded JSON as a text file. Also emailed to your Github email address. Hopefully you get it.

wags1128 commented 2 years ago

Sure, here it is.

On Tue, Aug 16, 2022 at 8:30 AM Hardeep Asrani @.***> wrote:

Hey @wags1128 https://github.com/wags1128,

I tried to reproduce this with the font-family values that you provided and the CSS is always written on our end without any issues. Can you share your block with me using the Export Block as JSON feature of Otter?

— Reply to this email directly, view it on GitHub https://github.com/Codeinwp/otter-blocks/issues/1087#issuecomment-1216570930, or unsubscribe https://github.com/notifications/unsubscribe-auth/AB5BF6NMXVAFSUDDU2QJDTLVZOCU3ANCNFSM55UG3FCA . You are receiving this because you were mentioned.Message ID: @.***>

wags1128 commented 2 years ago

Hi.

I will give a try tomorrow and let you know.

Gary

On Thu, Aug 4, 2022, 8:08 PM Hardeep Asrani @.***> wrote:

Hey @wags1128 https://github.com/wags1128, we released version 2.0.10 last night which should address this issue. Can you try that and let us know if that works for you?

— Reply to this email directly, view it on GitHub https://github.com/Codeinwp/otter-blocks/issues/1087#issuecomment-1205898134, or unsubscribe https://github.com/notifications/unsubscribe-auth/AB5BF6PHN2D75B6JV7OEURLVXRLRDANCNFSM55UG3FCA . You are receiving this because you were mentioned.Message ID: @.***>

HardeepAsrani commented 1 year ago

@wags1128 Any update here?

wags1128 commented 1 year ago

Hi Hardeep,

I found the source of the problem and a solution. Neither has anything to do with escaping the font names contained within quotes.

The complex regular expression in CssMin/Minifier.php at line 323 (a preg_replace_callback for strings) demands a lot from the JIT compiler. If you check preg_last_error() after this call, the return code is a 6 (PREG_JIT_STACKLIMIT_ERROR) which is new with PHP 7.0.x.

Changes to php.ini don't seem to work. Adding ini_set("pcre.jit", "0"); to wp-config.php solves the problem and everything works as expected.

I hope this helps.

Best regards.

Gary

On Sat, Dec 3, 2022 at 11:57 PM Hardeep Asrani @.***> wrote:

@wags1128 https://github.com/wags1128 Any update here?

— Reply to this email directly, view it on GitHub https://github.com/Codeinwp/otter-blocks/issues/1087#issuecomment-1336321996, or unsubscribe https://github.com/notifications/unsubscribe-auth/AB5BF6OIRYY2LNOMF4LZUG3WLQQDBANCNFSM55UG3FCA . You are receiving this because you were mentioned.Message ID: @.***>

HardeepAsrani commented 1 year ago

@wags1128 Thank you for that, I haven't been able to reproduce it but in a few day I'll make a PR to replace CssMin with https://github.com/matthiasmullie/minify and see how it goes.

wags1128 commented 1 year ago

Hi Hardeep,

Replacing CssMin may prove difficult. In my opinion, a better alternative would be to add a line to class-css-handler.php in the compress() function (see below). Calling ini_set at this point works just fine. In fact CssMin uses the same call in its doRaisePhpLimits() function.

$compressor->setMemoryLimit( '256M' ); $compressor->setMaxExecutionTime( 120 ); $compressor->setPcreBacktrackLimit( 3000000 ); $compressor->setPcreRecursionLimit( 150000 ); ini_set("pcre.jit", "0");

Best regards.

Gary

On Mon, Dec 5, 2022 at 4:57 PM Hardeep Asrani @.***> wrote:

@wags1128 https://github.com/wags1128 Thank you for that, I haven't been able to reproduce it but in a few day I'll make a PR to replace CssMin with https://github.com/matthiasmullie/minify and see how it goes.

— Reply to this email directly, view it on GitHub https://github.com/Codeinwp/otter-blocks/issues/1087#issuecomment-1338228668, or unsubscribe https://github.com/notifications/unsubscribe-auth/AB5BF6KIKJ3M7MAGZCAHVOLWLZQL7ANCNFSM55UG3FCA . You are receiving this because you were mentioned.Message ID: @.***>

HardeepAsrani commented 1 year ago

@wags1128 I did try it some days back but the the only issue here is that I really have no way to test how it works given I'm not really able to reproduce this issue. Would it be possible for you to share an instance where we can test it?

wags1128 commented 1 year ago

Hi Hardeep,

The following is the CSS that is passed to the compress function in class-css-handler.php. I hope this helps.

Gary

wp-block-themeisle-blocks-advanced-columns-09ce430e {padding-top:

0px;padding-bottom: 0px;padding-left: 0px;padding-right: 0px;margin-top: 0px;margin-bottom: 0px;--columns-width: 1170px;justify-content: center;min-height: auto;--background: #082f5b;border-width: 0px 0px 0px 0px;border-style: solid;border-radius: 0px 0px 0px 0px;}#wp-block-themeisle-blocks-advanced-columns-09ce430e > .wp-block-themeisle-blocks-advanced-columns-overlay {opacity: 0.5;mix-blend-mode: normal;border-radius: 0px 0px 0px @. ( max-width: 960px @. ( max-width: 600px ){}#wp-block-themeisle-blocks-advanced-column-0452d519 {padding-top: 0px;padding-bottom: 0px;padding-left: 20px;padding-right: 20px;margin-top: 0px;margin-bottom: 0px;margin-left: 0px;margin-right: 0px;border-width: 0px 0px 0px 0px;border-style: solid;border-radius: 0px 0px 0px 0px;}#wp-block-themeisle-blocks-advanced-column-0452d519 > .wp-block-themeisle-blocks-advanced-column-overlay {opacity: 0.5;mix-blend-mode: normal;border-radius: 0px 0px 0px @. ( min-width: 960px ){#wp-block-themeisle-blocks-advanced-column-0452d519 {flex-basis: @. ( max-width: 960px @. ( max-width: 600px ){}#wp-block-themeisle-blocks-advanced-column-797b1c96 {padding-top: 0px;padding-bottom: 0px;padding-left: 0px;padding-right: 0px;margin-top: 0px;margin-bottom: 0px;margin-left: 0px;margin-right: 0px;border-width: 0px 0px 0px 0px;border-style: solid;border-radius: 0px 0px 0px 0px;}#wp-block-themeisle-blocks-advanced-column-797b1c96 > .wp-block-themeisle-blocks-advanced-column-overlay {opacity: 0.5;mix-blend-mode: normal;border-radius: 0px 0px 0px @. ( min-width: 960px ){#wp-block-themeisle-blocks-advanced-column-797b1c96 {flex-basis: @. ( max-width: 960px @. ( max-width: 600px ){}.ticss-b78e797c { font-family: Garamond, Baskerville, \"Baskerville Old Face\",\"Hoefler Text\",\"Times New Roman\", serif; } @media (min-width: 960px) { .ticss-b78e797c { margin-bottom: 8px; font-size: 1.5em !important; } } @media (max-width: 959px) { .ticss-b78e797c { margin-bottom: 8px; font-size: 1.125em !important; } }

.ticss-70cf8bdf { font-family: Garamond, Baskerville, \"Baskerville Old Face\",\"Hoefler Text\",\"Times New Roman\", serif; } @media (min-width: 960px) { .ticss-70cf8bdf { margin-bottom: 8px; font-size: 1.5em !important; } } @media (max-width: 959px) { .ticss-70cf8bdf { margin-bottom: 8px; font-size: 1.25em !important; } }

wp-block-themeisle-blocks-advanced-column-e009c2f9 {padding-top:

0px;padding-bottom: 0px;padding-left: 20px;padding-right: 20px;margin-top: 0px;margin-bottom: 0px;margin-left: 0px;margin-right: 0px;border-width: 0px 0px 0px 0px;border-style: solid;border-radius: 0px 0px 0px 0px;}#wp-block-themeisle-blocks-advanced-column-e009c2f9 > .wp-block-themeisle-blocks-advanced-column-overlay {opacity: 0.5;mix-blend-mode: normal;border-radius: 0px 0px 0px @. ( min-width: 960px ){#wp-block-themeisle-blocks-advanced-column-e009c2f9 {flex-basis: @. ( max-width: 960px @. ( max-width: 600px ){}#wp-block-themeisle-blocks-advanced-columns-85507bf8 {padding-top: 0px;padding-bottom: 20px;padding-left: 20px;padding-right: 20px;margin-top: 0px;margin-bottom: 0px;--columns-width: 1170px;justify-content: center;min-height: auto;--background: var(--nv-site-bg);border-width: 0px 0px 0px 0px;border-style: solid;border-color: #ffffff;border-radius: 5px 5px 5px 5px;}#wp-block-themeisle-blocks-advanced-columns-85507bf8 > .wp-block-themeisle-blocks-advanced-columns-overlay {opacity: 0.5;mix-blend-mode: normal;border-radius: 5px 5px 5px @. ( max-width: 960px ){#wp-block-themeisle-blocks-advanced-columns-85507bf8 {padding-top: 0px;padding-bottom: 0px;margin-top: 0px;margin-bottom: @. ( max-width: 600px ){#wp-block-themeisle-blocks-advanced-columns-85507bf8 {padding-top: 0px;padding-bottom: 0px;margin-top: 0px;margin-bottom: 20px;}}#wp-block-themeisle-blocks-advanced-column-2727acc9 {padding-top: 0px;padding-bottom: 0px;padding-left: 20px;padding-right: 20px;margin-top: 0px;margin-bottom: 0px;margin-left: 0px;margin-right: 0px;border-width: 0px 0px 0px 0px;border-style: solid;border-radius: 0px 0px 0px 0px;}#wp-block-themeisle-blocks-advanced-column-2727acc9 > .wp-block-themeisle-blocks-advanced-column-overlay {opacity: 0.5;mix-blend-mode: normal;border-radius: 0px 0px 0px @. ( min-width: 960px ){#wp-block-themeisle-blocks-advanced-column-2727acc9 {flex-basis: @. ( max-width: 960px ){#wp-block-themeisle-blocks-advanced-column-2727acc9 {padding-top: 0px;padding-bottom: @. ( max-width: 600px ){#wp-block-themeisle-blocks-advanced-column-2727acc9 {padding-top: 0px;padding-bottom: 0px;}}.ticss-1b7fa1dd {

}

wp-block-themeisle-blocks-advanced-columns-d4741870 {padding-top:

0px;padding-bottom: 0px;padding-left: 0px;padding-right: 0px;margin-top: 0px;margin-bottom: 0px;--columns-width: 1170px;justify-content: center;min-height: auto;border-width: 0px 0px 0px 0px;border-style: solid;border-radius: 0px 0px 0px 0px;}#wp-block-themeisle-blocks-advanced-columns-d4741870 > .wp-block-themeisle-blocks-advanced-columns-overlay {opacity: 0.5;mix-blend-mode: normal;border-radius: 0px 0px 0px @. ( max-width: 960px ){#wp-block-themeisle-blocks-advanced-columns-d4741870 {padding-top: 0px;padding-bottom: 0px;padding-left: 0px;padding-right: 0px;margin-top: 0px;margin-bottom: @. ( max-width: 600px ){#wp-block-themeisle-blocks-advanced-columns-d4741870 {padding-top: 0px;padding-bottom: 0px;padding-left: 0px;padding-right: 0px;margin-top: 0px;margin-bottom: 0px;}}#wp-block-themeisle-blocks-advanced-column-cc088759 {padding-top: 0px;padding-bottom: 0px;padding-left: 0px;padding-right: 0px;margin-top: 0px;margin-bottom: 0px;margin-left: 0px;margin-right: 0px;border-width: 0px 0px 0px 0px;border-style: solid;border-radius: 0px 0px 0px 0px;}#wp-block-themeisle-blocks-advanced-column-cc088759 > .wp-block-themeisle-blocks-advanced-column-overlay {opacity: 0.5;mix-blend-mode: normal;border-radius: 0px 0px 0px @. ( min-width: 960px ){#wp-block-themeisle-blocks-advanced-column-cc088759 {flex-basis: @. ( max-width: 960px @. ( max-width: 600px @. (max-width: 600px) { .ticss-7d829d0d { display:flex; flex-direction: column; } } @media (max-width: 600px) { .ticss-c14b34b7 { order: 1; } }

@media (max-width: 600px) { .ticss-095bddb3 { order: 5; float: none; margin: 0 auto; } .ticss-095bddb3 figure { margin: .5em 0 2.0em 0 !important; } @. (max-width: 600px) { .ticss-e8b2f048 { order: 2; } @. (max-width: 600px) { .ticss-953e3dde { order: 3; } @.*** (max-width: 600px) { .ticss-e916650e { order: 4; } } @media (max-width: 600px) { .ticss-a25b8f49 { order: 6; } } @media (max-width: 600px) { .ticss-1efcbb60 { order: 7; } }

wp-block-themeisle-blocks-button-group-82f08bc0 {gap:

20px;}#wp-block-themeisle-blocks-button-group-82f08bc0 .wp-block-themeisle-blocks-button .wp-block-button__link {font-style: @.*** (max-width: 600px) { .ticss-172e156c { order: 8; } }

wp-block-themeisle-blocks-advanced-columns-b1292b84 {padding-top:

20px;padding-bottom: 20px;padding-left: 20px;padding-right: 20px;margin-top: 0px;margin-bottom: 0px;--columns-width: 1170px;justify-content: center;min-height: auto;--background:

b4c0cd;border-width: 0px 0px 0px 0px;border-style: solid;border-radius:

0px 0px 0px 0px;}#wp-block-themeisle-blocks-advanced-columns-b1292b84 > .wp-block-themeisle-blocks-advanced-columns-overlay {opacity: 0.5;mix-blend-mode: normal;border-radius: 0px 0px 0px @. ( max-width: 960px ){#wp-block-themeisle-blocks-advanced-columns-b1292b84 {margin-top: 0px;margin-bottom: @. ( max-width: 600px ){#wp-block-themeisle-blocks-advanced-columns-b1292b84 {padding-top: 20px;padding-bottom: 20px;padding-left: 20px;padding-right: 20px;margin-top: 0px;margin-bottom: 0px;}}#wp-block-themeisle-blocks-advanced-column-36054618 {padding-top: 20px;padding-bottom: 20px;padding-left: 20px;padding-right: 20px;margin-top: 0px;margin-bottom: 0px;margin-left: 0px;margin-right: 0px;border-width: 0px 0px 0px 0px;border-style: solid;border-radius: 0px 0px 0px 0px;}#wp-block-themeisle-blocks-advanced-column-36054618 > .wp-block-themeisle-blocks-advanced-column-overlay {opacity: 0.5;mix-blend-mode: normal;border-radius: 0px 0px 0px @. ( min-width: 960px ){#wp-block-themeisle-blocks-advanced-column-36054618 {flex-basis: @. ( max-width: 960px ){#wp-block-themeisle-blocks-advanced-column-36054618 {padding-top: 20px;padding-bottom: 20px;padding-left: 20px;padding-right: @. ( max-width: 600px ){}#wp-block-themeisle-blocks-advanced-column-f31d31bb {padding-top: 20px;padding-bottom: 20px;padding-left: 20px;padding-right: 20px;margin-top: 0px;margin-bottom: 0px;margin-left: 0px;margin-right: 0px;--background: var(--nv-site-bg);border-width: 0px 0px 8px 0px;border-style: solid;border-color: #082f5b;border-radius: 0px 0px 0px 0px;}#wp-block-themeisle-blocks-advanced-column-f31d31bb > .wp-block-themeisle-blocks-advanced-column-overlay {background: var(--nv-site-bg);opacity: 0.5;mix-blend-mode: normal;border-radius: 0px 0px 0px @. ( min-width: 960px ){#wp-block-themeisle-blocks-advanced-column-f31d31bb {flex-basis: @. ( max-width: 960px ){#wp-block-themeisle-blocks-advanced-column-f31d31bb {padding-top: 20px;padding-bottom: 20px;padding-left: 20px;padding-right: @. ( max-width: 600px ){#wp-block-themeisle-blocks-advanced-column-f31d31bb {margin-top: 20px;margin-bottom: 20px;margin-left: 0px;margin-right: 0px;}}.ticss-1a7423ed { background: linear-gradient(100deg, rgba(255,255,255,1.0), 90%, rgba(8, 47, 91, 0.1)) !important; }

wp-block-themeisle-blocks-font-awesome-icons-5e3d5ba0 {--align:

flex-start;--margin: 0px;--padding: 0px;--font-size: 50px;}#wp-block-themeisle-blocks-font-awesome-icons-5e3d5ba0 .wp-block-themeisle-blocks-font-awesome-icons-container {color:

082f5b;}#wp-block-themeisle-blocks-font-awesome-icons-5e3d5ba0

.wp-block-themeisle-blocks-font-awesome-icons-container a {color:

082f5b;}#wp-block-themeisle-blocks-font-awesome-icons-5e3d5ba0

.wp-block-themeisle-blocks-font-awesome-icons-container i {font-size: 50px;}#wp-block-themeisle-blocks-button-group-d312b870 {gap: 20px;}#wp-block-themeisle-blocks-button-group-d312b870 .wp-block-themeisle-blocks-button .wp-block-button__link {font-style: @.*** (max-width: 600px) { .ticss-367a1ea1 { margin-bottom: 20px; } }

wp-block-themeisle-blocks-advanced-column-147077a2 {padding-top:

20px;padding-bottom: 20px;padding-left: 20px;padding-right: 20px;margin-top: 0px;margin-bottom: 0px;margin-left: 0px;margin-right: 0px;--background: #ffffff;border-width: 0px 0px 8px 0px;border-style: solid;border-color: #082f5b;border-radius: 0px 0px 0px 0px;}#wp-block-themeisle-blocks-advanced-column-147077a2 > .wp-block-themeisle-blocks-advanced-column-overlay {opacity: 0.5;mix-blend-mode: normal;border-radius: 0px 0px 0px @. ( min-width: 960px ){#wp-block-themeisle-blocks-advanced-column-147077a2 {flex-basis: @. ( max-width: 960px ){#wp-block-themeisle-blocks-advanced-column-147077a2 {padding-top: 20px;padding-bottom: 20px;padding-left: 20px;padding-right: @.*** ( max-width: 600px ){#wp-block-themeisle-blocks-advanced-column-147077a2 {margin-top: 20px;margin-bottom: 20px;margin-left: 0px;margin-right: 0px;}}.ticss-c11dd96c { background: linear-gradient(100deg, rgba(255,255,255,1.0), 90%, rgba(8, 47, 91, 0.1)) !important; }

wp-block-themeisle-blocks-font-awesome-icons-d7bbc0d0 {--align:

flex-start;--margin: 0px;--padding: 0px;--font-size: 50px;}#wp-block-themeisle-blocks-font-awesome-icons-d7bbc0d0 .wp-block-themeisle-blocks-font-awesome-icons-container {color:

082f5b;}#wp-block-themeisle-blocks-font-awesome-icons-d7bbc0d0

.wp-block-themeisle-blocks-font-awesome-icons-container a {color:

082f5b;}#wp-block-themeisle-blocks-font-awesome-icons-d7bbc0d0

.wp-block-themeisle-blocks-font-awesome-icons-container i {font-size: 50px;}#wp-block-themeisle-blocks-button-group-60e12553 {gap: 20px;}#wp-block-themeisle-blocks-button-group-60e12553 .wp-block-themeisle-blocks-button .wp-block-button__link {font-style: normal;}#wp-block-themeisle-blocks-advanced-columns-c9b511d8 {padding-top: 0px;padding-bottom: 0px;padding-left: 0px;padding-right: 0px;margin-top: 0px;margin-bottom: 0px;min-height: auto;--background: var(--nv-primary-accent);border-width: 0px 0px 0px 0px;border-style: solid;border-radius: 0px 0px 0px 0px;}#wp-block-themeisle-blocks-advanced-columns-c9b511d8 > .wp-block-themeisle-blocks-advanced-columns-overlay {opacity: 0.5;mix-blend-mode: normal;border-radius: 0px 0px 0px @. ( max-width: 960px @. ( max-width: 600px ){}#wp-block-themeisle-blocks-advanced-column-f5ce5dc0 {padding-top: 0px;padding-bottom: 0px;padding-left: 0px;padding-right: 0px;margin-top: 0px;margin-bottom: 0px;margin-left: 0px;margin-right: 0px;border-width: 0px 0px 0px 0px;border-style: solid;border-radius: 0px 0px 0px 0px;}#wp-block-themeisle-blocks-advanced-column-f5ce5dc0 > .wp-block-themeisle-blocks-advanced-column-overlay {opacity: 0.5;mix-blend-mode: normal;border-radius: 0px 0px 0px @. ( min-width: 960px ){#wp-block-themeisle-blocks-advanced-column-f5ce5dc0 {flex-basis: @. ( max-width: 960px ){#wp-block-themeisle-blocks-advanced-column-f5ce5dc0 {padding-top: 0px;padding-bottom: 0px;padding-left: 0px;padding-right: 0px;margin-top: 0px;margin-bottom: 0px;margin-left: 0px;margin-right: @. ( max-width: 600px ){#wp-block-themeisle-blocks-advanced-column-f5ce5dc0 {margin-top: 0px;margin-bottom: 0px;margin-left: 0px;margin-right: 0px;}}#wp-block-themeisle-blocks-advanced-columns-ef7703aa {padding-top: 0px;padding-bottom: 0px;padding-left: 20px;padding-right: 20px;margin-top: 0px;margin-bottom: 0px;min-height: auto;border-width: 0px 0px 0px 0px;border-style: solid;border-radius: 0px 0px 0px 0px;}#wp-block-themeisle-blocks-advanced-columns-ef7703aa > .wp-block-themeisle-blocks-advanced-columns-overlay {opacity: 0;mix-blend-mode: normal;border-radius: 0px 0px 0px @. ( max-width: 960px @. ( max-width: 600px ){}#wp-block-themeisle-blocks-advanced-column-1a8f43ee {padding-top: 0px;padding-bottom: 0px;padding-left: 20px;padding-right: 20px;margin-top: 20px;margin-bottom: 20px;margin-left: 0px;margin-right: 0px;border-width: 0px 0px 0px 0px;border-style: solid;border-radius: 0px 0px 0px 0px;}#wp-block-themeisle-blocks-advanced-column-1a8f43ee > .wp-block-themeisle-blocks-advanced-column-overlay {opacity: 0.5;mix-blend-mode: normal;border-radius: 0px 0px 0px @. ( min-width: 960px ){#wp-block-themeisle-blocks-advanced-column-1a8f43ee {flex-basis: @. ( max-width: 960px @. ( max-width: 600px ){}#wp-block-themeisle-blocks-advanced-column-fac5c550 {padding-top: 0px;padding-bottom: 0px;padding-left: 20px;padding-right: 20px;margin-top: 20px;margin-bottom: 20px;margin-left: 0px;margin-right: 0px;border-width: 0px 0px 0px 0px;border-style: solid;border-radius: 0px 0px 0px 0px;}#wp-block-themeisle-blocks-advanced-column-fac5c550 > .wp-block-themeisle-blocks-advanced-column-overlay {opacity: 0.5;mix-blend-mode: normal;border-radius: 0px 0px 0px @. ( min-width: 960px ){#wp-block-themeisle-blocks-advanced-column-fac5c550 {flex-basis: @. ( max-width: 960px @.*** ( max-width: 600px ){}#wp-block-themeisle-blocks-advanced-columns-1cda6bc7 {padding-top: 20px;padding-bottom: 20px;padding-left: 20px;padding-right: 20px;margin-top: 0px;margin-bottom: 0px;--columns-width: 900px;justify-content: center;min-height: auto;--background:

b4c0cd;border-width: 0px 0px 0px 0px;border-style: solid;border-radius:

0px 0px 0px 0px;}#wp-block-themeisle-blocks-advanced-columns-1cda6bc7 > .wp-block-themeisle-blocks-advanced-columns-overlay {opacity: 0;mix-blend-mode: normal;border-radius: 0px 0px 0px @. ( max-width: 960px ){#wp-block-themeisle-blocks-advanced-columns-1cda6bc7 {margin-top: 0px;margin-bottom: @. ( max-width: 600px ){#wp-block-themeisle-blocks-advanced-columns-1cda6bc7 {margin-top: 0px;margin-bottom: 0px;}}#wp-block-themeisle-blocks-advanced-column-42153777 {padding-top: 20px;padding-bottom: 20px;padding-left: 20px;padding-right: 20px;margin-top: 0px;margin-bottom: 0px;margin-left: 0px;margin-right: 0px;border-width: 0px 0px 0px 0px;border-style: solid;border-radius: 0px 0px 0px 0px;}#wp-block-themeisle-blocks-advanced-column-42153777 > .wp-block-themeisle-blocks-advanced-column-overlay {opacity: 0.5;mix-blend-mode: normal;border-radius: 0px 0px 0px @. ( min-width: 960px ){#wp-block-themeisle-blocks-advanced-column-42153777 {flex-basis: @. ( max-width: 960px @. ( max-width: 600px ){}#wp-block-themeisle-blocks-advanced-columns-5efae7ff {min-height: auto;}#wp-block-themeisle-blocks-advanced-columns-5efae7ff > .wp-block-themeisle-blocks-advanced-columns-overlay {opacity: 0.5;mix-blend-mode: @. ( max-width: 960px @. ( max-width: 600px ){}#wp-block-themeisle-blocks-advanced-column-38588e3f {padding-top: 0px;padding-bottom: 0px;padding-left: 0px;padding-right: 0px;margin-top: 0px;margin-bottom: 0px;margin-left: 0px;margin-right: 0px;border-width: 0px 0px 0px 0px;border-style: solid;border-radius: 0px 0px 0px 0px;}#wp-block-themeisle-blocks-advanced-column-38588e3f > .wp-block-themeisle-blocks-advanced-column-overlay {opacity: 0.5;mix-blend-mode: normal;border-radius: 0px 0px 0px @. ( min-width: 960px ){#wp-block-themeisle-blocks-advanced-column-38588e3f {flex-basis: @. ( max-width: 960px @. ( max-width: 600px ){}#wp-block-themeisle-blocks-advanced-columns-24e708bb {padding-top: 0px;padding-bottom: 0px;padding-left: 0px;padding-right: 0px;margin-top: 0px;margin-bottom: 0px;min-height: auto;border-width: 0px 0px 0px 0px;border-style: solid;border-radius: 0px 0px 0px 0px;}#wp-block-themeisle-blocks-advanced-columns-24e708bb > .wp-block-themeisle-blocks-advanced-columns-overlay {opacity: 0.5;mix-blend-mode: normal;border-radius: 0px 0px 0px @. ( max-width: 960px @. ( max-width: 600px ){}#wp-block-themeisle-blocks-advanced-column-040ee68a {padding-top: 0px;padding-bottom: 0px;padding-left: 0px;padding-right: 0px;margin-top: 20px;margin-bottom: 0px;margin-left: 0px;margin-right: 0px;border-width: 0px 0px 0px 0px;border-style: solid;border-radius: 0px 0px 0px 0px;}#wp-block-themeisle-blocks-advanced-column-040ee68a > .wp-block-themeisle-blocks-advanced-column-overlay {opacity: 0.5;mix-blend-mode: normal;border-radius: 0px 0px 0px @. ( min-width: 960px ){#wp-block-themeisle-blocks-advanced-column-040ee68a {flex-basis: @. ( max-width: 960px @.*** ( max-width: 600px ){}#wp-block-themeisle-blocks-button-group-412fc526 {gap: 20px;}#wp-block-themeisle-blocks-button-group-412fc526 .wp-block-themeisle-blocks-button .wp-block-button__link {font-style: normal;}.ticss-7a0f0b3d img { padding-top: 1em; padding-bottom: 1em; box-shadow: none; }#wp-block-themeisle-blocks-advanced-columns-c106fc7c {padding-top: 20px;padding-bottom: 20px;padding-left: 20px;padding-right: 20px;margin-top: 0px;margin-bottom: 0px;--columns-width: 1170px;justify-content: center;min-height: auto;--background:

082f5b;border-width: 0px 0px 0px 0px;border-style: solid;border-radius:

0px 0px 0px 0px;}#wp-block-themeisle-blocks-advanced-columns-c106fc7c > .wp-block-themeisle-blocks-advanced-columns-overlay {opacity: 0.5;mix-blend-mode: normal;border-radius: 0px 0px 0px @. ( max-width: 960px ){#wp-block-themeisle-blocks-advanced-columns-c106fc7c {margin-top: 0px;margin-bottom: @. ( max-width: 600px ){#wp-block-themeisle-blocks-advanced-columns-c106fc7c {margin-top: 0px;margin-bottom: 0px;}}#wp-block-themeisle-blocks-advanced-column-b693b3b2 {padding-top: 20px;padding-bottom: 20px;padding-left: 20px;padding-right: 20px;margin-top: 0px;margin-bottom: 0px;margin-left: 0px;margin-right: 0px;border-width: 0px 0px 0px 0px;border-style: solid;border-radius: 0px 0px 0px 0px;}#wp-block-themeisle-blocks-advanced-column-b693b3b2 > .wp-block-themeisle-blocks-advanced-column-overlay {opacity: 0.5;mix-blend-mode: normal;border-radius: 0px 0px 0px @. ( min-width: 960px ){#wp-block-themeisle-blocks-advanced-column-b693b3b2 {flex-basis: @. ( max-width: 960px @. ( max-width: 600px ){}#wp-block-themeisle-blocks-advanced-columns-315cbde2 {padding-top: 0px;padding-bottom: 0px;padding-left: 0px;padding-right: 0px;margin-top: 0px;margin-bottom: 0px;--columns-width: 900px;justify-content: center;min-height: auto;border-width: 0px 0px 0px 0px;border-style: solid;border-radius: 0px 0px 0px 0px;}#wp-block-themeisle-blocks-advanced-columns-315cbde2 > .wp-block-themeisle-blocks-advanced-columns-overlay {opacity: 0.5;mix-blend-mode: normal;border-radius: 0px 0px 0px @. ( max-width: 960px ){#wp-block-themeisle-blocks-advanced-columns-315cbde2 {padding-top: 0px;padding-bottom: 0px;padding-left: 0px;padding-right: 0px;margin-top: 0px;margin-bottom: @. ( max-width: 600px ){#wp-block-themeisle-blocks-advanced-columns-315cbde2 {padding-top: 0px;padding-bottom: 0px;padding-left: 0px;padding-right: 0px;margin-top: 0px;margin-bottom: 0px;}}#wp-block-themeisle-blocks-advanced-column-321f85e5 {padding-top: 0px;padding-bottom: 0px;padding-left: 0px;padding-right: 0px;margin-top: 0px;margin-bottom: 0px;margin-left: 0px;margin-right: 0px;border-width: 0px 0px 0px 0px;border-style: solid;border-radius: 0px 0px 0px 0px;}#wp-block-themeisle-blocks-advanced-column-321f85e5 > .wp-block-themeisle-blocks-advanced-column-overlay {opacity: 0.5;mix-blend-mode: normal;border-radius: 0px 0px 0px @. ( min-width: 960px ){#wp-block-themeisle-blocks-advanced-column-321f85e5 {flex-basis: @. ( max-width: 960px @. ( max-width: 600px ){}#wp-block-themeisle-blocks-button-group-acefbae7 {gap: 20px;}#wp-block-themeisle-blocks-button-group-acefbae7 .wp-block-themeisle-blocks-button .wp-block-buttonlink {font-style: normal;}#wp-block-themeisle-blocks-button-28b607ce .wp-block-buttonlink {color: var(--nv-primary-accent);background: var(--nv-site-bg);border-color: var(--nv-site-bg);border-style: solid;}#wp-block-themeisle-blocks-button-28b607ce .wp-block-button__link:hover {color: var(--nv-site-bg);background: var(--nv-primary-accent);border-color: var(--nv-site-bg);}.ticss-9d2fe597 img { padding-top: 1em; padding-bottom: 1em; box-shadow: none; }#wp-block-themeisle-blocks-advanced-columns-c673aa3a {padding-top: 20px;padding-bottom: 20px;padding-left: 20px;padding-right: 20px;margin-top: 0px;margin-bottom: 0px;--columns-width: 1170px;justify-content: center;min-height: auto;--background: var(--nv-dark-bg);border-width: 0px 0px 0px 0px;border-style: solid;border-radius: 0px 0px 0px 0px;}#wp-block-themeisle-blocks-advanced-columns-c673aa3a > .wp-block-themeisle-blocks-advanced-columns-overlay {opacity: 0.5;mix-blend-mode: normal;border-radius: 0px 0px 0px @. ( max-width: 960px ){#wp-block-themeisle-blocks-advanced-columns-c673aa3a {margin-top: 0px;margin-bottom: @. ( max-width: 600px ){#wp-block-themeisle-blocks-advanced-columns-c673aa3a {margin-top: 0px;margin-bottom: 0px;}}#wp-block-themeisle-blocks-advanced-column-53f52590 {padding-top: 20px;padding-bottom: 20px;padding-left: 20px;padding-right: 20px;margin-top: 20px;margin-bottom: 20px;margin-left: 0px;margin-right: 0px;--background: var(--nv-site-bg);border-width: 0px 0px 8px 0px;border-style: solid;border-color: #deac7e;border-radius: 0px 0px 0px 0px;}#wp-block-themeisle-blocks-advanced-column-53f52590 > .wp-block-themeisle-blocks-advanced-column-overlay {opacity: 0.1;mix-blend-mode: normal;border-radius: 0px 0px 0px @. ( min-width: 960px ){#wp-block-themeisle-blocks-advanced-column-53f52590 {flex-basis: @. ( max-width: 960px ){#wp-block-themeisle-blocks-advanced-column-53f52590 {padding-top: 20px;padding-bottom: 20px;padding-left: 20px;padding-right: @.*** ( max-width: 600px ){#wp-block-themeisle-blocks-advanced-column-53f52590 {padding-top: 20px;padding-bottom: 20px;padding-left: 20px;padding-right: 20px;margin-top: 20px;margin-bottom: 20px;}}.ticss-dd86225f { background: linear-gradient(100deg, rgba(255,255,255,1.0), 90%, rgba(8, 47, 91, 0.1)) !important; }#wp-block-themeisle-blocks-font-awesome-icons-483b1a68 {--align: flex-start;--margin: 0px;--padding: 0px;--font-size: 50px;}#wp-block-themeisle-blocks-font-awesome-icons-483b1a68 .wp-block-themeisle-blocks-font-awesome-icons-container {color:

deac7e;}#wp-block-themeisle-blocks-font-awesome-icons-483b1a68

.wp-block-themeisle-blocks-font-awesome-icons-container a {color:

deac7e;}#wp-block-themeisle-blocks-font-awesome-icons-483b1a68

.wp-block-themeisle-blocks-font-awesome-icons-container i {font-size: 50px;}.ticss-05b4382a {

}

wp-block-themeisle-blocks-button-group-711b1ce2 {gap:

20px;}#wp-block-themeisle-blocks-button-group-711b1ce2 .wp-block-themeisle-blocks-button .wp-block-button__link {font-style: normal;}.ticss-a5f3988a { margin-top: auto; }

wp-block-themeisle-blocks-button-929eb8e2 .wp-block-button__link {color:

var(--nv-site-bg);background: var(--nv-c-1);border-color: var(--nv-c-1);border-style: solid;}#wp-block-themeisle-blocks-button-929eb8e2 .wp-block-button__link:hover {color: var(--nv-c-1);background: var(--nv-site-bg);border-color: var(--nv-c-1);}#wp-block-themeisle-blocks-advanced-column-c87baf5a {padding-top: 20px;padding-bottom: 20px;padding-left: 20px;padding-right: 20px;margin-top: 20px;margin-bottom: 20px;margin-left: 0px;margin-right: 0px;--background: var(--nv-site-bg);border-width: 0px 0px 8px 0px;border-style: solid;border-color: #deac7e;border-radius: 0px 0px 0px 0px;}#wp-block-themeisle-blocks-advanced-column-c87baf5a > .wp-block-themeisle-blocks-advanced-column-overlay {opacity: 0.5;mix-blend-mode: normal;border-radius: 0px 0px 0px @. ( min-width: 960px ){#wp-block-themeisle-blocks-advanced-column-c87baf5a {flex-basis: @. ( max-width: 960px ){#wp-block-themeisle-blocks-advanced-column-c87baf5a {padding-top: 20px;padding-bottom: 20px;padding-left: 20px;padding-right: @.*** ( max-width: 600px ){#wp-block-themeisle-blocks-advanced-column-c87baf5a {margin-top: 20px;margin-bottom: 20px;}}.ticss-0f6c3524 { background: linear-gradient(100deg, rgba(255,255,255,1.0), 90%, rgba(8, 47, 91, 0.1)) !important; }#wp-block-themeisle-blocks-font-awesome-icons-08fce3c0 {--align: flex-start;--margin: 0px;--padding: 0px;--font-size: 50px;}#wp-block-themeisle-blocks-font-awesome-icons-08fce3c0 .wp-block-themeisle-blocks-font-awesome-icons-container {color:

deac7e;}#wp-block-themeisle-blocks-font-awesome-icons-08fce3c0

.wp-block-themeisle-blocks-font-awesome-icons-container a {color:

deac7e;}#wp-block-themeisle-blocks-font-awesome-icons-08fce3c0

.wp-block-themeisle-blocks-font-awesome-icons-container i {font-size: 50px;}.ticss-062a4cb7 {

}

wp-block-themeisle-blocks-button-group-4f38ea58 {gap:

20px;}#wp-block-themeisle-blocks-button-group-4f38ea58 .wp-block-themeisle-blocks-button .wp-block-button__link {font-style: normal;}.ticss-75fd7886 { margin-top: auto; }

wp-block-themeisle-blocks-button-e03b3e98 .wp-block-button__link {color:

var(--nv-site-bg);background: var(--nv-c-1);border-color: var(--nv-c-1);border-style: solid;}#wp-block-themeisle-blocks-button-e03b3e98 .wp-block-button__link:hover {color: var(--nv-c-1);background: var(--nv-site-bg);border-color: var(--nv-c-1);}#wp-block-themeisle-blocks-advanced-column-1e07e70e {padding-top: 20px;padding-bottom: 20px;padding-left: 20px;padding-right: 20px;margin-top: 20px;margin-bottom: 20px;margin-left: 0px;margin-right: 0px;--background: var(--nv-site-bg);border-width: 0px 0px 8px 0px;border-style: solid;border-color: #deac7e;border-radius: 0px 0px 0px 0px;}#wp-block-themeisle-blocks-advanced-column-1e07e70e > .wp-block-themeisle-blocks-advanced-column-overlay {opacity: 0.5;mix-blend-mode: normal;border-radius: 0px 0px 0px @. ( min-width: 960px ){#wp-block-themeisle-blocks-advanced-column-1e07e70e {flex-basis: @. ( max-width: 960px ){#wp-block-themeisle-blocks-advanced-column-1e07e70e {padding-top: 20px;padding-bottom: 20px;padding-left: 20px;padding-right: @.*** ( max-width: 600px ){#wp-block-themeisle-blocks-advanced-column-1e07e70e {padding-top: 20px;padding-bottom: 20px;padding-left: 20px;padding-right: 20px;margin-top: 20px;margin-bottom: 20px;}}.ticss-38689ae9 { background: linear-gradient(100deg, rgba(255,255,255,1.0), 90%, rgba(8, 47, 91, 0.1)) !important; }#wp-block-themeisle-blocks-font-awesome-icons-64f4c6fd {--align: flex-start;--margin: 0px;--padding: 0px;--font-size: 50px;}#wp-block-themeisle-blocks-font-awesome-icons-64f4c6fd .wp-block-themeisle-blocks-font-awesome-icons-container {color:

deac7e;}#wp-block-themeisle-blocks-font-awesome-icons-64f4c6fd

.wp-block-themeisle-blocks-font-awesome-icons-container a {color:

deac7e;}#wp-block-themeisle-blocks-font-awesome-icons-64f4c6fd

.wp-block-themeisle-blocks-font-awesome-icons-container i {font-size: 50px;}.ticss-15da2b49 {

}

wp-block-themeisle-blocks-button-group-ab6b8ee8 {gap:

20px;}#wp-block-themeisle-blocks-button-group-ab6b8ee8 .wp-block-themeisle-blocks-button .wp-block-button__link {font-style: normal;}.ticss-e25da53e { margin-top: auto; }

wp-block-themeisle-blocks-button-02eea35c .wp-block-button__link {color:

var(--nv-site-bg);background: var(--nv-c-1);border-color: var(--nv-c-1);border-style: solid;}#wp-block-themeisle-blocks-button-02eea35c .wp-block-button__link:hover {color: var(--nv-c-1);background: var(--nv-site-bg);border-color: var(--nv-c-1);}

On Tue, Dec 27, 2022 at 4:33 PM Hardeep Asrani @.***> wrote:

@wags1128 https://github.com/wags1128 I did try it some days back but the the only issue here is that I really have no way to test how it works given I'm not really able to reproduce this issue. Would it be possible for you to share an instance where we can test it?

— Reply to this email directly, view it on GitHub https://github.com/Codeinwp/otter-blocks/issues/1087#issuecomment-1366191433, or unsubscribe https://github.com/notifications/unsubscribe-auth/AB5BF6NPA4U7OEGMQVSUPY3WPNOCHANCNFSM55UG3FCA . You are receiving this because you were mentioned.Message ID: @.***>