themeum / qubely Goto Github PK

View Code? Open in Web Editor NEW

82.0 12.0 35.0 8.33 MB

Qubely Blocks – Full-fledged Gutenberg Toolkit

License: GNU General Public License v3.0

CSS 3.88% JavaScript 79.14% PHP 7.76% SCSS 9.22%

wordpress gutenberg wordpress-plugin gutenberg-blocks gutenberg-plugin

qubely's People

Contributors

Stargazers

Watchers

qubely's Issues

Can't change color of devider dot

The dot always remains black:

Gutenberg default paragraph blocks spacing issue when child of qubely row block

There appears to be a style issue in the editor regarding the default paragraph blocks when they are children of qubely row block. I first noticed this issue sometime in early august and have been hot patching my sites to mitigate the issue, but this is a less than ideal approach. Since it's been an issue for almost 2 months now I thought I would shine a spotlight on it.

I would classify this as a minor issue, but I'm sure it's frustrating a lot of users of the Qubely plugin. The offending css in particular is this:

.editor-styles-wrapper .qubely-row *>[data-type="qubely/column"] [data-block] { margin-top:0; margin-bottom:0; }

This overrides the default paragraph block's margins that are defined as follows:

.editor-styles-wrapper p { font-size: inherit; line-height: inherit; margin-top: 28px; margin-bottom: 28px; }
Here is what the paragraphs look like when the parent row / column block has focus / has been selected:

As soon as you click out or select a different row block on the same tier as the offending row, they now look like this:

Row blocks are by far the most used component of Qubely for me and this wreaks havoc when users go in to edit content as their expectation is that what they see in the gutenberg editor should closely align with what they see on the front end.

Global Colors missing in text-color option?!

Where is it?

Update Docs for Row Container Feature

Hello,
When I imported a layout and configured a row block, I see the option to change the container sizing:

However, I was extremely confused when I added an additional row block and I wasn't able to change that setting.

After digging into the code, I saw this:

qubely/assets/reactjs/src/blocks/row/Edit.js

Line 83 in d365dee

