Warsztat #1: Przenieś swój pierwszy szablon z Figmy do FSE w Gutenbergu

Aktualizacja 27.07.2023 12:00

Film nadal nie jest gotowy – ładuję baterię i mam nadzieję, że od 07.08 wracam z kanałem pełną parą 🙂

Szablon do Figmy – podstawowy widok

Wstęp do FSE w WordPressie

• Możliwość edycji całej strony i każdego szablonu z poziomu panelu administracyjnego,
• Spójność dzięki stylom globalnym,
• Szybkość

Motyw wspierający FSE w Gutenbergu

Na szkoleniu wykorzystamy twentytwentythree.

Tworzenie motywu potomnego dla twentytwentythree

Plik style.css

/*
Theme Name: Twenty Twenty-Three Child
Template: twentytwentythree
*/

Plik theme.json

{
	"$schema": "https://schemas.wp.org/trunk/theme.json",
	"version": 2,
	"settings": {
        	"color": {
			"palette": [
				{
					"color": "#ffffff",
					"name": "Base",
					"slug": "base"
				},
				{
					"color": "#000000",
					"name": "Contrast",
					"slug": "contrast"
				},
				{
					"color": "#E2A146",
					"name": "Primary",
					"slug": "primary"
				},
				{
					"color": "#345C00",
					"name": "Secondary",
					"slug": "secondary"
				},
				{
					"color": "#F6F6F6",
					"name": "Tertiary",
					"slug": "tertiary"
				}
			]
		},
		"layout": {
			"contentSize": "650px",
			"wideSize": "1270px"
		},
		"typography": {
			"fontFamilies": [
                
			]
		}
    },
    "styles": {
		"blocks": {
		},
		"elements": {
		}
    },
	"templateParts": [

	]
}

Plik functions.php

<?php

Podstawowa struktura motywu potomnego

• assets/fonts

• assets/scripts/fse-gutenberg.js
• assets/styles/main.css
• parts/
  to po prostu fragmenty szablonu takie jak: nagłówek, stopka
• templates/

Dołączanie pliku CSS do motywu

Chodzi o sam front-end.

function lw_enqueue_styles() {
        wp_enqueue_style( 'twenty-twenty-three-style', get_stylesheet_directory_uri() .'/assets/styles/main.css' );
}
add_action('wp_enqueue_scripts', 'lw_enqueue_styles');

Dołączenie pliku JS do obsługi Gutenberga

W tym pliku pokażę przykładowe rejestrowanie stylów w JSie.

function lw_enqueue_fse_scripts() {
        wp_enqueue_script(
            'fse-gutenberg',
            get_stylesheet_directory_uri() . '/assets/scripts/fse-gutenberg.js',
            array( 'wp-blocks', 'wp-dom-ready', 'wp-edit-post' ),
            filemtime( plugin_dir_path( __FILE__ ) . '/assets/scripts/fse-gutenberg.js' )
        );
    }
    add_action( 'enqueue_block_editor_assets', 'lw_enqueue_fse_scripts' );

Dodawanie własnej palety kolorów

settings.color.palette

Dodawanie własnych fontów do FSE Gutenberga

settings.typography.fontFamilies

{
	"fontFamily": "\"BeautifulMess\", sans-serif",
	"name": "BeautifulMess",
	"slug": "beautifulmess",
	"fontFace": [
		{
			"fontFamily": "BeautifulMess",
			"fontStretch": "normal",
			"fontStyle": "normal",
			"fontWeight": "200 900",
			"src": [
				"file:./assets/fonts/BeautifulMess.woff2"
			]
		}
	]
}

{
	"fontFamily": "\"Futura PT\", serif",
	"name": "Futura PT",
	"slug": "futura-pt",
	"fontFace": [
		{
			"fontFamily": "Futura PT",
			"fontStretch": "normal",
			"fontStyle": "normal",
			"fontWeight": "200",
			"src": [
				"file:./assets/fonts/FuturaPTBook.woff2"
			]
		},
		{
			"fontFamily": "Futura PT",
			"fontStretch": "normal",
			"fontStyle": "normal",
			"fontWeight": "300",
			"src": [
				"file:./assets/fonts/FuturaPTLight.woff2"
			]
		}
	]
}

Rejestrowanie nowego stylu poprzez funkcję register_block_style()

if( function_exists('register_block_style') ) {

        register_block_style(
            'core/group',
            array(
                'name' => 'fixed',
                'label' => __('Position Fixed', 'lw'),
                'is_default' => false
            )
        );

        register_block_style(
            'core/list',
            array(
                'name' => 'heart',
                'label' => __('Heart', 'lw'),
                'is_default' => false
            )
        );

        register_block_style(
            'core/list',
            array(
                'name' => 'heart-white',
                'label' => __('Heart white', 'lw'),
                'is_default' => false
            )
        );

}

Umożliwienie uploadowania plików SVG

    function lw_upload_mimes( $mimes ) {
	
        $mimes['svg']  = 'image/svg+xml';
        
        return $mimes;
    }
    
    add_filter( 'upload_mimes', 'lw_upload_mimes' );

Rejestrowanie nowego stylu poprzez JSa

wp.blocks.registerBlockStyle( 'core/image', {
    name: 'figma',
    label: 'Figma',
} );

wp.blocks.registerBlockStyle( 'core/post-featured-image', {
    name: 'figma',
    label: 'Figma',
} );

wp.blocks.registerBlockStyle( 'core/button', {
    name: 'anzac',
    label: 'Anzac',
} );

wp.blocks.registerBlockStyle( 'core/button', {
    name: 'anzac-contour',
    label: 'Anzac contour',
} );

wp.blocks.registerBlockStyle( 'core/read-more', {
    name: 'wp-element-button',
    label: 'Read More Button',
    isDefault: true
} );

Szybkie ostylowanie w pliku main.css

.is-style-fixed {

    position: fixed;
    top: 0;
    left: 0;

    width: 100%;

    filter: drop-shadow(0px 10px 64px rgba(0, 0, 0, 0.05));

    z-index: 5;

}

Dołączenie pliku CSS do edytora Gutenberg

function lw_theme_add_editor_styles() {
        add_editor_style( '/assets/styles/main.css' );
}
add_action( 'after_setup_theme', 'lw_theme_add_editor_styles' );

Zmiana globalnej klasy w danym elemencie

function lw_read_more_classname($block_content) {    

        $block_content = str_replace('wp-block-read-more', 'wp-block-button__link wp-element-button', $block_content);
        
        return $block_content;

}

add_filter('render_block_core/read-more', 'lw_read_more_classname');

Całość motywu potomnego