fix/3109 query loop class

[Arukuen]

fixes #3109

Note that the issue is also arises in the Horizontal Scroller Block.

• The class of blocks for styling in the editor looks like this: stk-abc1234
  • For blocks inside Query Loop, instanceId is added like this: stk-abc1234-1, stk-abc1234-2, etc.
  • These are targeted properly in the BlockCSS (found in style tag) providing styles in the editor
• However, for Columns and Horizontal Scroller Block, the targeted class (found in style tag) for styling looks like this respectively: stk-abc1234-column and stk-abc1234-horizontal-scroller
  • If inside Query Loop, instanceId is added like this: stk-abc1234-1-column, stk-abc1234-2-column, etc.
  • However, instanceId is not considered in generating the class (implemented via getContentAlignmentClasses).
  • Solution is to add appropriate instanceId to the generated class.

[github-actions[bot]]

🤖 Pull request artifacts

file	commit
pr3298-stackable-3298-merge.zip	e6ad419eed7df4c05c6bc2148822f19bdc7c493e

[github-actions[bot]]

Try this Pull Request in the WordPress playground: https://playground.wordpress.net/?mode=seamless#{"landingPage":"/wp-admin/post-new.php?post_type=page","preferredVersions":{"php":"latest","wp":"latest"},"steps":[{"step":"login","username":"admin","password":"password"},{"step":"installPlugin","pluginZipFile":{"resource":"url","url":"https://raw.githubusercontent.com/gambitph/Stackable/artifacts/pr3298-stackable-3298-merge.zip"}}]}

[Arukuen]

Apparently, class names in the frontend do not use the same class appended with the instanceId, but instead are unique from each other.

Editor:

Frontend:

[bfintal]

@andeng1106 Will need to test:

• Block updating / deprecation
• Works in backend & frontend