편집하는 사람을 위해 제작

넓은 필드 패널, 도구 모음 컨트롤, 편집기 정책, 관리 화면의 인벤토리를 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에서 자동 완성

blockEditor.cssClasses 및 cssVariables의 스타일시트 URL을 나열하고, 클래스와 코드 필드에서 각 파일의 정의 내용을 확인하세요.

마우스 오버 및 선택 표시

blockEditor.enhance를 설정해 편집기에 Blockstudio의 마우스 오버 및 선택 표시를 추가하세요.

편집기 접근 권한이 있는 사용자

blockstudio.json의 users.ids 및 users.roles은 Blockstudio 편집기 접근 권한이 있는 사용자 ID와 역할을 지정합니다.

클라이언트의 언어로

필드 컨트롤, 관리자 화면, 캔버스는 번들 번역을 사용해 사이트 언어 또는 각 사용자의 프로필 언어로 표시됩니다.

편집기에만 적용되는 에셋

editor.assets의 blockstudio.json에는 편집기에서 불러올 추가 에셋이 나열됩니다.

초기 페이로드에 포함된 미디어

파일 필드는 미디어 엔드포인트에 요청하기 전에 중첩 그룹, 탭, 반복 필드까지 포함해 편집기의 초기 페이로드에서 첨부 파일 데이터를 읽습니다.

한 번에 하나의 미리 보기 요청

블록의 새 미리 보기 요청이 이전 요청을 브라우저에서 취소하며, 그동안 현재 미리 보기는 화면에 계속 표시됩니다.

각 블록은 자체 값을 유지

여러 블록을 선택해도 각 블록은 자체 값을 유지하며, 실행 취소 및 다시 실행에는 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; ?>

삽입기 미리보기

block.json에 example 키를 추가하면 편집기가 블록 삽입기에서 블록 위에 마우스를 올렸을 때 미리보기를 표시합니다. 기본값만으로 모양이 완성되는 블록이라면 빈 객체만으로 충분합니다.

자체 필드의 샘플 값은 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은 core/* 같은 와일드카드를 포함한 허용 및 거부 목록을 받고, 카테고리 이름을 바꾸고 순서를 정하며, PHP에 등록된 블록 스타일을 제거하고, 레거시 위젯을 숨기며, 블록 디렉터리를 끌 수 있습니다.

blockEditor.patterns은 코어, 원격, 테마 및 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, 바인딩, 이벤트 핸들러 및 스토어 동작이 캔버스에서 실행됩니다. 번들 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 스키마가 기본 WordPress DataViews 테이블에 표시됩니다. 데이터베이스 보기에서는 REST API를 통해 가져오고 페이지로 나눈 각 스키마의 레코드를 둘러볼 수 있습니다.

테마의 blocks.json가 레지스트리의 이름을 지정하면 레지스트리 보기에 해당 레지스트리의 블록이 표시되며, 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

공식 확장 키트

프리미엄 사이트 템플릿, AI 시스템 지침, 비공개 Discord 커뮤니티를 제공합니다. 한 번 구매하면 업데이트를 평생 받을 수 있습니다.

500개 이상의 사이트 템플릿
AI 시스템 지침
평생 업데이트
비공개 Discord 커뮤니티

Plus 이용하기