Converting Classic Theme to Blocks Theme - Adding Block Styles
Transform your Classic Theme into a sleek and modern Blocks Theme with this step-by-step video guide! First, we'll take a look at the old ways of styling, such as using HTML & CSS classes and utilizing TinyMCE Buttons. Then, we'll show you the new and improved way of doing it with Block Styles.
In this video, learn how to convert your old Custom post type for a seamless Block Editor Experience, discover how to use the default Block Editor Styling options. Register new Block Styles, enqueue new Block styles CSS assets to give your site editing experience a professional look and cleaner implementation.
Upgrade your skills and take your WordPress site to the next level!
CHAPTERS
00:00 Introduction
00:29 Using HTML & CSS to style
01:04 Using TinyMCE Buttons
01:40 Case for the Block Styles
02:00 Convert CPT for Block Editor Experience
03:17 Use Default Block Editor Styling options
03:47 Use advanced settings to style
04:30 Register new Block Style
07:51 Enqueue new Block styles css
10:25 Enqueue Block styles assets
Code snippet for the task is on https://gist.github.com/bahiirwa/900f...
HOW TO SUPPORT THE CHANNEL
=============================================
Do you like what I am doing?
Join channel membership to get access to perks: / @techiepress Buy me a coffee through https://www.buymeacoffee.com/techiepress
Give via PayPal: https://paypal.me/laurencebahiirwa
Visit https://omukiguy.com/support-my-work/
I am social too:
Facebook: / techiepress-100149655032583
Twitter: / omukiguy
Blog & Newsletter: https://omukiguy.com
Github: https://github.com/yttechiepress
-------------------------------------------------------------------------------
LEARN MORE IN THE WELL CURATED PLAYLISTS BELOW
--------------------------------------------------------------------------------
Learn how to build a plugin from scratch: • Plugins Vs Functions.php - Where shou...
WooCommerce E-Commerce customizations
== Build Free Custom E-commerce Online Shop using WooCommerce - • WooCommerce customizations - Free Wor...
== Build Free Custom Theme for E-commerce Online Shop using WooCommerce -
• Woocommerce Restaurant Shop - Custom ...
====== Build Dynamic Websites with Elementor ======
== Learn the Elementor basics - • Elementor Beginner Tutorials
== Build a custom Elementor Widget from Scratch - • Build Custom Elementor Widgets from s...
====== How to use WordPress Gutenberg Block Editor ======
WordPress 5.4 Gutenberg Blocks Updates
== • WordPress 5.4 Gutenberg Blocks Updates
WordPress Gutenberg blocks for Designers
== • WordPress Basics Training: Gutenberg ...
Gutenberg WordPress Block Editor tutorials for beginners
== • WordPress Basics Training: WordPress ...
Custom WooCommerce Gateway Development from Scratch
== • Build Custom WooCommerce Payment Gateway
WordPress Custom REST API Namespaces, Endpoints and Examples from Scratch
== • Create Custom WordPress REST API POST...
====== WordPress Plugin Development from Scratch ======
Build Most Popular & Most Commented Post Plugin
== • Build WordPress Most Popular & Most C...
Build SMS Plugin with External WordPress API Integration using custom WordPress Databases
== • Build SMS Plugin - External WordPress...
WordPress External APIs Integration Plugin Development
== • WordPress External APIs Integration P...
Convert WordPress to mobile App in Headless WordPress
== Convert WordPress Sports Website into Mobile Application - https://www.youtube.com/playlist?list...
Make GraphQL API endpoints with WordPress Headless CMS WPGraphQL Plugin
== • Make GraphQL API endpoints with WordP...
Customize Your WordPress & ClassicPress
== Build Custom REST API Endpoints with WordPress or ClassicPress - • Build Custom REST API Endpoints with ...
Custom Dashboard Widgets
== • Custom Dashboard Widgets WordPress & ...
Build Custom Admin
== • Custom Admin for WordPress or Classic...
Learn Git
== Git tutorial for writers + software developers for beginners - • Git tutorial for beginners - writers ...
Watch video Converting Classic Theme to Blocks Theme - Adding Block Styles online without registration, duration hours minute second in high quality. This video was added by user TechiePress 29 January 2023, don't forget to share it with your friends and acquaintances, it has been viewed on our site 70 once and liked it 1 people.