Request block

Hi @butterlover

Thanks for reaching out and requesting this feature. In order to get this working I need to upgrade the plugin to the latest version of Bootstrap which of course I will do but it may take a while. In the meantime you have two options:

First you could include your own version of Bootstrap and then disable the css and js from the plugin. You can find these options by going to Bootstrap > Dashboard > Global. This way you can include the latest version of Bootstrap and the placeholder classes will become available to you.

The other option is to copy the placeholder CSS in to your themes CSS. The CSS required is below:

.placeholder{
    display:inline-block;
    min-height:1em;
    vertical-align:middle;
    cursor:wait;
    background-color:currentColor;
    opacity:.5
}
.placeholder.btn::before{
    display:inline-block;
    content:""
}
.placeholder-xs{
    min-height:.6em
}
.placeholder-sm{
    min-height:.8em
}
.placeholder-lg{
    min-height:1.2em
}
.placeholder-glow .placeholder{
    -webkit-animation:placeholder-glow 2s ease-in-out infinite;
    animation:placeholder-glow 2s ease-in-out infinite
}
@-webkit-keyframes placeholder-glow{
    50%{
        opacity:.2
    }
}
@keyframes placeholder-glow{
    50%{
        opacity:.2
    }
}
.placeholder-wave{
    -webkit-mask-image:linear-gradient(130deg,#000 55%,rgba(0,0,0,0.8) 75%,#000 95%);
    mask-image:linear-gradient(130deg,#000 55%,rgba(0,0,0,0.8) 75%,#000 95%);
    -webkit-mask-size:200% 100%;
    mask-size:200% 100%;
    -webkit-animation:placeholder-wave 2s linear infinite;
    animation:placeholder-wave 2s linear infinite
}
@-webkit-keyframes placeholder-wave{
    100%{
        -webkit-mask-position:-200% 0%;
        mask-position:-200% 0%
    }
}
@keyframes placeholder-wave{
    100%{
        -webkit-mask-position:-200% 0%;
        mask-position:-200% 0%
    }
}

Once this CSS is in place you can use the placeholder classes to implement your own placeholder layouts. Something like the below will replicate what is on the Bootstrap docs page:

<!-- wp:areoi/card {"block_id":"6536ca37-74eb-4789-a2c6-e6245dda8f89","className":"placeholder-glow"} -->
<!-- wp:areoi/card-body {"block_id":"dde7109a-22d7-485a-87c2-aef89d5545e0"} -->
<!-- wp:areoi/div {"block_id":"33070ec1-568c-4410-8ef3-fe4985c5520e","className":"h5 placeholder col-6"} /-->

<!-- wp:areoi/div {"block_id":"6305ee97-1b96-420b-ba3d-a1f68c27106d","className":"placeholder col-7"} /-->

<!-- wp:areoi/div {"block_id":"3a887091-b88c-4650-bd13-a6666969f339","className":"placeholder col-4"} /-->

<!-- wp:areoi/div {"block_id":"4daf77e7-6ba5-4962-bec1-6dc2c6832140","className":"placeholder col-4"} /-->

<!-- wp:areoi/div {"block_id":"ffa2d08d-0ca8-4d51-9236-b89360923571","className":"placeholder col-6"} /-->

<!-- wp:areoi/div {"block_id":"9d5b9b94-ec17-4c2f-8ad1-0439e0816d40","className":"placeholder col-8"} /-->
<!-- /wp:areoi/card-body -->

<!-- wp:areoi/card-footer {"block_id":"51cd1331-d6fb-4635-baab-4f6097c31d48"} -->
<!-- wp:areoi/button {"block_id":"d0c57efc-9ed4-429c-a668-8c932b23ac9e","className":"btn btn-primary disabled placeholder col-6"} /-->
<!-- /wp:areoi/card-footer -->
<!-- /wp:areoi/card -->

If you are going to re-use this throughout your site it may be best to set this up as a block pattern or reusable block. Below is an example of what you could add to your functions.php file to add the above as a block pattern.

function register_my_patterns() {
	register_block_pattern(
    'areoi/placeholder-glow',
	    array(
	        'title'       => __( 'Placeholder Glow', 'my-plugin' ),
	        'description' => _x( 'A group of glowing placeholders in a card component', 'Block pattern description', 'my-plugin' ),
	        'content'     => '
	        	<!-- wp:areoi/card {"block_id":"de3f3132-02c0-4633-a025-a5bc0e1196ae","className":"placeholder-glow"} -->
				<!-- wp:areoi/card-body {"block_id":"de52d4e4-9ea2-4cc1-b73c-bea3df34f1ec"} -->
				<!-- wp:areoi/div {"block_id":"6246f5c2-a012-4c4b-9df8-ccc31f96be58","className":"h5 placeholder col-6"} /-->

				<!-- wp:areoi/div {"block_id":"bd1fa2b0-7e01-4278-8602-11462d0bf51f","className":"placeholder col-7"} /-->

				<!-- wp:areoi/div {"block_id":"9de052b0-f4ca-476b-bc0c-230223f8a6d2","className":"placeholder col-4"} /-->

				<!-- wp:areoi/div {"block_id":"c638e4af-7cc7-4dc0-960a-2d506ff060a2","className":"placeholder col-4"} /-->

				<!-- wp:areoi/div {"block_id":"ac558cd5-859b-4e89-85c5-26bc0a8f8aca","className":"placeholder col-6"} /-->

				<!-- wp:areoi/div {"block_id":"92385206-e7b0-4308-9c1c-79ffff28d608","className":"placeholder col-8"} /-->
				<!-- /wp:areoi/card-body -->

				<!-- wp:areoi/card-footer {"block_id":"5b097843-e7cc-4c36-92c8-be804ed91617"} -->
				<!-- wp:areoi/button {"block_id":"54b99f30-50db-48a9-8d41-de3e268b92d5","className":"btn btn-primary disabled placeholder col-6"} /-->
				<!-- /wp:areoi/card-footer -->
				<!-- /wp:areoi/card -->
	        ',
	    )
	);
}
add_action( 'init', 'register_my_patterns' );

I know the above solution isn’t ideal but if you could use this for the time being to give me some time to update the plugin then I will send you an update once it has been updated.

Thanks again for flagging this

Miles

I often see placeholders glow loading on this wordpress message, YouTube or other sites. Very interesting. Don’t miss it!

I’m using the generatepress child theme and it’s ideal for me to wait for the update of your plugin. Make me happy with your updates, Miles!

?I appreciate it.

Hi @butterlover

I have just released an update to the plugin which allows you to use the latest version of Bootstrap (5.3.0). To do this you can:

• Upgrade to the latest version
• Then click on Bootstrap down the left hand menu
• Choose the Bootstrap version you would like to use
• Finally click Save and Recompile CSS.

You can watch a video on how to do this here: https://areoi.io/wp-content/uploads/2023/01/Dashboard-?-Staging-—-WordPress.webm

Once you have selected 5.3.0 all of the placeholder classes will become available. I haven’t created a ‘placeholder’ block as they can be used across any component so it’s impossible to create a template that works for everything. But, below are a few examples of the code you can add in the editor to achieve different placeholder templates. To add this code click the three dots in the top right corner of the editor screen and select code editor.

Card Template

<!-- wp:areoi/card {"block_id":"e155c99d-5199-4c78-9ccb-bae109a29fa9","className":"placeholder-glow"} -->
<!-- wp:areoi/card-body {"block_id":"75b7155a-e9cb-4c36-9dac-463aba1be073"} -->
<!-- wp:areoi/div {"block_id":"675137b4-9048-4ed8-b4db-d390f9df5306","className":"h5 placeholder col-6"} /-->
<!-- wp:areoi/div {"block_id":"c0fb6012-33fb-44ca-8132-15c5faa3bdbc","className":"placeholder col-7"} /-->
<!-- wp:areoi/div {"block_id":"92fbf5a7-9433-42b8-ba7c-e75b366b2e71","className":"placeholder col-4"} /-->
<!-- wp:areoi/div {"block_id":"76fd6f4d-fbb5-4ec2-94e5-ef7c20b47c10","className":"placeholder col-4"} /-->
<!-- wp:areoi/div {"block_id":"15ff2823-c57d-4c4b-a1a3-93b6467cae68","className":"placeholder col-6"} /-->
<!-- wp:areoi/div {"block_id":"b7cf6be9-f341-4ad5-b2ac-bc9ac6fc0c02","className":"placeholder col-8"} /-->
<!-- /wp:areoi/card-body -->
<!-- wp:areoi/card-footer {"block_id":"ab2ffa4e-b68a-4675-8a3c-17ef07e93a57"} -->
<!-- wp:areoi/button {"block_id":"b4ba4ec6-94c4-446a-a1b0-3eb00b28b70c","className":"btn btn-primary disabled placeholder col-6"} /-->
<!-- /wp:areoi/card-footer -->
<!-- /wp:areoi/card -->

Text Template

<!-- wp:areoi/div {"block_id":"29f7bbbd-7be3-41aa-acea-bc5ca614919a","className":"placeholder-glow"} -->
<!-- wp:areoi/div {"block_id":"544bae7a-3fad-44f9-8985-23c285b5b6f1","className":"h5 placeholder col-6"} /-->
<!-- wp:areoi/div {"block_id":"5bf4f9fe-ca8c-489c-9786-5c466b89d96f","className":"placeholder col-7"} /-->
<!-- wp:areoi/div {"block_id":"d5c9ecf9-7a65-4896-8f6f-4295588920e4","className":"placeholder col-4"} /-->
<!-- wp:areoi/div {"block_id":"74d3ae29-446a-465c-8213-2fe839b7fde9","className":"placeholder col-4"} /-->
<!-- wp:areoi/div {"block_id":"31f9db93-714c-452e-91bc-10685d832eb9","className":"placeholder col-6"} /-->
<!-- wp:areoi/div {"block_id":"5a2deb7b-153e-41d1-a907-5eebe692dc22","className":"placeholder col-8"} /-->
<!-- /wp:areoi/div -->

Alert Template

<!-- wp:areoi/alert {"block_id":"de77c72d-ad8b-44fd-9569-15a92773939c","className":"placeholder-glow"} -->
<!-- wp:areoi/div {"block_id":"77fd87e1-0d2b-491c-a17d-2b7ea062712a","className":"placeholder col-7"} /-->
<!-- /wp:areoi/alert -->

You can see these in action here https://areoi.io/wp-content/uploads/2023/01/About-–-Staging.webm

These are just a few examples of how you can use it but you could apply it to anything, all you need to do is add the placeholder-glow class to a surrounding block and then inside that block add div blocks with the class placeholder and the relevant col classes eg: placeholder col-6.

As I mentioned in my previous post, if you would like to use the same placeholder templates across your site you should create a block pattern or reusable block which will save you having to recreate the template each time you wish to use it.

Hopefully this resolves your issue but if you need anymore help please don’t hesitate to get back in touch.

Thanks
Miles

This is great progress, Miles!
I’ve seen your success on Staging.webm video

but, sorry Miles I still can’t successfully implement it. I need some “guide” or “youtube video tutorials for Non-Techies” from you to be able to apply it successfully..

and most of all, you are really fast!

Hi @butterlover

I have put a video together that should help you get it working which you can watch here: https://areoi.io/wp-content/uploads/2023/01/creating-placeholder-block.webm

You can also follow the steps below. With this method you will be creating a reusable block that you can then drop in to any page you wish to use it.

Include latest version of Bootstrap

1. Login to your WP admin
2. Click Bootstrap in the left hand menu
3. Select Bootstrap Version 5.1.3 and click Save & Compile CSS

Create a reusable block

1. In the WP admin go to this page https://yourdomain.com/wp-admin/edit.php?post_type=wp_block ( change https://yourdomain.com for your own domain). This should take you to a list of all of your reusable blocks
2. Click Add New and add a title for the page eg: Placeholder
3. Click the three dots in the top right of the screen and select Code Editor
4. Copy and paste the below code into the editor
5. Click Exit Code Editor and you should now see a card with the placeholders in them
6. Publish the post

<!-- wp:areoi/card {"block_id":"0e835cfd-4d8d-4b27-a57e-5ffd18a4dcc0","className":"placeholder-glow"} -->
<!-- wp:areoi/card-body {"block_id":"36c6619f-bc65-41ca-a610-119384419f01"} -->
<!-- wp:areoi/div {"block_id":"5fa793a7-8bcc-4a1f-8b20-5f323a2d2abc","className":"h5 placeholder col-6"} /-->
<!-- wp:areoi/div {"block_id":"524d6390-e909-403e-96bf-2ea3d94e3409","className":"placeholder col-7"} /-->
<!-- wp:areoi/div {"block_id":"284675c6-8909-4535-8003-611a7eb95e53","className":"placeholder col-4"} /-->
<!-- wp:areoi/div {"block_id":"252a8648-8ee5-45c9-b7df-184eedb33128","className":"placeholder col-4"} /-->
<!-- wp:areoi/div {"block_id":"d00f9fc9-6f96-46b8-8562-1ee52e135106","className":"placeholder col-6"} /-->
<!-- wp:areoi/div {"block_id":"ea9a6bf3-80b1-405a-b1c6-0d3d6d8ec438","className":"placeholder col-8"} /-->
<!-- /wp:areoi/card-body -->

<!-- wp:areoi/card-footer {"block_id":"7d940d03-8c40-496e-a68f-3b998fb8875c"} -->
<!-- wp:areoi/button {"block_id":"73b2b0de-04c2-4ed3-94d6-4d7391d83de8","className":"btn btn-primary disabled placeholder col-6"} /-->
<!-- /wp:areoi/card-footer -->
<!-- /wp:areoi/card -->

Add reusable block to page

1. Edit the page that you wish to include the placeholders
2. Click the blue plus to add a new block then click on the Reusable tab
3. Select the reusable placeholder block that you previously created then Publish / Update the page and you should now see the placeholders when you preview the page

Hopefully this is straight forward enough for you but if you continue to struggle please let me know and I will do my best to help.

Thanks

Miles

Awesome, Miles!

Honestly, that really helps, Miles. Now I have new skills and can create placeholder-glow.

However, I just had success implementing it for text (only col-… ). I haven’t been able to apply it to images or anything else.

And haven’t been able to hide this placeholder-glow when my website contents has finished loading. Is there a way to do this, Miles?

Example implementation, I want to implement it as in this facebook post:

https://web.facebook.com/photo/?fbid=10159194097518316&set=g.1113359788719597

it leads to:

https://zaferinadigital.com/topenida/

Miles, can we make a placeholder-glow loading like that website? And it disappears when the content finishes loading.

I’ve asked the site owner, he made it with bootstrap placeholders, by doing code and css. it’s certainly not easy. It’s easier with your method, Miles.

Hi @butterlover

Glad you managed to get the placeholders working. In regards to using the placeholder class on images, you can’t apply the .placeholder class to images instead you would add a div block, add the placeholder class and then set the height so it is the same size as your image. If you change your reusable block code to this you will see what I mean.

<!-- wp:areoi/card {"block_id":"fda5b7d8-ceb3-4bec-b9c2-4878e652ce34","className":"placeholder-glow"} -->
<!-- wp:areoi/card-body {"block_id":"d952b5ec-fd8c-4944-97d6-c67e710c3da1"} -->
<!-- wp:areoi/div {"block_id":"3cc07f25-dc42-4c71-89e5-bd71eb092c54","height_dimension_xs":"200","margin_bottom_xs":"30","className":"placeholder col-12"} /-->
<!-- wp:areoi/div {"block_id":"f5d8ad2a-c422-4e24-8fdb-59f1df0aa21b","className":"placeholder col-7"} /-->
<!-- wp:areoi/div {"block_id":"7a79aa24-b002-41cc-a748-86aa113285ec","className":"placeholder col-4"} /-->
<!-- wp:areoi/div {"block_id":"9dfbb447-f841-439d-92ef-19c6690adb96","className":"placeholder col-4"} /-->
<!-- wp:areoi/div {"block_id":"b3b05317-8657-4650-aa2b-614e1497bb73","className":"placeholder col-6"} /-->
<!-- wp:areoi/div {"block_id":"f933a6f9-06ab-499c-8ed7-83429510ab7d","className":"placeholder col-8"} /-->
<!-- /wp:areoi/card-body -->
<!-- wp:areoi/card-footer {"block_id":"5e6f44a0-bc4c-4b07-824b-0a452501f5ee"} -->
<!-- wp:areoi/button {"block_id":"a7e9d0f6-d434-49cf-b5c1-bbe653d67235","className":"btn btn-primary disabled placeholder col-6"} /-->
<!-- /wp:areoi/card-footer -->
<!-- /wp:areoi/card -->

You won’t be able to achieve the same effect as on the link you provided with just the All Bootstrap Blocks plugin. It would require some custom Javascript that replaces the placeholders with your content once it’s loaded. How you would do this will depend on how you are loading your content.

It’s not possible for me to assist with this as it’s functionality that the plugin doesn’t offer and would require custom code to be written specifically for what you want to achieve to get it working. Sorry I can’t be more help on this bit.

Thanks
Miles