(Plugin) Blocks’ Custom Order

This article will help you to set a custom order of blocks in the Stripo Plugin.

Valeriia avatar
Written by Valeriia
Updated over a week ago

You may want to change Stripo standard block order to your own.

The "settingsPanelBlockSortFunc" will help you with it.

Here is the example of changing Blocks’ Order you can transmit with plugin initialization.

*In my example, I want to put the "Video" block at the top of the list.

settingsPanelBlockSortFunc: (names) => { 
const res = ['videoBlockHandler'];
res.push(...names.filter(n => n !== 'videoBlockHandler'));
return res;
}

Result:

Let's consider another example:

I will put the "Button" block at the beginning and add the "Carousel" block after.

settingsPanelBlockSortFunc: (names) => { 
const res = ['btnBlockHandler', 'ampCarouselBlockHandler'];
res.push(...names.filter(n => n !== 'btnBlockHandler' && n!== 'ampCarouselBlockHandler'));
return res;
}

Result:

Important to note: there is no single clear rule for how to write code for the Blocks’ Order. You can write code based on your requirements and end result.

Appendix: Accepting block names:

  • 'imgBlockHandler',

  • 'textElementHandler',

  • 'btnBlockHandler',

  • 'spacerBlockHandler',

  • 'videoBlockHandler',

  • 'socialBlockHandler',

  • 'bannerBlockHandler',

  • 'timerBlockHandler',

  • 'menuBlockHandler',

  • 'htmlBlockHandler',

  • 'ampCarouselBlockHandler',

  • 'ampAccordionBlockHandler',

  • ampFormBlockHandler',

  • your own custom block names you created via "extensions". Learn more.


Thank you for taking the time to read our articles. We hope you will find this information helpful.

If you have any additional questions, please email us at support@stripo.email.

We would be glad to talk with you.


Did this answer your question?