Title: Adding custom data to Rows/Columns
Last modified: August 25, 2020

---

# Adding custom data to Rows/Columns

 *  Resolved [workforpizza](https://wordpress.org/support/users/workforpizza/)
 * (@workforpizza)
 * [5 years, 9 months ago](https://wordpress.org/support/topic/adding-custom-data-to-rows-columns/)
 * Hello,
 * I’m currently trying to add custom-styling options to the kadence/rowlayout and
   kadence/column blocks.
 * I’ve found this thread: [https://wordpress.org/support/topic/like-to-add-custom-field-to-kadence-row-layout/](https://wordpress.org/support/topic/like-to-add-custom-field-to-kadence-row-layout/)
   and tried my best.
 * I’m using the `blocks.registerBlockType`-filter to add custom attributes to the
   block (works), I’m using the `editor.BlockEdit`-filter to add custom editor controls
   to the row/column-blocks (works).
 * Now I’m trying to pass this information that is stored in the custom attributes
   to the front-end, to style those rows/columns accordingly. I’ve got it kinda 
   working with the `blocks.getSaveElement`-filter, in which I add certain classes
   to the `element.props.className` property.
 * This way of doing this has two problems:
    **First:** This is run on save and 
   not on render. Which means once a class is added to a block and the custom-toggle
   is turned off, it isn’t removed. It stays and possibly gets duplicated.
 * **Second:** For some reason using this method it triggers the block validation
   and tells me “this block contains invalid content. When I use the ‘Solve’-button,
   the returned HTML on both sides is the same, so I don’t really know what difference
   is causing this validate to fail.
 * Is there any way like in the old template-days of wordpress, to override the 
   template/markup used on render? So I could add data-attributes or something like
   this? Or any way other than the fragile method of adding it to the “class”-field?
 * I hope it gets clear what I’m trying to accomplish. If needed I can provide more
   code-examples or explanations.
 * Thanks a lot in advance.
 * Florian,
 * //edit:
    Another quirky workaround could be to add a filter on line 292 in `class-
   kadence-blocks-frontent.php` that allows to add additional inline-css for rows/
   or blocks in general.
 * I haven’t found a way to add my custom attributes to the passed `$attributes`
   yet, but if this is possible, this would allow some conditional styling.
 * Sorry for being all over the place with this, I have spent too much time on this
   today than I’d liked to 😅
    -  This topic was modified 5 years, 9 months ago by [workforpizza](https://wordpress.org/support/users/workforpizza/).

Viewing 5 replies - 1 through 5 (of 5 total)

 *  Thread Starter [workforpizza](https://wordpress.org/support/users/workforpizza/)
 * (@workforpizza)
 * [5 years, 9 months ago](https://wordpress.org/support/topic/adding-custom-data-to-rows-columns/#post-13313041)
 * To add another thing: I tried using the `render_block` server-side filter, to
   add a wrapper around the row-layout with my data added to it. But it doesn’t 
   seem like my custom attributes are getting passed into this filter.
 *  Plugin Contributor [Ben Ritner – Kadence WP](https://wordpress.org/support/users/britner/)
 * (@britner)
 * [5 years, 9 months ago](https://wordpress.org/support/topic/adding-custom-data-to-rows-columns/#post-13313818)
 * Hey,
    This is more complex then something I can just guess at here in your code.
   Do you have a GitHub showing your project so I can see what you are doing?
 * You mention wanting to be able to change the class on render instead of on save.
   Can you tell me more what you are using this for? If it’s a control in the block
   then having it work on save would make sense because it could only be changed
   in the block settings. Since this is a static block saved as HTML that would 
   also make the most sense code wise. However, if you need this to change based
   on something else outside of the block controls then you will need to approach
   this differently.
 * A note, if you are using the filters correctly Gutenberg will account for what
   HTML changes your code would make when checking for render and not show a broken
   block. I do something like this in Kadence Blocks Pro because columns for example
   have animation options which are an addon to the block settings.
 * Ben
 *  Thread Starter [workforpizza](https://wordpress.org/support/users/workforpizza/)
 * (@workforpizza)
 * [5 years, 9 months ago](https://wordpress.org/support/topic/adding-custom-data-to-rows-columns/#post-13315775)
 * Okay I’ll try to expand on it. I don’t have it on GitHub, but I’ll share the 
   necessary code-parts here.
 * First I’ll try to explain visually what I’m doing/want to be doing, and then 
   I’ll show you the code that I’m using so far.
 * **So this is the structure:**
 * > [View post on imgur.com](https://imgur.com/eLY7s3M)
 * 
    * Red = Rowlayout * Green = Column
 * Inside the column are some other blocks.
 * **This is what I want to achieve:**
 * > [View post on imgur.com](https://imgur.com/GXRSeMs)
 * **This is the “Background-Decoration” settings-toggle** (and color select) I 
   added to the `kadence/rowlayout` (last panel):
 * > [View post on imgur.com](https://imgur.com/pCSjSES)
 * **What should happen:**
    If the toggle is enabled it should add the class `inset-
   background` to the row-layout-wrapper and add the selected HEX-Color as `--inset-
   background-color` CSS variable into the style-tag.
 * Here you can see that I got it pretty much working: [https://imgur.com/7RtNHc9](https://imgur.com/7RtNHc9)
   
   But once it is saved and the editor reloaded the Kadence-Row-Block shows invalid
   content.
 * **This is what the validation-console-output shows:**
 * > [View post on imgur.com](https://imgur.com/T1LHPvX)
 * 
    As you can see the `save`-function does not include the CSS-variable, but the
   post-body does. What I just noticed, does the `kt-row-layout-inner` has an extra
   space in the `save`-function output? Why could that be?
 * > Interesting note here: You will see in a minute, that I use this feature on
   > the `kadence/rowlayout` AND `core/group` block, with the exact same code. But
   > on the `core/group`-block this validation error doesn’t happen.
 * **Ok now to the code:**
    [https://pastebin.com/WZWRJAAs](https://pastebin.com/WZWRJAAs)
 * I’ve tried to comment a little what I’m doing.
    As mentioned above you can see
   the same code is used for `kadence/rowlayout` and `core/group` but the second
   blocks doesn’t seem to have any problems with it.
 * I hope this helps with the understanding of my problem and thanks a lot for your
   help 🙏
 *  Plugin Contributor [Ben Ritner – Kadence WP](https://wordpress.org/support/users/britner/)
 * (@britner)
 * [5 years, 9 months ago](https://wordpress.org/support/topic/adding-custom-data-to-rows-columns/#post-13330472)
 * Hey,
    The main thing I see is that once it’s loaded in the editor the attributes
   are missing. There is an issue in Gutenberg with timing for when you are loading
   the scripts to add attributes. In Kadence Blocks Pro for example (and this seems
   to be true of other plugins I’ve seen add attributes like editors kit) I load
   a script with the blocks.registerBlockType filter early in the page load before
   things are registered. Else Gutenberg won’t pick up the new attributes that you’ve
   saved.
 * For example, I enqueue my early script on the current_screen action so it loads
   at the top of the head and the filter is registered for when registerBlockType
   runs.
 * I hope that helps,
 * Ben
 *  Thread Starter [workforpizza](https://wordpress.org/support/users/workforpizza/)
 * (@workforpizza)
 * [5 years, 9 months ago](https://wordpress.org/support/topic/adding-custom-data-to-rows-columns/#post-13331981)
 * Hey Ben,
 * thanks for your answer. This seems to actually help, yes.
    For anyone experiencing
   the same problem, here is how I split up my files:
 *     ```
       function enqueue_gutenberg_attributes()
       {
           // I took this conditional-code from the Kadence init.php, thanks a lot!
           if ( ! is_admin() ) {
               return;
           }
           global $pagenow;
           if ( 'post.php' === $pagenow || 'post-new.php' === $pagenow ) {
               $current_screen = get_current_screen();
               if ( method_exists( $current_screen, 'is_block_editor' ) && $current_screen->is_block_editor() ) {
                   wp_enqueue_script(
                       'wfp-gutenberg-attributes',
                       get_template_directory_uri() . '/dist/js/pages/wp_gutenberg_attributes.js',
                       [
                           'wp-editor',
                       ],
                       filemtime(get_stylesheet_directory() . '/dist/js/pages/wp_gutenberg_attributes.js')
                   );
               }
           }
       }
   
       add_action('current_screen', 'enqueue_gutenberg_attributes');
       ```
   
 * and in the `wp_gutenberg_attributes.js` I only register the new attributes:
 *     ```
       import { blocks_galleryStyles, blocks_insetBackground, blocks_textColumns } from "../components/wp_gutenberg_variables";
   
       /**
        * Add Custom Attributes
        */
       wp.hooks.addFilter(
           'blocks.registerBlockType',
           'cptx/addCustomAttributes',
           settings => {
               if ( blocks_textColumns.includes(settings.name) ) {
                   settings.attributes = {
                       ...settings.attributes,
                       textColumnsCount: {
                           type:    'number',
                           default: 1
                       }
                   };
               }
   
               if ( blocks_insetBackground.includes(settings.name) ) {
                   settings.attributes = {
                       ...settings.attributes,
                       useInsetBackground:   {
                           type: 'boolean',
                           default: false,
                       },
                       insetBackgroundColor: {
                           type:    'string',
                           default: '#c1c1c1'
                       }
                   };
               }
   
               if ( blocks_galleryStyles.includes(settings.name) ) {
                   settings.attributes = {
                       ...settings.attributes,
                       cptxGalleryStyle: {
                           type:    'string',
                           default: 'default'
                       }
                   };
               }
   
               return settings;
           }
       );
       ```
   
 * Two things to mention:
    1. I had to still restore the faulty blocks and re-save
   them for it to work. 2. I had one attribute that I added globally to ALL blocks
   which caused for example the Gravity Forms-Block to break and not being able 
   to load the requested form anymore (it said the attributes contained invalid 
   props). So it should probably only be applied to whitelisted blocks.
 * The rest of my code from above (the `blocks.getSaveContent.extraProps` filter
   etc.) still gets enqueued on the `enqueue_block_editor_assets` action and works
   fine.
 * Thanks again for your help, I think this solution works for now 👍
 * Flo,
    -  This reply was modified 5 years, 9 months ago by [workforpizza](https://wordpress.org/support/users/workforpizza/).
      Reason: code highlighting
    -  This reply was modified 5 years, 9 months ago by [workforpizza](https://wordpress.org/support/users/workforpizza/).

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘Adding custom data to Rows/Columns’ is closed to new replies.

 * ![](https://ps.w.org/kadence-blocks/assets/icon-256x256.png?rev=3178382)
 * [Kadence Blocks — Page Builder Toolkit for Gutenberg Editor](https://wordpress.org/plugins/kadence-blocks/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/kadence-blocks/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/kadence-blocks/)
 * [Active Topics](https://wordpress.org/support/plugin/kadence-blocks/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/kadence-blocks/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/kadence-blocks/reviews/)

## Tags

 * [column](https://wordpress.org/support/topic-tag/column/)

 * 5 replies
 * 2 participants
 * Last reply from: [workforpizza](https://wordpress.org/support/users/workforpizza/)
 * Last activity: [5 years, 9 months ago](https://wordpress.org/support/topic/adding-custom-data-to-rows-columns/#post-13331981)
 * Status: resolved