Title: Request block Last modified: January 9, 2023 --- # Request block * Resolved [Butter Zain](https://wordpress.org/support/users/butterlover/) * (@butterlover) * [3 years, 4 months ago](https://wordpress.org/support/topic/request-block/) * [Placeholders · Bootstrap v5.3 (getbootstrap.com)](https://getbootstrap.com/docs/5.3/components/placeholders/) * Can you add bootstrap placehoder glow block? * The page I need help with: _[[log in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Frequest-block%2F%3Foutput_format%3Dmd&locale=en_US) to see the link]_ Viewing 7 replies - 1 through 7 (of 7 total) * Plugin Author [all_bootstrap_blocks](https://wordpress.org/support/users/areoimiles/) * (@areoimiles) * [3 years, 4 months ago](https://wordpress.org/support/topic/request-block/#post-16357058) * Hi [@butterlover](https://wordpress.org/support/users/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: * ```wp-block-code .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-block-code ``` * 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. * ```wp-block-code 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' => ' ', ) ); } 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 * Thread Starter [Butter Zain](https://wordpress.org/support/users/butterlover/) * (@butterlover) * [3 years, 4 months ago](https://wordpress.org/support/topic/request-block/#post-16360662) * 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. * Plugin Author [all_bootstrap_blocks](https://wordpress.org/support/users/areoimiles/) * (@areoimiles) * [3 years, 4 months ago](https://wordpress.org/support/topic/request-block/#post-16384041) * Hi [@butterlover](https://wordpress.org/support/users/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](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-block-code ``` * **Text Template** * ```wp-block-code ``` * **Alert Template** * ```wp-block-code ``` * You can see these in action here [https://areoi.io/wp-content/uploads/2023/01/About-–-Staging.webm](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 * Thread Starter [Butter Zain](https://wordpress.org/support/users/butterlover/) * (@butterlover) * [3 years, 4 months ago](https://wordpress.org/support/topic/request-block/#post-16395219) * 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! * Plugin Author [all_bootstrap_blocks](https://wordpress.org/support/users/areoimiles/) * (@areoimiles) * [3 years, 4 months ago](https://wordpress.org/support/topic/request-block/#post-16399036) * Hi [@butterlover](https://wordpress.org/support/users/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](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](https://yourdomain.com/wp-admin/edit.php?post_type=wp_block)( change [https://yourdomain.com](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-block-code ``` * **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 * Thread Starter [Butter Zain](https://wordpress.org/support/users/butterlover/) * (@butterlover) * [3 years, 4 months ago](https://wordpress.org/support/topic/request-block/#post-16405946) * 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](https://web.facebook.com/photo/?fbid=10159194097518316&set=g.1113359788719597) * it leads to: * [https://zaferinadigital.com/topenida/](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. * Plugin Author [all_bootstrap_blocks](https://wordpress.org/support/users/areoimiles/) * (@areoimiles) * [3 years, 4 months ago](https://wordpress.org/support/topic/request-block/#post-16410799) * Hi [@butterlover](https://wordpress.org/support/users/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-block-code ``` * 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 Viewing 7 replies - 1 through 7 (of 7 total) The topic ‘Request block’ is closed to new replies. * ![](https://ps.w.org/all-bootstrap-blocks/assets/icon-256x256.gif?rev=2617070) * [All Bootstrap Blocks](https://wordpress.org/plugins/all-bootstrap-blocks/) * [Frequently Asked Questions](https://wordpress.org/plugins/all-bootstrap-blocks/#faq) * [Support Threads](https://wordpress.org/support/plugin/all-bootstrap-blocks/) * [Active Topics](https://wordpress.org/support/plugin/all-bootstrap-blocks/active/) * [Unresolved Topics](https://wordpress.org/support/plugin/all-bootstrap-blocks/unresolved/) * [Reviews](https://wordpress.org/support/plugin/all-bootstrap-blocks/reviews/) * 7 replies * 2 participants * Last reply from: [all_bootstrap_blocks](https://wordpress.org/support/users/areoimiles/) * Last activity: [3 years, 4 months ago](https://wordpress.org/support/topic/request-block/#post-16410799) * Status: resolved