Title: Adding Class to Post Template in Query Loop Block
Last modified: August 20, 2022

---

# Adding Class to Post Template in Query Loop Block

 *  [KennyLL](https://wordpress.org/support/users/kennyll/)
 * (@kennyll)
 * [3 years, 9 months ago](https://wordpress.org/support/topic/adding-class-to-post-template-in-query-loop-block/)
 * Hi. I tried adding a class in the Advanced settings of a Post Template part of
   a Query Loop Block. I expected the class to be added to each individual post 
   item (**li.wp-block-post**). But it was added to the parent UL container instead(**
   ul.wp-block-post-template**).
 * – Is there any way to attach class(es) to the individual .wp-block-post list (
   LI) elements instead of the parent UL?
 * **– Super Bonus:** I might ultimately need an additional iterative class added
   to each post item (e.g, .class-01, .class-02, .class-03, etc.). Any direction
   here would be most helpful.
 * THANKS!
    -  This topic was modified 3 years, 9 months ago by [t-p](https://wordpress.org/support/users/t-p/).
      Reason: Moved to Fixing WordPress from Developing with WordPress

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

 *  Moderator [threadi](https://wordpress.org/support/users/threadi/)
 * (@threadi)
 * [3 years, 9 months ago](https://wordpress.org/support/topic/adding-class-to-post-template-in-query-loop-block/#post-15933951)
 * No, unfortunately that is not possible either. You could only develop something
   like that in a separate Gutenberg block.
 * What is your goal of the whole thing?
 *  Thread Starter [KennyLL](https://wordpress.org/support/users/kennyll/)
 * (@kennyll)
 * [3 years, 9 months ago](https://wordpress.org/support/topic/adding-class-to-post-template-in-query-loop-block/#post-15939440)
 * Hmm, bummer. The goal is to animate those individual post items – maybe have 
   them fade in one-at-a-time or something. For the CSS/JS solution we’re using,
   we need specific class(es) on the element that needs to be animated.
 * I’m not sure we would want to re-engineer the entire Query Loop Block just for
   something like this.
 * – Would I need to develop a javascript method of attaching the classes to those
   elements or something?
 *  Moderator [threadi](https://wordpress.org/support/users/threadi/)
 * (@threadi)
 * [3 years, 9 months ago](https://wordpress.org/support/topic/adding-class-to-post-template-in-query-loop-block/#post-15939500)
 * You can also use hooks in Gutenberg to change blocks. It is not necessary to 
   develop everything from scratch.
 * If you want to give all query loops an additional class in general, the hook `
   blocks.getSaveContent.extraProps` should be sufficient. Minimal example, untested:
 *     ```
       const enableBlocks = [
           'core/query-pagination'
       ];
       import classnames from 'classnames';
       const addClassToQueryLoop = ( extraProps, blockType, attributes ) => {
           // Do nothing if it's another block than our defined ones.
           if ( !enableBlocks .includes( blockType.name ) ) {
               return extraProps;
           }
   
           return extraProps.className = classnames(extraProps.className, 'your-extra-class');
       };
       wp.hooks.addFilter(
           'blocks.getSaveContent.extraProps',
           'my/example',
           addClassToQueryLoop 
       );
       ```
   
 * Alternatively, you can of course specify that each editor should enter this class
   manually in the CSS Classes field under Extras.
 * If you do not want to add this class to every QueryLoop, you would have to add
   a tick. This would have to be added as an attribute to the query loop via the
   hook `blocks.registerBlockType`. And as a field via Hook `editor.BlockListBlock`.
   Examples can be found in the manual: [https://developer.wordpress.org/block-editor/reference-guides/filters/block-filters/](https://developer.wordpress.org/block-editor/reference-guides/filters/block-filters/)

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

The topic ‘Adding Class to Post Template in Query Loop Block’ is closed to new replies.

## Tags

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

 * In: [Fixing WordPress](https://wordpress.org/support/forum/how-to-and-troubleshooting/)
 * 3 replies
 * 2 participants
 * Last reply from: [threadi](https://wordpress.org/support/users/threadi/)
 * Last activity: [3 years, 9 months ago](https://wordpress.org/support/topic/adding-class-to-post-template-in-query-loop-block/#post-15939500)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics