Φτιαγμένο για όσους κάνουν επεξεργασία

Ευρύτερο πλαίσιο πεδίων, στοιχεία ελέγχου γραμμής εργαλείων, πολιτικές επεξεργαστή και κατάλογος διαχείρισης, ρυθμισμένα στο block.json και στο blockstudio.json.

Χώρος για κάθε πεδίο

Οι επαναλήπτες, τα πεδία κώδικα και οι ένθετες ομάδες δεν χωρούν εύκολα στην πλευρική στήλη. Η κεφαλίδα του μπλοκ περιλαμβάνει ένα κουμπί Open Expanded Editor που ανοίγει τα ίδια πεδία σε ένα ευρύτερο πλαίσιο από τα δεξιά. Πατήστε «Τέλος», το φόντο ή το Esc για να κλείσει, ενώ το μπλοκ παραμένει επιλεγμένο.

Πρόκειται για το ίδιο πρόγραμμα απόδοσης πεδίων που γράφει τα ίδια χαρακτηριστικά, επομένως η προεπισκόπηση ενημερώνεται καθώς πληκτρολογείτε και δεν απαιτείται ρύθμιση block.json. Τα πεδία που πρέπει να βρίσκονται δίπλα στο περιεχόμενο μπορούν να μεταφερθούν στη γραμμή εργαλείων του μπλοκ με το "position": "toolbar".

Εκτεταμένος επεξεργαστής

block.json

{
  "name": "my-theme/hero",
  "title": "Hero",
  "blockstudio": {
    "attributes": [
      {
        "id": "alignment",
        "type": "select",
        "label": "Alignment",
        "position": "toolbar",
        "options": [
          { "value": "left", "label": "Left" },
          { "value": "center", "label": "Center" },
          { "value": "right", "label": "Right" }
        ]
      },
      {
        "id": "title",
        "type": "text",
        "label": "Title"
      }
    ]
  }
}

Αυτόματη συμπλήρωση από το CSS σας

Καταγράψτε τα URL των stylesheets στο blockEditor.cssClasses και στο cssVariables, ενώ οι κλάσεις και τα πεδία κώδικα υποδεικνύουν τι ορίζουν αυτά τα αρχεία.

Ενδείξεις κατά την αιώρηση και την επιλογή

Ορίστε το blockEditor.enhance για να προσθέσετε στον επεξεργαστή τις ενδείξεις αιώρησης και επιλογής του Blockstudio.

Ποιοι έχουν πρόσβαση στον επεξεργαστή

Τα users.ids και users.roles στο blockstudio.json ορίζουν τα ID χρηστών και τους ρόλους που έχουν πρόσβαση στον επεξεργαστή με Blockstudio.

Στη γλώσσα του πελάτη σας

Τα στοιχεία ελέγχου πεδίων, η οθόνη διαχείρισης και ο καμβάς χρησιμοποιούν τη γλώσσα του ιστότοπου ή τη γλώσσα προφίλ κάθε χρήστη, με μεταφράσεις που περιλαμβάνονται στο πακέτο.

Στοιχεία για χρήση μόνο στον επεξεργαστή

Το editor.assets στο blockstudio.json παραθέτει πρόσθετα στοιχεία που πρέπει να φορτωθούν στον editor.

Πολυμέσα στο αρχικό payload

Τα πεδία Files διαβάζουν δεδομένα συνημμένων από το αρχικό payload του επεξεργαστή, μέσα από ένθετες ομάδες, καρτέλες και επαναλήπτες, πριν υποβάλουν αίτημα στο endpoint πολυμέσων.

Ένα αίτημα προεπισκόπησης κάθε φορά

Ένα νεότερο αίτημα προεπισκόπησης για ένα μπλοκ ακυρώνει το προηγούμενο στο πρόγραμμα περιήγησης, ενώ στο μεταξύ η τρέχουσα προεπισκόπηση παραμένει στην οθόνη.

Κάθε μπλοκ διατηρεί τις τιμές του

Τα μπλοκ που έχουν επιλεγεί ταυτόχρονα διατηρούν τις δικές τους τιμές, ενώ οι ενέργειες αναίρεσης και επανάληψης περιλαμβάνουν τα πεδία RichText και της πλευρικής γραμμής.

Απενεργοποιήστε ένα πεδίο και κρατήστε την τιμή του

Ένας συντάκτης μπορεί να απενεργοποιήσει ένα πεδίο από τον επιθεωρητή: περάστε τον δείκτη πάνω από το αριστερό του άκρο μέχρι να εμφανιστεί το μπλε περίγραμμα και έπειτα κάντε κλικ. Το πεδίο γίνεται ημιδιαφανές, η τιμή του παραμένει αποθηκευμένη και το μπλοκ σταματά να το αποδίδει μέχρι να το ενεργοποιήσει ξανά κάποιος.

Το ίδιο ισχύει για μεμονωμένα στοιχεία σε ένα πεδίο αρχείων, ώστε μία εικόνα να μπορεί να παραμείνει κρυφή ενώ εμφανίζονται οι υπόλοιπες. Ορίστε το "switch": true για να δώσετε σε ένα πεδίο ορατό διακόπτη και διαβάστε το $a['_disabled'] όταν ένα πρότυπο χρειάζεται να γνωρίζει την κατάστασή του.

Απενεργοποίηση χαρακτηριστικών

block.json

{
  "name": "acme/card",
  "title": "Card",
  "blockstudio": {
    "attributes": [
      {
        "id": "title",
        "type": "text",
        "label": "Title",
        "switch": true
      }
    ]
  }
}

index.php

<?php if (!empty($a['_disabled']) && in_array('title', $a['_disabled'])) : ?>
  <p>No title on this one.</p>
<?php else : ?>
  <h1><?php echo esc_html($a['title']); ?></h1>
<?php endif; ?>

Προεπισκόπηση στον εισαγωγέα

Προσθέστε ένα κλειδί example στο block.json και το μπλοκ εμφανίζει προεπισκόπηση όταν ένας συντάκτης περνά τον δείκτη πάνω του στον εισαγωγέα μπλοκ. Για ένα μπλοκ που φαίνεται σωστό με τις προεπιλεγμένες τιμές του, αρκεί ένα κενό αντικείμενο.

Δώστε στο example.attributes ενδεικτικές τιμές για τα δικά σας πεδία ή στο example.innerBlocks ένα αρχικό δέντρο για ένα μπλοκ που περιέχει άλλα μπλοκ.

Προεπισκόπηση εισαγωγέα

block.json

{
  "name": "my-theme/hero",
  "title": "Hero",
  "category": "text",
  "example": {
    "attributes": {
      "title": "This title will be shown in the preview"
    }
  },
  "blockstudio": true
}

index.php

<h1><?php echo esc_html($a['title']); ?></h1>

Πολιτική επεξεργαστή σε ένα αρχείο

