Adding padding/centering to the blockly flyout?

[Amber Miller]

Hi All,

Noticing from speaking to users that the flyout automatically aligning the blocks to the top can look quite cluttered or stuck, was just curious if anyone had had any luck moving the content down a bit or adding padding around the blocks in the flyout? 

Also if anyone knows how to change the default styling of the variable button that would be amazing, it just feels too small and I just want to give it some padding but I can't find the right CSS class.

Many thanks

-Amber

[Maribeth Bottorff]

Hello,

You have a number of options for changing the flyout. You can create a custom flyout class and register it: https://developers.google.com/blockly/guides/plugins/using_blockly_apis#injecting_subclasses and from there you can change a lot of things. You can change the constants MARGIN / GAP_X / GAP_Y to change the gap between blocks in the flyout.

For changing only the amount of space at the top of the flyout, it's a bit more complicated and you'd have to play around with the methods in the flyout class. You can change the `layout_` method to have it start laying out the blocks later, but you'd also have to change the corresponding metrics manager so that the flyout knows how tall the actual content is (right now it assumes you're doing the standard margin calculation). In the ContinuousToolbox plugin we added extra padding to the end of the flyout, so you can look there for inspiration on where to start with this: https://github.com/google/blockly-samples/blob/9c21ab94c16e68438b3883db69afc3d170ec9553/plugins/continuous-toolbox/src/ContinuousMetricsFlyout.js#L21

You could also add custom gap values if you only want bigger gaps around certain blocks for some reason. Instead of creating a custom flyout, in your toolbox definition you'd have

<xml xmlns="https://developers.google.com/blockly/xml" id="toolbox-categories" style="display: none">

<category name="Logic" categorystyle="logic_category">

<block type="controls_if" gap="40"></block>

<block type="logic_compare" gap="400"></block>

.... and so on

The gap value determines how much space to put after the block.

Unfortunately there is not an easy way to change only the "Create Variable" button inside the default variable category. If you only want to change the padding then the first change above with changing the margin value would also affect this button. For other styling, if you want to change all the buttons in the toolbox, you can use the `blocklyFlyoutButton` css class.

If you do want to change only that specific button, you'd have to create your own dynamic category (https://developers.google.com/blockly/guides/configure/web/toolbox#dynamic_categories) that replicates the functionality and then you can add a custom class to the button (https://developers.google.com/blockly/guides/configure/web/toolbox#buttons_and_labels) with something like `button.setAttribute('web-class', 'CUSTOM_CLASS')`. 

If you wanted to change a button in any other kind of category that you control yourself (so not the variables and procedures default categories) you can follow the last link and add the `web-class` attribute directly to the button in the toolbox configuration.

Hope that helps,

Maribeth