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]

🤖 Pull request artifacts

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

[github-actions]

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"}}]}

[bfintal]

1. The change to the function argument arrangement will cause issues since the function is currently used. Please use a different arrangement:

- getContentAlignmentClasses = ( attributes, instanceId, blockName = 'column' )
+ getContentAlignmentClasses = ( attributes,  blockName = 'column', instanceId = '' )

2. A question, I see changes only for the editor, does the issue only exist in the editor?

[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