stellarwp / kadence-blocks Goto Github PK

Right now you can add a new accordion pane via a button, but if you want to remove one you need to adjust the number of accordion panes in the right menu.

it would be good to be able to remove a pane via the cogwheel for that particular pane

The core Image block, is far better than anything in the Classic editor but is still too basic.

Take a look at this page as an example of what I'm looking for, specifically the "Image With Lightbox Support" example, the screenshot of the "Shortcode Option Panel" outline the feature I would want in such a block:

http://kaptinlin.com/themes/strikingr/shortcodes/images/

I have not been able to find a block or block library that adds these type of feature. The closest I can find are gallery plugins which have added support for Gutenberg. The thing is I not want or need a whole gallery plugin, not when just a more versatile image block will do.

Thanks in advance for your consideration of this.

It'd be nice to have settings page where block attribute defaults can be configured.

I'd particularly like to see defaults for Row paddings/margins.

It would also be nice if each setting had an enabled/disabled checkbox.

This way, we can configure a default values for our theme and then choose whether or not to allow that default setting to be configured by the user inside the Gutenberg editor.

This could also be configured with an API, like the built-in PHP or JS filter hook systems or even the add-theme-support API.

Thanks for the great general-purpose block plugin. This plugin has been the best one so far in terms of following Gutenberg best-practices as well as being theme developer friendly.

Margin and Padding control need added to the either the Icon block or the Adv Paragraph block (I know it already has before and after) or both. I'm trying to place an icon beside a heading.

Here's a screenshot and the fields I used as a reusable block exported as a JSON. This can be imported into WP on the Manage Reusable Block admin page so you can see.

styled-box-icon-heading-left.zip

Other block libraries such as Ultimate Addons for Gutenberg and Stackable – Gutenberg Blocks have a container block. This would a a great addition to your library too.

I know you can add a Row Block set to a single column, but somehow the container blocks seem a little simpler to use when you do not need the row/columns feature set.

With free version of Kadence and WP 5.0.3, when I create a row-layout, I don't have any icons of alignment showing up.
It would really help to have them as now it prints the class alignundefined on frontend with no possible other option except vertical alignment or center alignment (so no fullwidth, left and right):

<section class="wp-block-kadence-rowlayout alignundefined">

currently its just possible to set the margins/paddings seperatly for mobile and desktop.
it would be neat to do this too for tablets

row layout is great, but i can only setup a mobile layout for tablet and phone, without being able to specify if the target layout should be portrait or landscape.
as far as I see it it would be extremely helpful if I had five options there:

• desktop
• tablet portrait
• tablet landscape
• phone portrait
• phone landscape

Hello,

I am referring your code and found this code in blocks files. Can you please let us know why this code is needed? Is this useful for translating java script strings to .PO files? Why we use setLocaleData as we dont find it is useful anywhere in your plugins files?

wp.i18n.setLocaleData( { '': {} }, 'ultimate-addons-for-gutenberg' );

Any help will be really appreciable.

Regards,
Milind.

Hi

I'm looking but I can't find in docs. Is there any way to create / include my own layouts, just like yours prebuilds layouts library? If not - is there any plans for that?

For example, I want design my own Hero image sections, code them and include as a part of theme for future design.

Thanks!

Hi, thanks for the great plugin. I was asking if you could let negative values for margins, paddings etc since css permits such things, it would be very practical if settings reflects that. The reason is I would like to have two adjacent headings very close to each other which requires margin less than 0 for my selected font.

Ideally, a theme developer or site administrator could configure or limit the list of available font options as well as add new (non-google) font choices.

Additional "Font Family" options would be created by setting the option's label text as well as the actual CSS font-family name that should be used.

The Spacer block seems to mess up the layout editor display.

It's great to have default settings. I just wish there was a button on the defaults page that said something like change existing blocks to this new value.

Even if this was only implemented for a few of the defaults it would be helpful.
Right now I'm looking at the Row Layout wishing I could change the "content max-width" on all row layout blocks. rather than going back through every page.

Maybe include a warning that this will make all settings the same for existing blocks. So the user knows that if they have different settings on some blocks those will be changed.