Καθορίστε τι προσφέρει ο εισαγωγέας χωρίς κώδικα σύνδεσης θέματος. Το blockEditor.blocks δέχεται λίστες αποδοχής και αποκλεισμού με χαρακτήρες wildcard, όπως το core/*, μετονομάζει και ταξινομεί κατηγορίες, αφαιρεί στυλ μπλοκ που έχουν καταχωριστεί στο PHP, αποκρύπτει παλιά widget και μπορεί να απενεργοποιήσει τον κατάλογο μπλοκ.

Το blockEditor.patterns ενεργοποιεί ή απενεργοποιεί τις πηγές μοτίβων core, remote, theme και Blockstudio και φιλτράρει τις κατηγορίες τους. Το blockEditor.media απενεργοποιεί το Openverse και περιορίζει τα μεγέθη εικόνων από τα οποία μπορούν να επιλέξουν οι συντάκτες.

Ρυθμίσεις επεξεργαστή μπλοκ

blockstudio.json

{
  "blockEditor": {
    "blocks": {
      "allow": ["core/*", "my-theme/*"],
      "deny": ["core/embed", "core/freeform"],
      "directory": false,
      "categories": {
        "rename": { "text": "Writing" },
        "order": ["my-theme", "text", "media"]
      },
      "styles": {
        "deny": { "my-theme/card": ["outline"] }
      },
      "legacyWidgets": { "hide": ["archives", "calendar"] }
    },
    "patterns": {
      "core": false,
      "remote": false,
      "categories": { "deny": ["gallery"] }
    },
    "media": {
      "openverse": false,
      "imageSizes": { "allow": ["thumbnail", "large"] }
    }
  }
}

Άμεση αρχική εμφάνιση

Τα μπλοκ Blockstudio αποδίδονται στον διακομιστή. Ο επεξεργαστής προφορτώνει το αποδομένο αποτέλεσμα των μπλοκ που υπάρχουν ήδη στην ανάρτηση, συμπεριλαμβανομένων των ένθετων μπλοκ σε συγχρονισμένα μοτίβα, και το επαναχρησιμοποιεί για την αρχική εμφάνιση αντί να στέλνει ξεχωριστό αίτημα απόδοσης για κάθε αποθηκευμένο μπλοκ.

Ο κώδικας, οι κλάσεις, τα χαρακτηριστικά και τα στοιχεία ελέγχου WYSIWYG φορτώνονται όταν εμφανιστούν για πρώτη φορά, επομένως τα μη επιλεγμένα μπλοκ δεν τα φορτώνουν ποτέ. Ένα μπλοκ που δεν χρειάζεται ζωντανή προεπισκόπηση μπορεί να ορίσει το disableLoading και να εμφανίσει ένα σύμβολο κράτησης θέσης, ενώ όλα τα πεδία παραμένουν επεξεργάσιμα.

Φόρτωση επεξεργαστή

block.json

{
  "name": "my-theme/map",
  "title": "Map",
  "blockstudio": {
    "blockEditor": {
      "disableLoading": true
    }
  }
}

blockstudio.json

{
  "blockEditor": {
    "disableLoading": true
  }
}

Προεπισκοπήσεις που λειτουργούν όπως η σελίδα

Το Interactivity API φορτώνεται μέσα στο iframe του επεξεργαστή, ώστε τα data-wp-context, οι bindings, οι event handlers και οι ενέργειες του store σας να εκτελούνται στον καμβά. Τα ενσωματωμένα στοιχεία bsui/* βασίζονται σε αυτό, έτσι ένα παράθυρο διαλόγου ανοίγει και ένα αναπτυσσόμενο μενού επιλογών εμφανίζεται καθώς επεξεργάζεστε.

Οι σύνδεσμοι στην προεπισκόπηση δεν οδηγούν ποτέ αλλού, είτε κάνετε κλικ, τους ανοίγετε με πλήκτρο τροποποίησης είτε τους ενεργοποιείτε από το πληκτρολόγιο, ενώ το κλικ εξακολουθεί να επιλέγει το μπλοκ. Με το assets.reset.enabled, οι κλάσεις body του θέματος αντιγράφονται στον καμβά, ώστε να ταιριάζουν εκεί και επιλογείς όπως το .brand-a .site-card.

Διαδραστικότητα

block.json

{
  "name": "my-theme/disclosure",
  "title": "Disclosure",
  "blockstudio": {
    "interactivity": true
  }
}

functions.php

<?php
add_filter('blockstudio/editor/canvas/body_class', function (array $classes) {
  return array_values(array_diff($classes, ['logged-in']));
});

Καταγραφή στο Εργαλεία > Blockstudio

Η οθόνη διαχείρισης εμφανίζει όσα καταχώρισε το Blockstudio από το σύστημα αρχείων: μπλοκ, επεκτάσεις, πεδία, σελίδες με την κατάσταση συγχρονισμού τους και σχήματα db.php, σε εγγενείς πίνακες DataViews του WordPress. Μια προβολή Databases περιηγείται στις εγγραφές κάθε σχήματος, οι οποίες ανακτώνται και εμφανίζονται σε σελίδες μέσω των REST API.

Όταν το blocks.json του θέματος ορίζει μητρώα, μια προβολή Registry εμφανίζει τα μπλοκ τους και τα εισάγει στον κατάλογο μπλοκ σας από το wp-admin. Η οθόνη είναι διαθέσιμη σε χρήστες με manage_options, ενώ το φίλτρο blockstudio/admin/enabled την απενεργοποιεί.

Οθόνη διαχείρισης

blocks.json

{
  "$schema": "https://blockstudio.dev/schema/blocks.json",
  "directory": "blockstudio",
  "registries": {
    "ui": "https://blocks.example.com/registry.json"
  }
}

functions.php

<?php
add_filter('blockstudio/admin/enabled', '__return_false');

Plus

Το επίσημο κιτ επεκτάσεων

Premium πρότυπα ιστοτόπων, οδηγίες συστήματος AI και ιδιωτική κοινότητα Discord. Εφάπαξ αγορά, ενημερώσεις εφ’ όρου ζωής.

500+ πρότυπα ιστοτόπων
Οδηγίες συστήματος AI
Ενημερώσεις εφ’ όρου ζωής
Ιδιωτική κοινότητα Discord

Αποκτήστε το Plus