if (align === 'full' && rowContainerWidth === 'boxed') {

I added add_theme_support('align-wide'); to functions.php, and voila, newly created row blocks will have the full width/boxed setting.

Icons should have fixed width with class "fa-fw"

otherwise this happens:

see the middle icon. has different width. therefore circle looks odd. simply add class/style of "fa-fw":
https://fontawesome.com/how-to-use/on-the-web/styling/fixed-width-icons

Page attributes

Qubely should add "Qubely Template" in ""Page Attributes"". It is useful to select the template when creating new page. Site title and tagline and footer lines should be suppressed when selecting Qubely template.

CSS not loading on Front End

Hi,

First. Thank you for your amazing work and talent.

We are impressed by Qubely and all the capabilities that bring to Wordpress, however we run into a problem we seem can't solve. In the back end Qubely looks great as it should be, however on the front end it does not load the CSS.

Neither:
qubely.bundle.min.css
ont-awesome.min.css

This is the page as example with the issue

Example:
Back end Ok

Front end with problem:

We have tried Qubely on two different Qordpress sites with the same theme and it works flawlessly. But on this one, we don't know where would be the problem.

We have tried deactivating all the plugins but the problem persists.

Thank you for your time and help solving this problem.

Can't install Pro version 1.2.3 on PHP 7.4.1

I just receive this error message.

Abort class-pclzip.php : Missing zlib extensions

It works fine when I change PHP version to 7.3.5.

Fresh WordPress 5.5.1 installation on a Nginx server, no plugins installed, default theme activated (Twenty Twenty).

Error in Tab Block

If I download readymade Tab block through "Import Layout" - "Bundles" - "Corporate", that is not displaying correctly. Please find attachments.

Free version: “add block” panel closes unexpectedly while hovering over some block icons

This happens while hovering over the following block icons:

Accordion,
Button group,
Icon list.

Fresh WordPress 5.5.1 installation on a Nginx server, no plugins installed, default theme activated (Twenty Twenty).

align-wrap-wide & align-wrap-full classes?!

Is there any reason why you do not use the default gutenberg options for having the width of a block wide or full-width?! Can you implement please?

Google Maps does not work with API Key

when inserting api key, i can change styles. but address search does not work any longer. map position does not change. get js error:
react-dom.min.js?ver=16.8.4:117 TypeError: Cannot read property 'Autocomplete' of undefined

saving and reloading the page and the block shows: This block has encountered an error and cannot be previewed.

frontend view does not work either

Incomplete 'isQubelyBlock' causes CSS to not be saved

Hello!

Inside the file 'assets/reactjs/src/helpers/ParseCss.js' there is a function called 'isQubelyBlock' which checks if the current blocks inside the Gutenberg DOM are from Qubely or not.

The function checks the up to 3 levels of nesting, but that is not necessarily "complete" always. For example, I have a few pages where the Qubely blocks are down at the 4th level of nesting and thus this function always returns that there are no Qubely blocks.

A better way of checking would be recursively since that would ensure that all the levels are checked.

Something like this (not tested yet):

function isQubelyBlock(blocks) {
    let isQubely = false;

    blocks.forEach(block => {
      if (block.name.indexOf('qubely/') != -1) {
            isQubely = true;
        }

        if ( !isQubely && block.innerBlocks && (block.innerBlocks).length > 0) {
            isQubely = isQubelyBlock(block.innerBlocks);
        }
    });

    return isQubely;
}

Vertical Tabs not working

Vertical tabs stays active to only one tab, other tabs have content and we're unable to access them because it stays active on the topmost tab. please see https://www.singaporemathcamps.com/testing-page/

Info Boxes | SRCSET Errors

Hi,

I am witnessing weird behaviour with the Info Boxes block. When I run my site via W3 validator, the Info Boxes returns a series of errors

Error: Bad value for attribute srcset on element [img](https://html.spec.whatwg.org/multipage/#the-img-element): Must contain one or more image candidate strings.

This is a problem when I use local media library images - screenshot below.

Any way I could avoid these validation code errors?

Kind regards,

Missing CSS when importing reusable Qubely block

Hello,

I'm considering pairing Qubely with Oxygen Builder but I run into an issue since the beginning of my testing of Qubely Pro...

This is what a reusable Qubely block looks like when imported in a Gutenberg page:

This is what a reusable Qubely block looks like when imported with a shortcode inside Oxygen Builder:

I have this code inside a Code Snippet to import my reusable gutenberg block (that use Qubely design layout):

add_shortcode('wp_oxy_reusable_block', 'my_reusable_block_sc');
/**
 * Add a shortcode to allow resuable blocks, that are created in WP editor, to be inserted in Oxygen templates using their IDs
 *
 * Sample usage: [wp_oxy_reusable_block id='2543']
 */
function my_reusable_block_sc( $atts ) {
	
	$attributes = shortcode_atts(
		array(
			'id' => null
		), $atts );
  
	$output = do_blocks( get_the_content('', '', get_post($attributes['id']) ) );
  
  	return $output;

}

And then in Oxygen Builder I use the shortcode [wp_oxy_reusable_block id='66'] with 66 as the ID of my reusable block.

How can I import CSS too? What code I need to use or add inside my code snippet?

Thanks.

Qubely Image - Blurb - No url option

In the Qubely image block there is an option for a URL in the "Simple" layout, but not int he "Blurb" layout. It would be handy to have this available in the "Blurb" layout as well for situations where you want to use an image as a navigation element and need the text to provide context.

Styles do not apply to reusable blocks

When converting a Qubely block, for example tabs, to a reusable block, it loses styles and they don't carry over to other placements of the reusable block. This occurs with both header and filesystem style settings.

Timeline not properly working in translated page (DE->EN); with workaround

I am using the free version of Qubely 1.6.9 and unfortunately my Qubely Timeline block was not properly showing in the English translation of my German page. The styling was corrupt. The page was translated with WPML.

My workaround

I solved the problem by making a diff between the source code of the German and the English page. This has shown me that in the translated page the following two entries were missing:

<link rel='stylesheet' id='qubely-bundle-css' href='MY_URL/wp-content/plugins/qubely/assets/css/qubely.bundle.min.css?ver=1.6.9' media='all' />
<style type="text/css">:root {--qubely-color-1:#696CFF;--qubely-color-2:#04C3EC;--qubely-color-3:#363636;...VERY_LONG_STYLE_DEFINITION...</style>

After copying the content of the German block, tranlating the texts and entering these two elements in the beginning of the translation field for English (in Text mode) the page works nicely.

I just wanted to let you know, because maybe this helps in debugging or helps other users as a workaround. If I may improve the issue description please let me know.

wp-block-qubely-image uses full size images

i've noticed that you can choose between S M L and Custom in Image Block Settings. But qubely always takes the same image file but just sets pixel dimensions on it. would love to see the real image sizes from "image_size_names_choose" wp filter. in this filter i find all images defined by "add_image_size" function. so i can also choose for instance a thumbnail image which has real size of 150x150 pixel. this would save a lot of traffic…

More (custom) Breakpoints?

at the moment one can choose between three breakpoints in block settings. but i really need more. please provide a filter for breakpoint threshold and for more breakpoints. something like this:

$grid-breakpoints = array (
        "xs" => array("icon"=>"mobile",threshold=>0),
        "sm" => array("icon"=>"mobile2",threshold=>"360px"),
        "md" => array("icon"=>"tablet",threshold=>"576px"),
        "lg" => array("icon"=>"tablet2",threshold=>"768px"),
        "xl" => array("icon"=>"desktop",threshold=>"992px"),
        "xxl" => array("icon"=>"desktop2",threshold=>"1260px"),
);

vertical tabs not found

in front end not found

Conflict with OceanWP

Suggestion: You're using a rather default CSS value for your qubely-sections:

<div class="wp-block-qubely-row alignfull qubely-section qubely-block-1ab7cd">
</div>

Other themes are also using the .alignfull class. I would suggest either prefixing with qubely, or doing a forced value on margin:

.qubely-section.alignfull {
    margin: 0;
}

Theme that causes such an issue: OceanWP, but you'll find it with more. Use unique classes to avoid collision.

Spelling Mistake

A spelling mistake in Video Popup Block. Please find attachment.

Team Carousel: missing alignment for images

in this configuration i miss the center alignment for user images. therefore it is left aligned but text is centered:

Bootstrap4 Support?

At the moment you have an interesting grid layout which uses "calc" in CSS. but i rather like to include my bootstrap css/scss styles as a grid layout. Would be nice to have some kind of addon for qubely. Then once activated please unset gutter width option.

Infobox Percentage Width does not work

Screencast:
https://www.dropbox.com/s/hu4hdbwxguaa07q/qubely-percentage.mov?dl=0

wp-block-qubely-pricelist wrong color in media digit

Qubely Backend (good):

Qubely Frontend:

Media Digit Text-Color is wrong. gets the color from discount price color instead of white!

Filter to use add_theme_support( 'editor-color-palette',array())

I defined my own theme colors with

add_theme_support( 'editor-color-palette', array(
        array(
            'name'	=> __( 'Violet', 'bootstrap' ),
            'slug'	=> 'primary',
            'color'	=> '#AB1957',
        )
);

Would be nice if you load this as default for your color palettes! i know there a global settings for this but i rather would prefer to skip this step when you simple load the default wp filter.

also would be nice to use the first item from the array as default color for all blocks. and at the moment default color seems to be blue which i have to change every time which is annoying!

wrong date format in qubely-postgrid-wrapper frontend

wp setting:

qubely backend:

qubely frontend:

Post Grid issue

Regarding "Post Grid" block, if I choose 3 posts to display, it is working well. But no option to move further. (Next / Previous).

It is necessary to make a user to see next posts and previous posts.
"Single post page layout" also a good choice in addition to "Qubely Canvas"

Qubely image blurb freezes

While changing the image text from qubely image blurb everything freezes

[Box wrapper] Any box wrapper inside inherits background image

I've tried to create a box wrapper with the image as a background, and then a second inside with semitransparent color as the background. Unfortunately, each descendant box wrapper inherits a background image, so "overlayed image backgrounds" cant be achieved.

Expected result:

Font Awesome Pro (Kits) not supported

Its nice you integrated FA5. But i am a Pro user and like to use light and duotone styles. So i dequeued your FA5 styles and enqueued my pro version as a kit which is a javascript lib. it works with SVGs. Would be nice to have an option for that in your plugin to also pick from the other FA5 styles. And one more issue with FA Pro Kits: you can not use :before selector. therefore icons in your list block won't be displayed in frontend!

Timeline Date needs media query for position attribute

problem with spacing value of 0 on small devices:

solution:

.qubely-block-timeline .qubely-timeline-date-container {
        position: static;
        @media screen and (min-width: 768px) {
            position: absolute;
        }
    }

accept position:absolute when reaching breakpoint

[Info box] Crashes when trying to change media from icon to image

Block is completely unusable, and no options are available in the sidebar after switching media from icon to image or number. The only option then is to remove block from the layout and reapply it again.

Console message on error:

Filter to unset blocks

I don't want my client to pick all available blocks. Thats to much. Please provide a filter to unset certain blocks from your collection.

File system not work?

What is the difference between a css saving system, one is inline style and the other is a static .css file?

However, nothing changes when you choose this option - styles are always inline

Feature Request: Responsive Height with padding-top

Can we have it please like bootstrap:
https://www.w3schools.com/bootstrap4/tryit.asp?filename=trybs_util_embeds

At the moment you have to define a fixed height. Its always the same height on small devices and large screens. For instance in Video Popup. Instead of selecting the height, more options to choose from aspect ratios would be better: square, 4:3, 16:9, 21:9 – then it would be truly responsive

Row Block

Dear Team, in ROW block there are options for background. If I choose background image, it is better to add an option to enter URL of background image. Sorry for my annoying repeated requests to add the features.

`columns` block parsing in 1.4.x breaks _qubely_css and all blocks for a page

After debugging this fully, I found this is an error with Qubely 1.4.x. Please note, the 1.4.1 release did not resolve the concern.

Here's an example template for you to test with:

<!-- wp:uagb/columns {"block_id":"d74adb4a-a322-40f4-b257-47de788361ea","classMigrate":true,"columns":1,"topPadding":150,"bottomPadding":150,"leftPadding":0,"rightPadding":0,"topPaddingMobile":90,"bottomPaddingMobile":90,"backgroundType":"image","backgroundImage":{"id":10731,"title":"Photo by Karina","filename":"weucg_slrsy-scaled.jpg","url":"https://staging-templates.redux.io/wp-content/uploads/2020/05/weucg_slrsy-scaled.jpg","link":"https://staging-templates.redux.io/starterblocks/night-club/the-club/photo-by-karina/","alt":"people doing party in dark room","author":"4","description":"","caption":"","name":"photo-by-karina","status":"inherit","uploadedTo":10728,"date":"2020-05-04T04:44:13.000Z","modified":"2020-05-04T04:44:13.000Z","menuOrder":0,"mime":"image/jpeg","type":"image","subtype":"jpeg","icon":"https://staging-templates.redux.io/wp-includes/images/media/default.png","dateFormatted":"May 4, 2020","nonces":{"update":"89950c2005","delete":"4b59e4abb6","edit":"7bfb853fdc"},"editLink":"https://staging-templates.redux.io/wp-admin/post.php?post=10731\u0026action=edit","meta":false,"authorName":"vastarpara","uploadedToLink":"https://staging-templates.redux.io/wp-admin/post.php?post=10728\u0026action=edit","uploadedToTitle":"The Club","filesizeInBytes":363669,"filesizeHumanReadable":"355 KB","context":"","originalImageURL":"https://staging-templates.redux.io/wp-content/uploads/2020/05/weucg_slrsy.jpg","originalImageName":"weucg_slrsy.jpg","height":1920,"width":2560,"orientation":"landscape","sizes":{"thumbnail":{"height":150,"width":150,"url":"https://staging-templates.redux.io/wp-content/uploads/2020/05/weucg_slrsy-150x150.jpg","orientation":"landscape"},"medium":{"height":225,"width":300,"url":"https://staging-templates.redux.io/wp-content/uploads/2020/05/weucg_slrsy-300x225.jpg","orientation":"landscape"},"large":{"height":768,"width":1024,"url":"https://staging-templates.redux.io/wp-content/uploads/2020/05/weucg_slrsy-1024x768.jpg","orientation":"landscape"},"full":{"url":"https://staging-templates.redux.io/wp-content/uploads/2020/05/weucg_slrsy-scaled.jpg","height":1920,"width":2560,"orientation":"landscape"}},"compat":{"item":"","meta":""},"acf_errors":false},"backgroundOpacity":45,"backgroundImageColor":"#000000","kioblocks":[]} -->
<section class="wp-block-uagb-columns uagb-columns__wrap uagb-columns__background-image uagb-columns__stack-mobile uagb-columns__valign-undefined uagb-columns__gap-10 alignundefined uagb-block-d74adb4a-a322-40f4-b257-47de788361ea"><div class="uagb-columns__overlay"></div><div class="uagb-columns__inner-wrap uagb-columns__columns-1"><!-- wp:uagb/column {"block_id":"dafd68db-4996-4cd5-8d2c-f0a6cc08306b","classMigrate":true,"kioblocks":[]} -->
<div class="wp-block-uagb-column uagb-column__wrap uagb-column__background-undefined uagb-block-dafd68db-4996-4cd5-8d2c-f0a6cc08306b"><div class="uagb-column__overlay"></div><div class="uagb-column__inner-wrap"><!-- wp:qubely/heading {"uniqueId":"8f029f","alignment":{"md":"center"},"typography":{"openTypography":1,"size":{"md":"95","unit":"px","xs":"47","sm":"66"},"family":"Poppins","type":"sans-serif","weight":900,"height":{"unit":"px","md":"133","xs":"57"}},"subHeading":true,"subHeadingTypography":{"openTypography":1,"size":{"md":"20","unit":"px"},"weight":700,"family":"Poppins","type":"sans-serif","height":{"unit":"px","md":"30"},"spacing":{"unit":"px","md":"2"}},"subHeadingColor":"#46b1fd","subHeadingSpacing":{"md":"10","unit":"px"},"textColor":"var(\u002d\u002dqubely-color-5)"} -->
<div class="wp-block-qubely-heading qubely-block-8f029f"><div class="qubely-block-heading  "><div class="qubely-heading-container"><h2 class="qubely-heading-selector">ROOFTOP BAR</h2></div><h3 class="qubely-sub-heading-selector"><strong><strong>COCKTAILS WITH A VIEW</strong></strong></h3></div></div>
<!-- /wp:qubely/heading --></div></div>
<!-- /wp:uagb/column --></div></section>
<!-- /wp:uagb/columns -->

<!-- wp:uagb/columns {"block_id":"7ac9da85-4f6f-407d-b567-4d19599d929e","classMigrate":true,"columns":3,"stack":"tablet","topPadding":0,"bottomPadding":0,"backgroundType":"color","backgroundImage":{"id":11315,"title":"Photo by Tommy van Kessel 🤙","filename":"8zmm4ntxmde-scaled.jpg","url":"https://staging-templates.redux.io/wp-content/uploads/2020/05/8zmm4ntxmde-scaled.jpg","link":"https://staging-templates.redux.io/starterblocks/night-club/roofttop-bar/photo-by-tommy-van-kessel-%f0%9f%a4%99/","alt":"clear glass cup on wooden surface","author":"4","description":"","caption":"","name":"photo-by-tommy-van-kessel-%f0%9f%a4%99","status":"inherit","uploadedTo":11162,"date":"2020-05-05T04:29:25.000Z","modified":"2020-05-05T04:29:25.000Z","menuOrder":0,"mime":"image/jpeg","type":"image","subtype":"jpeg","icon":"https://staging-templates.redux.io/wp-includes/images/media/default.png","dateFormatted":"May 5, 2020","nonces":{"update":"373a9db57e","delete":"2363396c08","edit":"2cfe5ab595"},"editLink":"https://staging-templates.redux.io/wp-admin/post.php?post=11315\u0026action=edit","meta":false,"authorName":"vastarpara","uploadedToLink":"https://staging-templates.redux.io/wp-admin/post.php?post=11162\u0026action=edit","uploadedToTitle":"Roofttop Bar","filesizeInBytes":493874,"filesizeHumanReadable":"482 KB","context":"","originalImageURL":"https://staging-templates.redux.io/wp-content/uploads/2020/05/8zmm4ntxmde.jpg","originalImageName":"8zmm4ntxmde.jpg","height":1707,"width":2560,"orientation":"landscape","sizes":{"thumbnail":{"height":150,"width":150,"url":"https://staging-templates.redux.io/wp-content/uploads/2020/05/8zmm4ntxmde-150x150.jpg","orientation":"landscape"},"medium":{"height":200,"width":300,"url":"https://staging-templates.redux.io/wp-content/uploads/2020/05/8zmm4ntxmde-300x200.jpg","orientation":"landscape"},"large":{"height":683,"width":1024,"url":"https://staging-templates.redux.io/wp-content/uploads/2020/05/8zmm4ntxmde-1024x683.jpg","orientation":"landscape"},"full":{"url":"https://staging-templates.redux.io/wp-content/uploads/2020/05/8zmm4ntxmde-scaled.jpg","height":1707,"width":2560,"orientation":"landscape"}},"compat":{"item":"","meta":""},"acf_errors":false},"backgroundColor":"#101015","kioblocks":[]} -->
<section class="wp-block-uagb-columns uagb-columns__wrap uagb-columns__background-color uagb-columns__stack-tablet uagb-columns__valign-undefined uagb-columns__gap-10 alignundefined uagb-block-7ac9da85-4f6f-407d-b567-4d19599d929e"><div class="uagb-columns__overlay"></div><div class="uagb-columns__inner-wrap uagb-columns__columns-3"><!-- wp:uagb/column {"block_id":"52044990-2569-4385-b9ce-558d44988c10","classMigrate":true,"colWidthTablet":100,"kioblocks":[]} -->
<div class="wp-block-uagb-column uagb-column__wrap uagb-column__background-undefined uagb-block-52044990-2569-4385-b9ce-558d44988c10"><div class="uagb-column__overlay"></div><div class="uagb-column__inner-wrap"><!-- wp:qubely/image {"uniqueId":"8dbaa1","layout":"blurb","image":{"url":"https://staging-templates.redux.io/wp-content/uploads/2020/05/jky0lttoqc-scaled.jpg","id":11319},"imageBorderRadius":{"openBorderRadius":1,"radiusType":"custom","global":{},"unit":"px","custom":{"md":"5 5  "}},"title":"","titleTypography":{"openTypography":false,"size":{"md":38,"unit":"px"}},"enableSubTitle":false,"overlayBg":{"openColor":0,"type":"gradient","color":"rgba(6, 80, 183, 0.7)","gradient":{"color1":"rgba(6, 80, 183, 0.7)","color2":"rgba(96, 10, 255, 0.7)","direction":45,"start":0,"stop":100,"type":"linear"}},"overlayHoverBg":{"openColor":0,"type":"gradient","color":"rgba(6, 80, 183, 0.85)","gradient":{"color1":"rgba(6, 80, 183, 0.85)","color2":"rgba(96, 10, 255, 0.85)","direction":45,"start":0,"stop":100,"type":"linear"}},"contentAnimation":"zoom-in","contentPadding":{"openPadding":1,"paddingType":"global","global":{"md":"0"},"unit":"px"}} -->
<div class="wp-block-qubely-image qubely-block-8dbaa1"><div class="qubely-block-image  qubely-image-layout-blurb"><div class="qubely-image-media qubely-hover-animation-on qubely-hover-animation-type-zoom-in qubely-vertical-alignment-center qubely-horizontal-alignment-center"><figure><a class="qubely-image-container" href="#"><img class="qubely-image-image" src="https://staging-templates.redux.io/wp-content/uploads/2020/05/jky0lttoqc-scaled.jpg" alt=""/><div class="qubely-image-content"><div class="qubely-image-content-inner"><h3 class="qubely-image-title"></h3></div></div></a></figure></div></div></div>
<!-- /wp:qubely/image -->

<!-- wp:uagb/columns {"block_id":"7eb40214-8cc9-4b4a-9a98-77ea2ebcceb4","classMigrate":true,"columns":1,"topPadding":0,"leftPadding":0,"rightPadding":0,"topMargin":-10,"backgroundType":"image","kioblocks":[]} -->
<section class="wp-block-uagb-columns uagb-columns__wrap uagb-columns__background-image uagb-columns__stack-mobile uagb-columns__valign-undefined uagb-columns__gap-10 alignundefined uagb-block-7eb40214-8cc9-4b4a-9a98-77ea2ebcceb4"><div class="uagb-columns__overlay"></div><div class="uagb-columns__inner-wrap uagb-columns__columns-1"><!-- wp:uagb/column {"block_id":"e654e23f-7ab1-4d53-b599-6ce87ff1da71","classMigrate":true,"backgroundType":"color","backgroundColor":"#000000","backgroundOpacity":30,"backgroundImageColor":"#000000","borderRadius":5,"kioblocks":[]} -->
<div class="wp-block-uagb-column uagb-column__wrap uagb-column__background-color uagb-block-e654e23f-7ab1-4d53-b599-6ce87ff1da71"><div class="uagb-column__overlay"></div><div class="uagb-column__inner-wrap"><!-- wp:qubely/text {"uniqueId":"195eec","alignment":{"md":"center"},"typography":{"openTypography":true,"size":{"unit":"px","md":"14"},"family":"Open Sans","type":"sans-serif","weight":400,"height":{"unit":"px","md":"25"}},"textColor":"#99a6b1","titleTypography":{"openTypography":1,"size":{"md":"40","unit":"px","sm":"34"},"weight":500,"family":"Poppins","type":"sans-serif","height":{"unit":"px","md":"60","sm":"50"}},"titleColor":"#FFFFFF"} -->
<div class="wp-block-qubely-text qubely-block-195eec"><div class="qubely-block-text  "><div class="qubely-block-text-title-container  qubely-separator-position-top"><div class="qubely-block-text-title-inner"><h2 class="qubely-block-text-title">the negroni</h2></div></div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus arcu odio, dapibus eu vulputate eu, gravida ac diam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus arcu odio, dapibus eu vulputate eu, gravida ac diam.</p></div></div>
<!-- /wp:qubely/text -->

<!-- wp:ugb/spacer {"height":20,"uniqueClass":"ugb-ca0e275"} -->
<div class="wp-block-ugb-spacer ugb-spacer ugb-ca0e275 ugb-spacer--v2 ugb-main-block" id=""><style>.ugb-ca0e275.ugb-spacer{height:20px}</style><div class="ugb-inner-block"><div class="ugb-block-content"><div class="ugb-spacer--inner"></div></div></div></div>
<!-- /wp:ugb/spacer -->

<!-- wp:kioken/icon {"icons":[{"icon":"fe_aperture","link":"","target":"_self","size":48,"width":2,"title":"","color":"#46b1fd","background":"transparent","border":"#444444","borderRadius":0,"borderWidth":2,"padding":20,"style":"default"}],"uniqueID":"_165a03-ad"} -->
<div class="wp-block-kioken-icon kt-svg-icons kt-svg-icons_165a03-ad aligncenter" style="text-align:center"><div class="kt-svg-style-default kt-svg-icon-wrap kt-svg-item-0"><div style="display:inline-flex;justify-content:center;align-items:center;color:#46b1fd" class="kt-svg-icon kt-svg-icon-fe_aperture"><svg viewbox="0 0 24 24" height="48" width="48" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg" style="fill:none;display:inline-block;vertical-align:middle" role="img" aria-hidden="true" focusable="false"><circle cx="12" cy="12" r="10"></circle><line x1="14.31" y1="8" x2="20.05" y2="17.94"></line><line x1="9.69" y1="8" x2="21.17" y2="8"></line><line x1="7.38" y1="12" x2="13.12" y2="2.06"></line><line x1="9.69" y1="16" x2="3.95" y2="6.06"></line><line x1="14.31" y1="16" x2="2.83" y2="16"></line><line x1="16.62" y1="12" x2="10.88" y2="21.94"></line></svg></div></div></div>
<!-- /wp:kioken/icon -->

<!-- wp:qubely/text {"uniqueId":"30f1ad","alignment":{"md":"center"},"titleTypography":{"openTypography":1,"size":{"md":"14","unit":"px"},"family":"Open Sans","type":"sans-serif","weight":700,"height":{"unit":"px","md":"25"}},"titleColor":"#46b1fd"} -->
<div class="wp-block-qubely-text qubely-block-30f1ad"><div class="qubely-block-text  "><div class="qubely-block-text-title-container  qubely-separator-position-top"><div class="qubely-block-text-title-inner"><h2 class="qubely-block-text-title">Order At Any Time</h2></div></div><p></p></div></div>
<!-- /wp:qubely/text --></div></div>
<!-- /wp:uagb/column --></div></section>
<!-- /wp:uagb/columns -->

<!-- wp:ugb/spacer {"height":15,"uniqueClass":"ugb-0d6b083"} -->
<div class="wp-block-ugb-spacer ugb-spacer ugb-0d6b083 ugb-spacer--v2 ugb-main-block" id=""><style>.ugb-0d6b083.ugb-spacer{height:15px}</style><div class="ugb-inner-block"><div class="ugb-block-content"><div class="ugb-spacer--inner"></div></div></div></div>
<!-- /wp:ugb/spacer -->

<!-- wp:ugb/spacer {"height":15,"uniqueClass":"ugb-ea1b000"} -->
<div class="wp-block-ugb-spacer ugb-spacer ugb-ea1b000 ugb-spacer--v2 ugb-main-block" id=""><style>.ugb-ea1b000.ugb-spacer{height:15px}</style><div class="ugb-inner-block"><div class="ugb-block-content"><div class="ugb-spacer--inner"></div></div></div></div>
<!-- /wp:ugb/spacer --></div></div>
<!-- /wp:uagb/column -->

<!-- wp:uagb/column {"block_id":"8f3bfdeb-6666-4d46-bb1e-d13f20b60ded","classMigrate":true,"topPadding":20,"topPaddingTablet":0,"colWidthTablet":100,"kioblocks":[]} -->
<div class="wp-block-uagb-column uagb-column__wrap uagb-column__background-undefined uagb-block-8f3bfdeb-6666-4d46-bb1e-d13f20b60ded"><div class="uagb-column__overlay"></div><div class="uagb-column__inner-wrap"><!-- wp:qubely/image {"uniqueId":"0bea74","layout":"blurb","image":{"url":"https://staging-templates.redux.io/wp-content/uploads/2020/05/xli-1q8des-scaled.jpg","id":11345},"imageBorderRadius":{"openBorderRadius":1,"radiusType":"custom","global":{},"unit":"px","custom":{"md":"5 5  "}},"title":"","titleTypography":{"openTypography":false,"size":{"md":38,"unit":"px"}},"enableSubTitle":false,"overlayBg":{"openColor":0,"type":"gradient","color":"rgba(6, 80, 183, 0.7)","gradient":{"color1":"rgba(6, 80, 183, 0.7)","color2":"rgba(96, 10, 255, 0.7)","direction":45,"start":0,"stop":100,"type":"linear"}},"overlayHoverBg":{"openColor":0,"type":"gradient","color":"rgba(6, 80, 183, 0.85)","gradient":{"color1":"rgba(6, 80, 183, 0.85)","color2":"rgba(96, 10, 255, 0.85)","direction":45,"start":0,"stop":100,"type":"linear"}},"contentAnimation":"zoom-in","contentPadding":{"openPadding":1,"paddingType":"global","global":{"md":"0"},"unit":"px"}} -->
<div class="wp-block-qubely-image qubely-block-0bea74"><div class="qubely-block-image  qubely-image-layout-blurb"><div class="qubely-image-media qubely-hover-animation-on qubely-hover-animation-type-zoom-in qubely-vertical-alignment-center qubely-horizontal-alignment-center"><figure><a class="qubely-image-container" href="#"><img class="qubely-image-image" src="https://staging-templates.redux.io/wp-content/uploads/2020/05/xli-1q8des-scaled.jpg" alt=""/><div class="qubely-image-content"><div class="qubely-image-content-inner"><h3 class="qubely-image-title"></h3></div></div></a></figure></div></div></div>
<!-- /wp:qubely/image -->

<!-- wp:uagb/columns {"block_id":"c92cc2f5-2c38-47ce-b8f7-d5423aa351f6","classMigrate":true,"columns":1,"topPadding":0,"leftPadding":0,"rightPadding":0,"topMargin":-10,"backgroundType":"image","kioblocks":[]} -->
<section class="wp-block-uagb-columns uagb-columns__wrap uagb-columns__background-image uagb-columns__stack-mobile uagb-columns__valign-undefined uagb-columns__gap-10 alignundefined uagb-block-c92cc2f5-2c38-47ce-b8f7-d5423aa351f6"><div class="uagb-columns__overlay"></div><div class="uagb-columns__inner-wrap uagb-columns__columns-1"><!-- wp:uagb/column {"block_id":"c11dd8eb-fdef-4923-a081-b6e8d3593b9e","classMigrate":true,"backgroundType":"color","backgroundColor":"#000000","backgroundOpacity":30,"backgroundImageColor":"#000000","borderRadius":5,"kioblocks":[]} -->
<div class="wp-block-uagb-column uagb-column__wrap uagb-column__background-color uagb-block-c11dd8eb-fdef-4923-a081-b6e8d3593b9e"><div class="uagb-column__overlay"></div><div class="uagb-column__inner-wrap"><!-- wp:qubely/text {"uniqueId":"75d275","alignment":{"md":"center"},"typography":{"openTypography":true,"size":{"unit":"px","md":"14"},"family":"Open Sans","type":"sans-serif","weight":400,"height":{"unit":"px","md":"25"}},"textColor":"#99a6b1","titleTypography":{"openTypography":1,"size":{"md":"40","unit":"px","sm":"34"},"weight":500,"family":"Poppins","type":"sans-serif","height":{"unit":"px","md":"60","sm":"50"}},"titleColor":"#FFFFFF"} -->
<div class="wp-block-qubely-text qubely-block-75d275"><div class="qubely-block-text  "><div class="qubely-block-text-title-container  qubely-separator-position-top"><div class="qubely-block-text-title-inner"><h2 class="qubely-block-text-title">the eau de vie</h2></div></div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus arcu odio, dapibus eu vulputate eu, gravida ac diam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus arcu odio, dapibus eu vulputate eu, gravida ac diam.</p></div></div>
<!-- /wp:qubely/text -->

<!-- wp:ugb/spacer {"height":20,"uniqueClass":"ugb-1523aa3"} -->
<div class="wp-block-ugb-spacer ugb-spacer ugb-1523aa3 ugb-spacer--v2 ugb-main-block" id=""><style>.ugb-1523aa3.ugb-spacer{height:20px}</style><div class="ugb-inner-block"><div class="ugb-block-content"><div class="ugb-spacer--inner"></div></div></div></div>
<!-- /wp:ugb/spacer -->

<!-- wp:kioken/icon {"icons":[{"icon":"fe_aperture","link":"","target":"_self","size":48,"width":2,"title":"","color":"#46b1fd","background":"transparent","border":"#444444","borderRadius":0,"borderWidth":2,"padding":20,"style":"default"}],"uniqueID":"_aca3a0-2e"} -->
<div class="wp-block-kioken-icon kt-svg-icons kt-svg-icons_aca3a0-2e aligncenter" style="text-align:center"><div class="kt-svg-style-default kt-svg-icon-wrap kt-svg-item-0"><div style="display:inline-flex;justify-content:center;align-items:center;color:#46b1fd" class="kt-svg-icon kt-svg-icon-fe_aperture"><svg viewbox="0 0 24 24" height="48" width="48" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg" style="fill:none;display:inline-block;vertical-align:middle" role="img" aria-hidden="true" focusable="false"><circle cx="12" cy="12" r="10"></circle><line x1="14.31" y1="8" x2="20.05" y2="17.94"></line><line x1="9.69" y1="8" x2="21.17" y2="8"></line><line x1="7.38" y1="12" x2="13.12" y2="2.06"></line><line x1="9.69" y1="16" x2="3.95" y2="6.06"></line><line x1="14.31" y1="16" x2="2.83" y2="16"></line><line x1="16.62" y1="12" x2="10.88" y2="21.94"></line></svg></div></div></div>
<!-- /wp:kioken/icon -->

<!-- wp:qubely/text {"uniqueId":"29087f","alignment":{"md":"center"},"titleTypography":{"openTypography":1,"size":{"md":"14","unit":"px"},"family":"Open Sans","type":"sans-serif","weight":700,"height":{"unit":"px","md":"25"}},"titleColor":"#46b1fd"} -->
<div class="wp-block-qubely-text qubely-block-29087f"><div class="qubely-block-text  "><div class="qubely-block-text-title-container  qubely-separator-position-top"><div class="qubely-block-text-title-inner"><h2 class="qubely-block-text-title">Order At Any Time</h2></div></div><p></p></div></div>
<!-- /wp:qubely/text --></div></div>
<!-- /wp:uagb/column --></div></section>
<!-- /wp:uagb/columns --></div></div>
<!-- /wp:uagb/column -->

<!-- wp:uagb/column {"block_id":"0e13f7d7-16de-48e5-b54a-a83be62e4775","classMigrate":true,"colWidthTablet":100,"kioblocks":[]} -->
<div class="wp-block-uagb-column uagb-column__wrap uagb-column__background-undefined uagb-block-0e13f7d7-16de-48e5-b54a-a83be62e4775"><div class="uagb-column__overlay"></div><div class="uagb-column__inner-wrap"><!-- wp:qubely/image {"uniqueId":"b30321","layout":"blurb","image":{"url":"https://staging-templates.redux.io/wp-content/uploads/2020/05/dmkmrnptmpw-scaled.jpg","id":11347},"imageBorderRadius":{"openBorderRadius":1,"radiusType":"custom","global":{},"unit":"px","custom":{"md":"5 5  "}},"title":"","titleTypography":{"openTypography":false,"size":{"md":38,"unit":"px"}},"enableSubTitle":false,"overlayBg":{"openColor":0,"type":"gradient","color":"rgba(6, 80, 183, 0.7)","gradient":{"color1":"rgba(6, 80, 183, 0.7)","color2":"rgba(96, 10, 255, 0.7)","direction":45,"start":0,"stop":100,"type":"linear"}},"overlayHoverBg":{"openColor":0,"type":"gradient","color":"rgba(6, 80, 183, 0.85)","gradient":{"color1":"rgba(6, 80, 183, 0.85)","color2":"rgba(96, 10, 255, 0.85)","direction":45,"start":0,"stop":100,"type":"linear"}},"contentAnimation":"zoom-in","contentPadding":{"openPadding":1,"paddingType":"global","global":{"md":"0"},"unit":"px"}} -->
<div class="wp-block-qubely-image qubely-block-b30321"><div class="qubely-block-image  qubely-image-layout-blurb"><div class="qubely-image-media qubely-hover-animation-on qubely-hover-animation-type-zoom-in qubely-vertical-alignment-center qubely-horizontal-alignment-center"><figure><a class="qubely-image-container" href="#"><img class="qubely-image-image" src="https://staging-templates.redux.io/wp-content/uploads/2020/05/dmkmrnptmpw-scaled.jpg" alt=""/><div class="qubely-image-content"><div class="qubely-image-content-inner"><h3 class="qubely-image-title"></h3></div></div></a></figure></div></div></div>
<!-- /wp:qubely/image -->

<!-- wp:uagb/columns {"block_id":"25f92e0a-4bf0-4489-b9dd-6be615256be1","classMigrate":true,"columns":1,"topPadding":0,"leftPadding":0,"rightPadding":0,"topMargin":-10,"backgroundType":"image","kioblocks":[]} -->
<section class="wp-block-uagb-columns uagb-columns__wrap uagb-columns__background-image uagb-columns__stack-mobile uagb-columns__valign-undefined uagb-columns__gap-10 alignundefined uagb-block-25f92e0a-4bf0-4489-b9dd-6be615256be1"><div class="uagb-columns__overlay"></div><div class="uagb-columns__inner-wrap uagb-columns__columns-1"><!-- wp:uagb/column {"block_id":"78a5cf15-1d95-46e2-94c8-affd49f418a8","classMigrate":true,"backgroundType":"color","backgroundColor":"#000000","backgroundOpacity":30,"backgroundImageColor":"#000000","borderRadius":5,"kioblocks":[]} -->
<div class="wp-block-uagb-column uagb-column__wrap uagb-column__background-color uagb-block-78a5cf15-1d95-46e2-94c8-affd49f418a8"><div class="uagb-column__overlay"></div><div class="uagb-column__inner-wrap"><!-- wp:qubely/text {"uniqueId":"cef0bb","alignment":{"md":"center"},"typography":{"openTypography":true,"size":{"unit":"px","md":"14"},"family":"Open Sans","type":"sans-serif","weight":400,"height":{"unit":"px","md":"25"}},"textColor":"#99a6b1","titleTypography":{"openTypography":1,"size":{"md":"40","unit":"px","sm":"34"},"weight":500,"family":"Poppins","type":"sans-serif","height":{"unit":"px","md":"60","sm":"50"}},"titleColor":"#FFFFFF"} -->
<div class="wp-block-qubely-text qubely-block-cef0bb"><div class="qubely-block-text  "><div class="qubely-block-text-title-container  qubely-separator-position-top"><div class="qubely-block-text-title-inner"><h2 class="qubely-block-text-title">the bloody mary</h2></div></div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus arcu odio, dapibus eu vulputate eu, gravida ac diam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus arcu odio, dapibus eu vulputate eu, gravida ac diam.</p></div></div>
<!-- /wp:qubely/text -->

<!-- wp:ugb/spacer {"height":20,"uniqueClass":"ugb-aeaa5da"} -->
<div class="wp-block-ugb-spacer ugb-spacer ugb-aeaa5da ugb-spacer--v2 ugb-main-block" id=""><style>.ugb-aeaa5da.ugb-spacer{height:20px}</style><div class="ugb-inner-block"><div class="ugb-block-content"><div class="ugb-spacer--inner"></div></div></div></div>
<!-- /wp:ugb/spacer -->

<!-- wp:kioken/icon {"icons":[{"icon":"fe_aperture","link":"","target":"_self","size":48,"width":2,"title":"","color":"#46b1fd","background":"transparent","border":"#444444","borderRadius":0,"borderWidth":2,"padding":20,"style":"default"}],"uniqueID":"_40ba16-fd"} -->
<div class="wp-block-kioken-icon kt-svg-icons kt-svg-icons_40ba16-fd aligncenter" style="text-align:center"><div class="kt-svg-style-default kt-svg-icon-wrap kt-svg-item-0"><div style="display:inline-flex;justify-content:center;align-items:center;color:#46b1fd" class="kt-svg-icon kt-svg-icon-fe_aperture"><svg viewbox="0 0 24 24" height="48" width="48" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg" style="fill:none;display:inline-block;vertical-align:middle" role="img" aria-hidden="true" focusable="false"><circle cx="12" cy="12" r="10"></circle><line x1="14.31" y1="8" x2="20.05" y2="17.94"></line><line x1="9.69" y1="8" x2="21.17" y2="8"></line><line x1="7.38" y1="12" x2="13.12" y2="2.06"></line><line x1="9.69" y1="16" x2="3.95" y2="6.06"></line><line x1="14.31" y1="16" x2="2.83" y2="16"></line><line x1="16.62" y1="12" x2="10.88" y2="21.94"></line></svg></div></div></div>
<!-- /wp:kioken/icon -->

<!-- wp:qubely/text {"uniqueId":"900e9d","alignment":{"md":"center"},"titleTypography":{"openTypography":1,"size":{"md":"14","unit":"px"},"family":"Open Sans","type":"sans-serif","weight":700,"height":{"unit":"px","md":"25"}},"titleColor":"#46b1fd"} -->
<div class="wp-block-qubely-text qubely-block-900e9d"><div class="qubely-block-text  "><div class="qubely-block-text-title-container  qubely-separator-position-top"><div class="qubely-block-text-title-inner"><h2 class="qubely-block-text-title">Order At Any Time</h2></div></div><p></p></div></div>
<!-- /wp:qubely/text --></div></div>
<!-- /wp:uagb/column --></div></section>
<!-- /wp:uagb/columns --></div></div>
<!-- /wp:uagb/column --></div></section>
<!-- /wp:uagb/columns -->

It looks fine inside the admin, but on the front-end the CSS is all wrong. If you remove the advanced columns CSS starts working again. This isn't isolated to this template. I hope you can have a fix soon so we can update. We want those new features!

P.S. There is no issue in parsing when using Qubely 1.3.91.

[Image] Horizontal positioning doesn't work for SVG images

No matter which position is chosen (center/right) image is always positioned left if this is SVG (inline SVG as most WP plugins treat them).

Question: Is there a different, publicly unavailable repository?

Hello, I'm opening this issue as a question. Hope you don't mind.

I notice that this repository doesn't seem to have unit tests, e2e tests, and so forth. Qubely has a lot of features so it seems that testing manually when changes are made would be a lot of work. Do you have a separate repository which has tests and additional tooling? I'm assuming that might be a possibility because there's a premium version.

Thank you for making Qubely and thank you for your time.

By the way: When I go to qubely.io and click "Get Pro" the link goes to a 404 page.

Additional CSS not working on container boxes

First off: qubely is awesome, thanks for sharing!

One bug I noticed: when you try to insert additional CSS with the {{QUBELY}}-prefix in the row and column blocks, it gets ignored and will not be persisted during page save.
On other blocks, this works just fine, I tried it with the Advanced-Text and Info-Box blocks.

Recommend Projects

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
Vue.js

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
TensorFlow

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
D3

Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

javascript

JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
web

Some thing interesting about web. New door for the world.
server

A server is a program made to process requests and deliver data to clients.
Machine learning

Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.

Jobs

Jooble