Or even better allow profiles that when changed will only change the blocks assigned that profile both retroactively and going forward. Then add an easy way to apply profiles to existing blocks. Maybe page level profiles that are overridden if the block inside the page also has a profile selected.

Love the plugin!

Related to #42 #4

Does your plugin need to create all this unnecessary CSS code for every selector on every block in your library? This particular output is for .kt-testimonial-style-bubble .kt-testimonial-text-wrap

element.style {
    border-color: rgba(238, 238, 238, 1);
    border-radius: px;
    border-top-width: px;
    border-right-width: px;
    border-bottom-width: px;
    border-left-width: px;
    padding: undefinedpx undefinedpx undefinedpx undefinedpx;
}

It'd be preferable to not load anything if the fields in the block editor settings are cleared. Can that be instigated?

When hitting Enter/Return in the List Icon block, it breaks the preview and shows this error in the console: TypeError: Cannot read property 'link' of undefined

Version 1.5.2 - Twenty Nineteen - No other plugins activated.

Hi, allowing users to set up borders like how currently we are able to set up padding and margins for each column will be very useful. This will help users create card-like layouts and design. Users can set up borders by specifying thickness of top, right, bottom and left borders. To not over-complicate usability, a single selection of border color will be applied to all 4 sides, I'm thinking that the css should be applied to the .kt-inside-inner-col element, similar to padding and margins.

This line https://github.com/kadencethemes/kadence-blocks/blob/ae1e9b6647be007b7e50b32668df4162c136e46b/dist/class-kadence-blocks-frontend.php#L253

I really appreciate your works! Great Job 😄

Font Awesome provides a WordPress plugin to manage easy access to both their free and pro sets of icons. It would be great to have the Kadence plugin updated to integrate with the FA plugin so more icons are available in Kadence blocks. Here's some info listed by the FA plugin related to integration with other plugins (while Kadence Blocks plugin is active). Note that Kadence isn't listed as an registered/active client:

Client Requirements
We don't detect any other active clients (like themes or plugins) that have registered requirements for Font Awesome.

Contact the developer for the unregistered client and ask them to consider updating their code to register with this Font Awesome Official plugin. Let them know they can reach us at [email protected]

The current selection of 300 icons is great, but not enough for large sites that use icons extensively.

Thanks for considering this enhancement ;)

PS(as a temporary workaround, is there a way to manually load in more icons to the source of where Kadence blocks are pulling from?)

Hi, thanks a lot for this great plugin! :)
I have a feature idea. Is possible add to Font Family Options's modal field to choose default font in the editor? Maybe also with check opt "Load Google Font on Frontend".

Thanks

In the read more excerpt link the div class is missing an opening quote as seen here. Can this be fixed so that I can adjust the layout with CSS

The client we are making a site for at the moment complained about that the browser scrolls to the top of the tab content when changing tabs.
According to the client they feel it is not necessary and a bit annoying.
Perhaps it could be a setting.

The Advanced Heading block should probably only support font sizes defined by editor-font-sizes (defined using add_theme_support).

At the very least, the custom Font Size slider should be hidden or disabled if disable-custom-font-sizes is defined using add_theme_support.

As a side note, I believe the built-in Font Size component already implements the correct behavior based on these theme support options.

Perhaps Kadence should use the built-in component instead.

Looks like the only difference is that Kadence adds the px/em option. Perhaps this could be added as a separate custom interface styled in conjunction with the built-in component.

Hello,

I'm interested in switching from 'Ultimate Addons for Gutenberg' to Kadence Blocks, but one of my primary reasons for doing so isn't working quite as expected:

There are a bunch of blocks I won't be using, so I deactivated them, cleared caches, and checked the network tab of Chrome Dev Tools to check the CSS and JS weight >>> no change.

Is the idea that only the code for the necessary blocks is compiled? That's what I was hoping, as otherwise, I'm likely to be using ~10% of the code I'm forcing users to download. My focus, asking this question, is on speed.

When using the Post Grid/Carousel block and selecting the "Filter by Category", the dropdown field background appears to be transparent. The Filter by Tag may have the same issue.

