Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Building with Patterns: Introduction and next steps - Νίκος Τσεκούρας

Building with Patterns: Introduction and next steps - Νίκος Τσεκούρας

Έχετε ακούσει για τα block patterns; Μπορείτε να δημιουργήσετε εντυπωσιακά designs σελίδων ή και ολόκληρων themes μόνο με λίγα clicks. Δείτε πως να εισάγετε ένα pattern και να το τροποποιήσετε για τις ανάγκες σας, πως να συσχετίσετε patterns με τύπους block και πως να μεταμορφώσετε υπάρχων περιεχόμενο με patterns. Στο τέλος θα δούμε τι επιφυλάσσει το μέλλον σύμφωνα με τις συζητήσεις στην κοινότητα του WordPress.

WordPress Greek Community

April 09, 2022
Tweet

More Decks by WordPress Greek Community

Other Decks in Technology

Transcript

  1. BUILDING WITH PATTERNS
    INTRODUCTION AND NEXT STEPS

    View full-size slide

  2. BUILDING WITHOUT PATTERNS

    View full-size slide

  3. BUILDING WITH PATTERNS
    PATTERNS EXPLAINED
    ▸ Patterns are pre-made, ready to use layouts that are made up
    of blocks


    ▸ When inserted, they are just blocks


    ▸ Created by designers


    ▸ From a single block to a complete page

    View full-size slide

  4. BUILDING WITH PATTERNS
    WHY USE PATTERNS
    ▸ They empower you to create a complex layout of blocks in a
    matter of seconds


    ▸ Focus on creating amazing content and not on design

    View full-size slide

  5. BUILDING WITH PATTERNS
    HOW TO USE PATTERNS
    ▸ Inserter


    ▸ Patterns Explorer


    ▸ Pattern Directory

    View full-size slide

  6. BUILDING WITH PATTERNS
    CREATING PATTERNS
    ▸ Be creative in block editor and just take the markup


    ▸ register_block_pattern helper function

    View full-size slide

  7. BUILDING WITH PATTERNS
    REGISTERING PATTERNS - THEME AUTHORS
    ▸ patterns property in theme.json - an array of pattern slugs
    from the Pattern Directory


    ▸ From patterns directory in a theme. Each pattern is a PHP
    fi
    le and de
    fi
    nes its metadata using plugin-style headers

    View full-size slide

  8. BUILDING WITH PATTERNS
    SEMANTIC PATTERNS
    ▸ Associate patterns with block types with blockTypes
    argument during registration


    ▸ Pattern suggestions and transformations

    View full-size slide

  9. BUILDING WITH PATTERNS
    NEXT STEPS
    ▸ Pattern suggestion in page/template creation


    ▸ Sections as more stable units - block type


    ▸ Style Partials (theme.json)


    ▸ Locking and Absorb Toolbar


    ▸ Cycling through Patterns

    View full-size slide