Wordpress Full Site Editing

Wordpress Full Site Editing

FSE

Odičan video: A new era of WordPress themes is here: block themes – WordPress.tv

Templates and template parts

WordPress saves Templates as a custom post type called “wp_template”. If WordPress can not find an HTML template file, it will try to find a PHP file in your theme folder and use it as a fallback.

With full site editing, there are three optional template part areas: header, footer, and uncategorized (general).

https://fullsiteediting.com/lessons/global-styles/#h-additional-sections

Best explanation https://fullsiteediting.com/lessons/adding-full-site-editing-features-to-classic-themes/#h-use-cases-for-block-templates

Naming files

Name of file for Template Part must be “slugified” filename, without lowercase, no spaces and no accents. If not, it will behave strangely.

Block, Classic and Hybrid themes

  • A block-based theme or block theme is fully compatible with the full-site editing feature.
    It does not use any PHP templates, and does not rely on the Customizer or widgets.

  • A hybrid theme mixes the traditional theming approach with full-site editing features. A key component here is the theme.json file.

Very important fact on hybrid themes

There are potentially breaking changes that you need to be aware of when you include theme.json in a classic theme and make it hybrid.

The inner div for the group block is removed. This causes problems if you are targeting this div in your CSS.

Repeat:

I do just want to note that adding a theme.json file comes with a few side effects that may surprise someone. For example the inner container div of the group block gets removed which can cause some issues if custom styling depended on the presence of that.


Semantic block patterns

What are Semantic Patterns in WordPress?

blockTypes and postTypes On new page, but not new post? https://make.wordpress.org/core/2022/10/10/miscellaneous-editor-changes-for-wordpress-6-1/#start-content-patterns-for-all-post-types

https://richtabor.com/patterns/#a-closer-look-at-blocktypes Patterns https://make.wordpress.org/core/2022/05/03/page-creation-patterns-in-wordpress-6-0/ for now, it’s for pages only - https://make.wordpress.org/core/2022/05/03/page-creation-patterns-in-wordpress-6-0/#comment-43019


Creation Patterns for other post types

What are Page Creation Patterns in WordPress?

Page Creation Patterns, also for posts https://make.wordpress.org/core/2022/05/03/page-creation-patterns-in-wordpress-6-0/ najzad pronašao dokumentaciju https://github.com/WordPress/gutenberg/pull/41791 ovo je bilo za page: https://github.com/WordPress/gutenberg/issues/38787


Šta je ovo onda?

Block Templates An Introduction to Block Templates in WordPress


Fixing preview of patterns inside inserter

Nisam siguran u ovo: enqueue_block_editor_assets loads the CSS on the top level document of the Block Editor, but add_editor_style() injects it inside the iframe for the site.

cini mi se da mora da pocne na .editor-styles-wrapper da bi bio includeovan u iframe https://github.com/WordPress/gutenberg/issues/38240#issuecomment-1026577922 https://github.com/WordPress/gutenberg/issues/38214#issuecomment-1022172779

Još ponešto: https://github.com/WordPress/gutenberg/issues/40603#issuecomment-1112284351


Great way to distribute block patterns

How to simplify WordPress patterns with content-only block editing

“templateLock”: “contentOnly” attribute at the top-level group block, will enable content-only editing for that particular pattern.

Locking Reusable Blocks

There is a native way to lock reusable blocks that I really like: Reusable block edit locking. But I can’t make it active by default.

So we must use the plugin Lock Reusable Blocks. The settings options for this plugin are located in “Settings > Writing”, which is not immediately obvious.


Employing patterns that include missing blocks

When using pattern with a block that is not installed, the user will see an error. In article, an author doesn’t attempt to automatically install the plugin. Instead, the idea is to not display the pattern at all if there isn’t a block that is within the pattern.

Conditionally Registering Patterns in Themes with Third-Party Blocks


Gutenberg Full Site Editing: Templates

WordPress by default, besides root theme folder also recognizes subfolder page-templates. So we can store global page templates in that folder to keep them organized.

Folder templates can also contain classic PHP template files, but it also can have HTML template files with block tags. HTML files like these are not recognized if put into page-templates. It should be possible to modify HTML templates in UI, but in my hybrid theme it goes with “Saving failed.”

Those ‘single.php’, ‘single-custom_post_type’ and similar templates must be in root folder.

You MUST have index.html in that folder or Template Editor won’t work!


Content and Wide Widths, Explained

Finally, the concepts of “Content” and “Wide” width, as well as “Inner blocks using content width,” are properly explained in Exploring Layout, Alignment, and Dimension in WordPress video and article.

What “align-wide” vs “align-full” exactly mean


Ovo je nešto novo: Contextual Block Patterns What are Contextual Patterns in WordPress? Nick Diego: Builder Basics – Everything You Need to Know About Patterns – WordPress.tv at 50:00 minutes mark


An Overview of Block Theme Templates - Builders Templates /templates/ can be HTML also


Variable fonts

Prioritize the use of variable fonts

The Rise of Google Fonts Font Techniques for Modern WordPress Themes


How to Use Block Template Parts in a Classic WordPress Theme

How to use PHP templates in block themes - Full Site Editing How to Use Block Template Parts in a Classic WordPress Theme Block-Based Template Parts: A Happy Medium Between Classic and Block Themes - Gutenberg Times Building a Block-Based Header Template in a Classic Theme - Gutenberg Times WordPress Block Templates – Rich Tabor WordPress’s get_template_part() function: What and Why • WPShout

date 18. Nov 2022 | modified 29. Dec 2023
filename: Wordpress » Gutenberg » Full Site Editing FSE