My tabs were previously working but upon returning to the page to edit I would receive an error message asking me to convert the tabs to html. I updated 2 days ago and it seemed to be working fine with the latest addition to choose the layout type. Today, I ran the latest update you had and now everytime I try to insert a tab the error box comes up. PLEASE HELP! Why did your latest update just break what was already working.

The Row Layout block comes with three width settings: Full width, Wide width, and Align center.

I'm currently coding CSS rules to control these widths on the front-end while a script transforms the front-end selectors to target the corresponding block in the Gutenberg editor.

Ideally I think these widths should be controllable by a setting in the admin dashboard.

This way Kadence Blocks can handle the way these changes are reflected in the editor and front-end.

This also (should) allow the row widths for the entire site to be updated in a single location.

If possible, it'd also be nice to control what each of the three width options should be for each of the available page/post/archive templates that have been registered on the site.

Its kind of annoying that the block configurator usually forces you to resort to px values, but sometimes i need to use values such as rem, em, or vh/vw

is there a reason why those are not selectable in the block configurator?

Thanks!

I'm trying to switch tabs activation according to the anchor set in the url. For instance:

www.url.com/mypage#tab-2

will open tab-2 and so on. I have been looking but could not find an easy way to trigger the tab switch by javascript. Could you please provide a hint of what can I use for that?

Thank you!!

The advanced button block uses a RichText component which allows things like newlines and bold text, but the rendered button escapes all of that. Example:

...renders as...

Hi just came across to a problem with kadence-blocks using jarallax.js in all other browsers work fine except in IE11 it is throwing and error "Object expected". I manage to overcome this problem setting the elementInViewport: null, in kt-init-parallax.js but is just temporary solution.
Is there any other way I can avoid this error?
Thank you in advance.

Will be very useful for users to be able to set the 'order' (text field) of each column for desktop and mobile. Since columns are rendered in flex and users are able to change the layout for desktop, tablet and mobile, allowing users to set the order of the flex children (.wp-block-kadence-column) will be critical.

Example use case - In a two or more column row layout:
An image is inserted on the last column. In mobile devices where the columns respond to become stacked one after another, the user wants to display this image on the top. With this set 'order' feature, the user can set order of this column to '-1' for mobile and make this possible.

Many of the global defaults options are just CSS settings, like the Padding/Margin settings for Row Layouts.

It appears that, by setting a default for one of these values, the global default (at that time) will be saved directly onto the block itself.

This is an issue because, should you want to update the defaults for a site, you can only do so going forward.

There's no way to retroactively update existing blocks, even if they're taking on a default.

Ideally these defaults would be recorded by reference instead, or at least be injected into a shared global stylesheet or <style> tag where applicable.

This way global defaults can be modified in bulk should a site's design or theme change.

Any deviation from the default would then be seen as a specific override that should be retained even if the defaults change.

I use the Striking theme and it comes with a few predefined styled boxes. I know this can already been done with a single column Row block, but it would be nice to have a Styled Boxes block with a few predefined styles to choose from with an optional color picker.

Here's the link to their demo page so you can get a better idea of what I asking for:

http://kaptinlin.com/themes/strikingr/shortcodes/styled-boxes/

Looks like Kadence Blocks (or at least Row Layout) now has a color picker that supports a custom hex code or custom color section.

The built-in color picker will currently respect the theme's choice to disable custom color selection and enforce the selection of predefined colors.

Ideally the color customization options are hidden when this editor setting is active.

Hello! I am very impressed with your plugin! It is awesome!
I am a beginner WordPress developer. And I would like to learn how to create blocks for guttenberg, since it will soon be embedded in WordPress. Information on the Internet is not so much, especially such a level as your plugin and custom elements in it. And there is no information in Russian at all ... And I would like to ask you if you could give the uncompressed code of the file "blocks.build.js" as an example for studying. And I apologize if it is brazen. Contact email if needed [email protected]

It'd be nice to be able to specify the text alignment at the Column or Row Layout level.

I've also run into situations where inner blocks are aligned left on desktop but should be centered on mobile.

There's no good way to do this currently within the editor.

Blocks such as "Column" and "Tab" must be located within their respective parent blocks in order to function properly.

These blocks should be hidden from the block inserter by using the proper configuration in the "supports" array during block registration.

