Block theme - Full Site Editing Theme

Speaker: Ravi Gadhiya

Transcript

1. Ahmedabad WordPress Meetup Block Theme : Wordpress Full Site Editing (FSE) Ravi Gadhiya
2. Ahmedabad WordPress Meetup • Introduction • Block themes File structure • Global Styles & theme.json • Differences and similarities between classic themes and block themes • Advantages of block themes • Disadvantages/Limitations of block themes Agenda
3. Ahmedabad WordPress Meetup • A block theme is a type of WordPress theme built using blocks. • WordPress Themes with support for full site editing are built with blocks, and are commonly called block themes. • With block themes, you use blocks to create entire pages or websites. • Everything you see on a page is a block. Introduction
4. Ahmedabad WordPress Meetup • WordPress supports block themes from version 5.9 and with limited support in version 5.8 with the Gutenberg plugin. Introduction
5. Ahmedabad WordPress Meetup File structure
6. Ahmedabad WordPress Meetup • Two files are required to activate any theme: index.php and style.css • Block themes must also include a index.html template inside a folder called templates. • If template files are placed in the wrong folder, the theme will not load correctly. • Template parts are optional. If they are included, they must be placed inside a folder called parts. File structure
7. Ahmedabad WordPress Meetup • Theme.json is a new theme configuration for block settings, styles, template parts, and custom templates. • Theme.json can not add new controls to blocks that do not register support. Global Styles & theme.json
8. Ahmedabad WordPress Meetup Classic theme : Uses PHP files to display parts and content. Differences and similarities Block theme : Uses HTML files to display blocks. Uses PHP files as a fallback if WordPress can not find the HTML file. single.html is the equivalent of using single.php
9. Ahmedabad WordPress Meetup Classic theme : Uses the template hierarchy Uses PHP functions such as template tags to display content. Differences and similarities Block theme : Uses the template hierarchy Uses blocks for everything. The post content block is the equivalent of using the_content().
10. Ahmedabad WordPress Meetup Classic theme : Use PHP functions to make text translatable Differences and similarities Block theme : Text in HTML files is not translatable. Block patterns can use PHP functions to make text translatable.
11. Ahmedabad WordPress Meetup Classic theme : Uses PHP functions for if/else conditionals Uses the loop to display different posts and post types Differences and similarities Block theme : Uses block settings to achieve different results Uses the query block and the post template block
12. Ahmedabad WordPress Meetup Classic theme : Can use widget areas (sidebars) and widgets Differences and similarities Block theme : Uses blocks instead of widgets. Widgets included in WordPress have been converted to blocks.
13. Ahmedabad WordPress Meetup Classic theme : Can use the Customizer Must register a navigation menu to include a menu Differences and similarities Block theme : Uses the Site Editor. Can optionally enable the Customizer menu Uses the navigation block
14. Ahmedabad WordPress Meetup Classic theme : Can enqueue custom CSS and scripts Differences and similarities Block theme : Can enqueue custom CSS and scripts but relies more on blocks and the theme.json configuration file
15. Ahmedabad WordPress Meetup Classic theme : Can place template files in the root directory Can place template parts in any directory Differences and similarities Block theme : Places template files in the templates folder Places template parts in the parts folder
16. Ahmedabad WordPress Meetup Classic theme : Can not create and edit site templates like 404 and archive pages in the Site Editor Differences and similarities Block theme : Can create and edit site templates like 404 and archive pages in the Site Editor
17. Ahmedabad WordPress Meetup • Block themes enhances loading performance by loading styles only for rendered blocks on a page. • Block themes are not required to manually enqueue stylesheets for both front-end and editors The benefits
18. Ahmedabad WordPress Meetup • Theme.json handles all aspects of add_theme_support() • Accessibility features such as Skip to content, keyboard navigation, and landmarks are generated automatically without adding additional code The benefits
19. Ahmedabad WordPress Meetup • With a block theme, the user can edit all parts of their website without code • By using the Styles interface, users can customize colors and typography for the website and for the blocks. The benefits
20. Ahmedabad WordPress Meetup • Hard to match pixel perfect design ( Could be more harder to complex design ). • No advanced capabilities like popups, animations, sliders • Still, many external plugins are not fully compatible with new Block Editor. • A bit learning curve for a newbie or a first-time user. Disadvantages
21. Ahmedabad WordPress Meetup • Theme have not any responsive style option • Not provide any ajax based functionality. • Not fully compatible with WPML multilingual plugin. • Not fully compatible with woocommerce plugin. Disadvantages
22. Ahmedabad WordPress Meetup Some references links are as below : • https://developer.wordpress.org/themes/block-t hemes • https://fullsiteediting.com/ • https://fullsiteediting.com/lessons/global-styles/ References
23. Ahmedabad WordPress Meetup Questions ?
24. Ahmedabad WordPress Meetup https://www.linkedin.com/in/gadhiya-ravi/ https://twitter.com/ravii_gadhiya https://www.facebook.com/ravi.gadhiya.50 Thank You !