Make block visible on Edit page

  • Resolved sunhawk

    (@sunhawk)


    5 years, 7 months ago

    Hi! I am trying to use custom blocks to create easy-to-use shortcodes, where all the user has to do is place the correct number in a box and the code uses that number to generate an animated donut chart of a percentage out of 100. I’ve got my custom block created, the block template set up and on the page itself it is correctly rendering the donut chart, but on the Edit page, the block is invisible unless I hover over it (my guess is because the Edit page is trying to show the HTML itself and the chart appearance is generated by a script that loads on the page itself, not the Edit page) so is there a way I can set the appearance of the block by default (without hovering over it) for just the Edit page, so people can see it to find it later, to edit or remove, etc? Or if I could make it display the way it does once I click on it, to edit it, where it has the block name and the field to put a number in.

Viewing 7 replies - 1 through 7 (of 7 total)
  • Plugin Author Luke Carbis

    (@lukecarbis)

    Hi @sunhawk!

    Yes! You just need to create a preview template. You can read more about this on our docs:

    https://getblocklab.com/docs/get-started/add-a-block-lab-block-to-your-website-content/

    Thread Starter sunhawk

    (@sunhawk)

    Hi Luke!

    Thanks for the helpful response and link!

    So in my case, if I have a block called “block-insert-donut-shortcode.php” then I should create a file in the /theme/blocks/ folder named “preview-block-insert-donut-shortcode.php”? I tried that and I don’t see it hooking into the preview page, the block doesn’t show the HTML I put in “preview-block-insert-donut-shortcode.php”. Maybe there is some key code I need to have on the preview file to get it to work?

    Thread Starter sunhawk

    (@sunhawk)

    I tried adding just a simple div with an inline style to test that the preview code was working:

    <div style="border:2px solid #0f65f0">
<?php block_field( 'percentage' ); ?>
</div>
    Plugin Author Luke Carbis

    (@lukecarbis)

    @sunhawk That looks right to me. Maybe try checking your block’s slug.

    If your block’s slug is insert-donut-shortcode, then you would need the following files:

    – blocks/block-insert-donut-shortcode.php
    – blocks/preview-insert-donut-shortcode.php

    In your message above, it looks like you were prepending block in the preview file as well.

    Thread Starter sunhawk

    (@sunhawk)

    Hi @lukecarbis

    OH lord, I knew it would be something simple that I messed up! Thanks for pointing that out, I fixed the name to remove “block” and now it works! LOL I will keep the naming structure in mind for my future blocks.

    Thanks for all your help! This is a really nice plugin, doing exactly what I need it to do.

    Just to say that one of the things I like about Block Lab is that I can create shortcodes from values entered in a block, just as @sunhawk was/is doing.

    By the way, I prefer to use this structure for templates – it seems a bit tidier.

    theme/blocks/blockname/block.php
    theme/blocks/blockname/preview.php

    Plugin Author Luke Carbis

    (@lukecarbis)

    @docdunning That’s my preferred structure too.

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Make block visible on Edit page’ is closed to new replies.