They should probably also use the "parent" array to restrict which parents they can be inserted into.

I have already reported this in support forum (link), but here I can add a couple of screenshots to illustrate the problem.

With Twenty Nineteen as active theme, in the block editor the icons are fine:

However, in the Twenty Nineteen frontend the icons do look weird:

If I disable fill: currentColorin the Devtool, the icons look okay, but adding the rule svg { fill: none; } to Customizer > CSS does not work. It seems to fix icons like phone and envelope, but unfortunately other icons like e.g. a double arrow » disappear entirely.

I would very much like to try to keep the number of plugins that add block libraries to a minimum. If you can add a syntax highlighting block that would be great step in the right direction :-)

I tried everyone I could find, only one seem to work consistently well, CodeMirror Blocks. Perhaps you could base yours on theirs if you decide to add one.

In order to provide the most flexibility when it comes to controlling the background of Row Layout blocks, we should probably handle this as a toggleable foreground/background editing mode.

This would also save us from having to reinvent the wheel. For instance, all of the options available in the Row Layout's background settings can be recreated as a Cover Image block.

If we handled both background and foreground Row Layout content as InnerBlocks, then users would be able to add things like video embeds as section backgrounds without Kadence having to keep up with every imaginable need for background options.

Perhaps this could be a toggle in the Block Toolbar after the Row Layout width/alignment settings. Toggling the button would simply change the display property of the foreground block layout wrapper and the pointer-events property of the background block layout wrapper (from "none" to "all").

The output CSS would simply set the z-index of the background layout wrapper to "-1", while positioning the background layer as absolute with 100% height so that the background wrapper is limited by the statically positioned foreground/container height.

Sometimes a Row Layout block can have a background or overlay whose color doesn't contrast well with the default body text color.

Row Layout blocks should have a "Text Color" setting that changes the default inherited text color for all child blocks.

It would be great to have the option to set the image size for desktop/tablet/mobile for the image overlay block. That would allow site builders to have three separate WordPress media sizes set for image overlays. It would give the option to present a landscape oriented image on desktop and a more square or portrait style image on mobile. It would also mean a much smaller image could be specified for mobile to make pages load more quickly. It also allows the use of something like Theia Smart Thumbnails to set the focal point for when images get cropped down to the size specified (e.g. portrait images).

It would be great if you could integrate Advanced Rich Text Tools for Gutenberg. Add support to both the core Heading and Paragraphs blocks.

I'd also like the ability to increase and decrease the indent like you can in the classic editor. Nothing fancy or anything the simple padding 30px it adds in the Classic Editor is more than sufficient. I know you already have the Advanced Heading Block, but sometime you just need the basics (which Gutenberg should come with!!! :/ ).

Related, CoBlocks adds a killer Typography Controls to the formatting controls.

Having all the above would actually make the Heading and Paragraph block useful.

Thanks in advance for your consideration!

Browser dev console returns this error when running.

When using the field input or slider to increase the column count, the inner content of the columns will be reset.

Presumably this is due to the user first clearing the number field's value before entering the new value.

I've been able to avoid this by using the number input's "increment up" button instead, but this isn't ideal.

I suggest that Kadence ignore change updates when the number field is empty or show an "apply" button after modifying the column count input.

Additionally, if the column count has been reduced, Kadence could show a warning near the apply button saying that content may be lost.

You read in my mind. This exacly I think about when I start using Guttenberg! This is one of the must-have right besides ACF.

I think it would be great to include Font Awesome. Then ... it will be total awesome :)

Please add a filter(s) to allow custom SVG icons to be added or allow SVG files to be used as icons from the Media Library.

I know I can already upload SVG icons into the Media Library but then the options for Icons Size and Color are not available.

I love the updates for 1.3.0
here are some suggestions to make it even better.

Accordion title:

• enable bold font
• enable uppercase

Currently columns in the posts/grid block appear to automatically collapse base on mobile, tablet, and desktop. However, there may be times when you'd like control the number of columns for each break point. For example, you may want 3 columns on desktop and a single column on tablet and mobile to make it easier to read than a 2 column layout on tablet. The Ultimate Addons for Gutenberg offers this type of configuration.

Thanks for considering this request.