WordPress를 위한 개발이 지금 이상하다는 것을 인정합시다. WordPress를 처음 사용하거나 오랫동안 사용해 온 사용자에게 다음을 포함한 "전체 사이트 편집"(FSE) 기능 도입 블록 편집기 (WordPress 5.0) 및 사이트 편집자 (WordPress 5.9)는 WordPress 테마와 플러그인을 구축하는 전통적인 방식을 뒤집었습니다.
블록에디터를 처음 접한지 XNUMX년이 지났지만 문서가 부족하거나 구식이어서 개발이 어렵습니다. 그것은 FSE 기능이 얼마나 빨리 움직이는지에 대한 진술에 가깝습니다. Geoff는 최근 게시물에서 한탄했습니다..
적절한 사례: 2018년, 입문 시리즈 구텐베르그 개발에 대한 정보가 바로 여기 CSS-tricks에 게시되었습니다. 그 이후로 시대가 바뀌었고, 그 개발 스타일이 여전히 유효하지만, 권장하지 않음 더 이상(게다가, create-guten-block 기반 프로젝트도 더 이상 유지되지 않습니다.
이 기사에서는 현재 방법론을 따르는 방식으로 WordPress 블록 개발을 시작하는 데 도움을 주고자 합니다. 네, 이것이 출판된 후에는 상황이 매우 잘 바뀔 수 있습니다. 그러나 시간이 지남에 따라 도구가 발전하더라도 핵심 아이디어는 동일하게 유지될 가능성이 높기 때문에 블록 개발의 본질을 잘 포착할 수 있는 방식으로 집중하려고 합니다.
다음과 같은 용어가 의미하는 것과 혼동되는 부분부터 시작하겠습니다. 블록. WordPress 5.0으로 이어지는 이러한 기능에 적용된 모든 개발의 코드명은 “구텐베르크" — 알다시피, 발명가 인쇄기.
그 이후로 "구텐베르크"는 블록에디터, 사이트에디터 등 블록과 관련된 모든 것을 설명하는 데 사용되어 일부 사람들은 이름을 경멸하다. 모든 것을 끝내기 위해 다음이 있습니다. 구텐베르크 플러그인 실험 기능이 포함 가능성에 대해 테스트되는 곳. 그리고 이 모든 것을 "전체 사이트 편집"이라고 부르는 것이 문제를 해결할 수 있다고 생각한다면, 그것에 대한 우려도 있다..
따라서 이 기사에서 "블록"을 참조할 때 WordPress 블록 편집기에서 콘텐츠를 생성하기 위한 구성 요소를 의미합니다. 블록은 페이지 또는 게시물에 삽입되며 특정 유형의 콘텐츠에 대한 구조를 제공합니다. WordPress는 단락, 목록, 이미지, 비디오 및 오디오와 같은 일반적인 콘텐츠 유형에 대한 소수의 "핵심" 블록과 함께 제공됩니다. 몇 가지를 지명하다.
이러한 코어 블록 외에도 맞춤형 블록도 생성할 수 있습니다. 이것이 WordPress 블록 개발에 관한 것입니다(기능을 수정하기 위해 핵심 블록을 필터링하는 것도 있지만 아직 필요하지 않을 것입니다).
블록이 하는 일
블록 생성에 대해 알아보기 전에 먼저 블록이 내부적으로 어떻게 작동하는지 이해해야 합니다. 그것은 확실히 나중에 우리에게 엄청난 좌절감을 줄 것입니다.
내가 블록에 대해 생각하는 방식은 다소 추상적입니다. 나에게 블록은 일부 콘텐츠를 나타내는 속성(속성이라고 함)이 있는 엔티티입니다. 이것이 꽤 모호하게 들린다는 것을 알고 있지만, 나와 함께 있어 주십시오. 블록은 기본적으로 두 가지 방식으로 나타납니다. 블록 편집기의 그래픽 인터페이스 또는 데이터베이스의 데이터 청크입니다.
WordPress 블록 편집기를 열고 Pullquote 블록과 같은 블록을 삽입하면 멋진 인터페이스를 얻을 수 있습니다. 해당 인터페이스를 클릭하고 인용된 텍스트를 편집할 수 있습니다. 블록 편집기 UI의 오른쪽에 있는 설정 패널은 텍스트를 조정하고 블록의 모양을 설정하는 옵션을 제공합니다.
멋진 인용구를 만들고 게시를 누르면 전체 게시물이 데이터베이스에 저장됩니다. wp_posts 테이블. 이것은 구텐베르크 때문에 새로운 것이 아닙니다. 그것이 항상 작동하는 방식입니다. WordPress는 데이터베이스의 지정된 테이블에 게시물 콘텐츠를 저장합니다. 하지만 새로운 점은 Pullquote 블록의 표현 에 저장되는 콘텐츠의 일부입니다. post_content 필드 wp_posts 테이블.
이 표현은 어떻게 생겼습니까? 살펴보세요:
It is not an exaggeration to say that peas can be described as nothing less than perfect spheres of joy.
The Encyclopedia of world peas
일반 HTML처럼 보이죠? 이것은 기술 용어로 "직렬화된" 블록입니다. HTML 주석의 JSON 데이터를 확인합니다. "textAlign": "right". 그건 기인하다 - 블록과 관련된 속성.
블록 편집기를 닫았다가 잠시 후 다시 엽니다. 관련 내용은 post_content 필드는 블록 편집기에 의해 검색됩니다. 그런 다음 편집기는 검색된 콘텐츠를 구문 분석하고 이를 발견할 때마다 다음을 수행합니다.
...
...그것은 스스로에게 큰 소리로 말합니다.
좋아, 그것은 나에게 Pullquote 블록처럼 보입니다. 흠.. 속성도 있습니다... 속성에서 편집기의 Pullquote 블록에 대한 그래픽 인터페이스를 구성하는 방법을 알려주는 JavaScript 파일이 있습니다. 이 블록을 모든 영광으로 만들기 위해 지금 그렇게 해야 합니다.
블록 개발자의 임무는 다음과 같습니다.
WordPress에 특정 유형의 블록을 등록하고 싶다고 등의 세부 정보를 제공합니다.
블록 편집기에 JavaScript 파일을 제공하면 편집기에서 블록을 렌더링하는 동시에 데이터베이스에 저장하기 위해 "직렬화"하는 데 도움이 됩니다.
스타일 및 글꼴과 같이 블록의 적절한 기능에 필요한 추가 리소스를 제공합니다.
한 가지 주목해야 할 점은 직렬화된 데이터에서 그래픽 인터페이스로 또는 그 반대로의 이 모든 변환이 블록 편집기에서만 발생한다는 것입니다. 프런트 엔드에서는 콘텐츠가 저장된 방식대로 정확하게 표시됩니다. 따라서 어떤 의미에서 블록은 데이터베이스에 데이터를 저장하는 멋진 방법입니다.
바라건대, 이것은 블록이 어떻게 작동하는지에 대한 명확성을 제공합니다.
WordPress 블록 개발 시작하기
블록은 플러그인일 뿐입니다
블록은 플러그인일 뿐입니다. 글쎄, 기술적으로 당신은 테마에 블록을 넣으면 플러그인에 여러 블록을 넣습니다. 그러나 블록을 만들고 싶다면 플러그인을 만드는 경우가 더 많습니다. 따라서 WordPress 플러그인을 만든 적이 있다면 이미 WordPress 블록을 만드는 데 어느 정도 도움이 된 것입니다.
그러나 블록은 고사하고 WordPress 플러그인을 설정한 적이 없다고 잠시 가정해 보겠습니다. 어디에서 시작합니까?
블록 설정
블록이 무엇인지 알아보았습니다. 하나를 만들기 위해 설정을 시작하겠습니다.
Node가 설치되어 있는지 확인
이렇게 하면 액세스 권한이 부여됩니다. npm 및 npx 명령, 여기서 npm 블록의 종속성을 설치하고 컴파일하는 데 도움을 주는 반면 npx 패키지를 설치하지 않고 패키지에서 명령을 실행합니다. macOS를 사용하는 경우 이미 Node가 있고 사용할 수 있습니다. nvm 버전을 업데이트합니다. Windows를 사용하는 경우 다음을 수행해야 합니다. 노드 다운로드 및 설치.
프로젝트 폴더 생성
이제 명령줄로 바로 이동하여 @wordpress/create-block. 이 패키지는 개발을 시작하는 데 필요한 모든 종속성과 도구가 포함된 완전히 형성된 프로젝트 폴더를 제공하기 때문에 훌륭합니다.
나는 개인적으로 내 자신의 블록을 설정할 때 이 경로를 사용하지만 기본 개발 환경을 이해하기 위해 도입되는 독단적인 내용을 잘라내고 필요한 비트에만 집중하고 싶기 때문에 잠시 유머를 가집니다.
구체적으로 언급하고 싶은 파일은 다음과 같습니다.
readme.txt: 이것은 일종의 플러그인 디렉토리의 앞면과 같으며 일반적으로 플러그인을 설명하고 사용 및 설치에 대한 추가 세부 정보를 제공하는 데 사용됩니다. 블록을 다음 기관에 제출하면 WordPress 플러그인 디렉토리, 이 파일은 플러그인 페이지를 채우는 데 도움이 됩니다. 블록 플러그인에 대한 GitHub 리포지토리를 만들 계획이라면 다음을 고려할 수도 있습니다. README.md 동일한 정보를 가진 파일이 거기에 잘 표시되도록 합니다.
package.json: 개발에 필요한 Node 패키지를 정의합니다. 설치가 시작되면 열어보도록 하겠습니다. 고전적인 WordPress 플러그인 개발에서는 Composer 및 composer.json 대신 파일. 이것은 그것과 동등합니다.
plugin.php: 이것은 메인 플러그인 파일이고, 네, 이것은 고전적인 PHP입니다! 여기에 플러그인 헤더와 메타데이터를 넣고 플러그인을 등록하는 데 사용할 것입니다.
이 파일 외에도 src 우리 블록의 소스 코드를 포함해야 하는 디렉토리.
이러한 파일과 src 디렉토리는 시작하는 데 필요한 모든 것입니다. 그 그룹에서 우리는 기술적으로 하나의 파일만 필요합니다 (plugin.php) 플러그인을 만듭니다. 나머지는 정보를 제공하거나 개발 환경을 관리하는 데 사용됩니다.
전술 한 @wordpress/create-block 패키지는 우리를 위해 이러한 파일(및 그 이상)을 스캐폴드합니다. 필수가 아닌 자동화 도구로 생각할 수 있습니다. 그럼에도 불구하고 작업을 더 쉽게 만들 수 있으므로 다음을 실행하여 블록을 자유롭게 스캐폴딩할 수 있습니다.
npx @wordpress/create-block
블록 종속성 설치
이전 섹션에서 언급한 세 개의 파일이 준비되어 있다고 가정하고 종속성을 설치할 때입니다. 먼저 필요한 종속성을 지정해야 합니다. 우리는 그것을 편집하여 package.json. 사용하는 동안 @wordpress/create-block 유틸리티를 사용하면 다음이 생성됩니다(주석이 추가됨, JSON은 주석을 지원하지 않으므로 코드를 복사하는 경우 주석을 제거하십시오).
{
// Defines the name of the project
"name": "block-example",
// Sets the project version number using semantic versioning
"version": "0.1.0",
// A brief description of the project
"description": "Example block scaffolded with Create Block tool.",
// You could replace this with yourself
"author": "The WordPress Contributors",
// Standard licensing information
"license": "GPL-2.0-or-later",
// Defines the main JavaScript file
"main": "build/index.js",
// Everything we need for building and compiling the plugin during development
"scripts": {
"build": "wp-scripts build",
"format": "wp-scripts format",
"lint:css": "wp-scripts lint-style",
"lint:js": "wp-scripts lint-js",
"packages-update": "wp-scripts packages-update",
"plugin-zip": "wp-scripts plugin-zip",
"start": "wp-scripts start"
},
// Defines which version of the scripts packages are used (24.1.0 at time of writing)
// https://developer.wordpress.org/block-editor/reference-guides/packages/packages-scripts/
"devDependencies": {
"@wordpress/scripts": "^24.1.0"
}
}
XNUMXD덴탈의 @wordpress/scripts 패키지는 여기에서 주요 종속성입니다. 보시다시피, 그것은 devDependency 발달에 도움을 준다는 의미입니다. 어때요? 그것은 노출 wp-scripts 코드를 컴파일하는 데 사용할 수 있는 바이너리 src 디렉토리 build 디렉토리, 무엇보다도.
WordPress가 다양한 목적으로 유지 관리하는 다른 여러 패키지가 있습니다. 예를 들어, @wordpress/components 패키지 제공 여러 조립식 UI 구성 요소들 WordPress 디자인 표준과 일치하는 블록에 대한 일관된 사용자 경험을 만드는 데 사용할 수 있는 WordPress 블록 편집기용.
당신은 실제로 필요한 것 사용하려는 경우에도 이러한 패키지를 설치합니다. 이는 이러한 @wordpress 종속성은 블록 코드와 함께 번들로 제공되지 않습니다. 대신, 어떤 import 유틸리티 패키지의 코드를 참조하는 명령문 — 예 @wordpress/components — 컴파일하는 동안 "자산" 파일을 구성하는 데 사용됩니다. 또한 이러한 가져오기 문은 가져오기를 전역 개체의 속성에 매핑하는 명령문으로 변환됩니다. 예를 들어, import { __ } from "@wordpress/i18n" 의 축소 버전으로 변환됩니다. const __ = window.wp.i18n.__. (window.wp.i18n 전역 범위에서 사용 가능하도록 보장되는 객체 i18n 패키지 파일이 대기열에 추가됨).
플러그인 파일에 블록을 등록하는 동안 "자산" 파일은 암시적으로 WordPress에 블록에 대한 패키지 종속성을 알리는 데 사용됩니다. 이러한 종속성은 자동으로 대기열에 추가됩니다. 이 모든 것이 뒤에서 처리됩니다. scripts 패키지. 즉, 여전히 코드 완성 및 매개 변수 정보에 대한 종속성을 로컬로 설치하도록 선택할 수 있습니다. package.json 파일 :
이제 그 package.json 설정이 완료되면 명령줄에서 프로젝트 폴더로 이동하고 다음을 실행하여 모든 종속성을 설치할 수 있어야 합니다. npm install.
WordPress 블록 개발 시작하기
플러그인 헤더 추가
클래식 WordPress 플러그인 개발을 시작했다면 모든 플러그인의 기본 플러그인 파일에 WordPress가 플러그인을 인식하고 WordPress 관리자의 플러그인 화면에 정보를 표시하는 데 도움이 되는 정보 블록이 있다는 것을 알고 있을 것입니다.
여기에 @wordpress/create-block "Hello World"라는 독창적인 플러그인을 위해 생성되었습니다.
<?php
/**
* Plugin Name: Block Example
* Description: Example block scaffolded with Create Block tool.
* Requires at least: 5.9
* Requires PHP: 7.0
* Version: 0.1.0
* Author: The WordPress Contributors
* License: GPL-2.0-or-later
* License URI: https://www.gnu.org/licenses/gpl-2.0.html
* Text Domain: css-tricks
*
* @package create-block
*/
그것은 당신이 원하는 무엇이든 부를 수 있는 메인 플러그인 파일에 있습니다. 당신은 그것을 다음과 같은 일반적인 것으로 부를 수 있습니다. index.php or plugin.php. 그만큼 create-block 패키지는 설치할 때 프로젝트 이름으로 제공한 모든 것을 자동으로 호출합니다. 이 예제를 "블록 예제"라고 불렀기 때문에 패키지는 block-example.php 이 모든 것을 파일에 담습니다.
자신을 작성자로 만드는 것과 같은 세부 사항 중 일부를 변경하고 싶을 것입니다. 그리고 그 모든 것이 필요한 것은 아닙니다. 이것을 "처음부터" 롤링했다면 다음과 같이 보일 수 있습니다.
<?php
/**
* Plugin Name: Block Example
* Plugin URI: https://css-tricks.com
* Description: An example plugin for learning WordPress block development.
* Version: 1.0.0
* Author: Arjun Singh
* License: GPL-2.0-or-later
* License URI: https://www.gnu.org/licenses/gpl-2.0.html
* Text Domain: css-tricks
*/
node_modules: 실행할 때 설치한 모든 개발 종속성을 보유합니다. npm install.
src/: 이 폴더에는 컴파일되어 다음으로 전송되는 플러그인의 소스 코드가 들어 있습니다. build 예배 규칙서. 잠시 후에 여기에 있는 각 파일을 살펴보겠습니다.
.editorconfig: 여기에는 코드 일관성을 위해 코드 편집기를 조정하는 구성이 포함됩니다.
.gitignore: 버전 제어 추적에서 제외되어야 하는 로컬 파일을 식별하는 표준 repo 파일입니다. 당신의 node_modules 여기에 반드시 포함되어야 합니다.
package-lock.json: 이것은 우리가 설치한 필수 패키지에 대한 업데이트를 추적하기 위해 포함된 자동 생성 파일입니다. npm install.
메타데이터 차단
파헤치고싶다 src 디렉토리에 있지만 먼저 그 안에 있는 하나의 파일에 초점을 맞출 것입니다. block.json. 당신이 사용한 경우 create-block , 이미 있습니다. 그렇지 않은 경우 계속해서 생성하십시오. WordPress는 블록을 인식하고 블록 편집기에서 렌더링할 수 있도록 WordPress 컨텍스트를 제공하는 메타데이터를 제공하여 블록을 등록하는 표준적이고 표준적인 방법으로 만들기 위해 열심히 노력하고 있습니다.
$schema 파일의 내용을 확인하는 데 사용되는 스키마 형식을 정의합니다. 필수 항목처럼 들리지만 지원 코드 편집기에서 구문의 유효성을 검사하고 도구 설명 힌트 및 자동 완성과 같은 기타 추가 어포던스를 제공할 수 있으므로 완전히 선택 사항입니다.
apiVersion 의 버전을 나타냅니다. API 차단 플러그인이 사용합니다. 오늘은 버전 2가 최신 버전입니다.
name 플러그인을 식별하는 데 도움이 되는 필수 고유 문자열입니다. 이 접두어를 붙였습니다. css-tricks/ 이름이 같은 다른 플러그인과의 충돌을 피하기 위해 네임스페이스로 사용하고 있습니다. 대신 이니셜과 같은 것을 사용하도록 선택할 수 있습니다(예: as/block-example).
category 블록을 다른 블록과 그룹화하고 블록 편집기에 함께 표시합니다. 현재 기존 카테고리에는 다음이 포함됩니다. text, media, design, widgets, theme및 embed, 그리고 당신은 심지어 만들 수 있습니다 맞춤 카테고리.
icon 에서 무언가를 선택할 수 있습니다. 대시콘 라이브러리 블록 편집기에서 블록을 시각적으로 표시합니다. 나는 사용하고있다 format-quote icon](https://developer.wordpress.org/resource/dashicons/#format-quote) 이 예제에서는 우리 자신의 pullquote를 만들고 있기 때문입니다. 물론 가능하긴 하지만 직접 만들 필요 없이 기존 아이콘을 활용할 수 있다는 것은 좋은 일입니다.
editorScript 기본 JavaScript 파일이 있는 곳, index.js, 산다.
블록 등록
실제 코드를 실행하기 전에 마지막으로 플러그인을 등록하는 것입니다. 우리는 모든 메타데이터를 설정하고 WordPress에서 이를 사용할 방법이 필요합니다. 그런 식으로 WordPress는 모든 플러그인 자산을 찾을 위치를 알고 있으므로 블록 편집기에서 사용하기 위해 대기열에 넣을 수 있습니다.
블록 등록은 이중 프로세스입니다. PHP와 JavaScript 모두에 등록해야 합니다. PHP 측의 경우 기본 플러그인 파일(block-example.php 이 경우) 플러그인 헤더 바로 뒤에 다음을 추가합니다.
왜 우리는 build 디렉토리의 경우 block.json 모든 블록 메타데이터가 있는 src? 그것은 우리의 코드가 여전히 컴파일되어야 하기 때문입니다. 그만큼 scripts 패키지는 파일의 코드를 처리합니다. src 디렉토리에 저장하고 프로덕션에서 사용되는 컴파일된 파일을 build 디렉토리, 또한 복사block.json파일 프로세스 인치
자, 이제 블록을 등록하는 JavaScript 측으로 넘어갑시다. 열어 src/index.js 다음과 같은지 확인하십시오.
import { registerBlockType } from "@wordpress/blocks";
import metadata from "./block.json";
import Edit from "./edit.js";
import Save from "./save.js";
const { name } = metadata;
registerBlockType(name, {
edit: Edit,
save: Save,
});
우리는 React와 JSX 랜드에 들어가고 있습니다! 이것은 WordPress에 다음을 지시합니다.
가져 오기 registerBlockType 에서 모듈 @wordpress/blocks 패키지.
다음에서 메타데이터 가져오기 block.json.
가져 오기 Edit 및 Save 해당 파일의 구성 요소. 나중에 해당 파일에 코드를 넣을 것입니다.
블록을 등록하고 사용 Edit 및 Save 블록을 렌더링하고 그 내용을 데이터베이스에 저장하기 위한 구성 요소.
무슨 일이야 edit 및 save 기능? WordPress 블록 개발의 뉘앙스 중 하나는 "백 엔드"를 "프론트 엔드"와 구별하는 것이며 이러한 기능은 해당 컨텍스트에서 블록의 콘텐츠를 렌더링하는 데 사용됩니다. edit 백엔드 렌더링을 처리하고 save 사이트의 프런트 엔드에서 콘텐츠를 렌더링하기 위해 블록 편집기의 콘텐츠를 데이터베이스에 씁니다.
빠른 테스트
블록 편집기에서 블록이 작동하고 프런트 엔드에서 렌더링되는 것을 보기 위해 몇 가지 빠른 작업을 수행할 수 있습니다. 열자 index.js 다시 사용하고 edit 및 save 작동 방식을 보여주는 몇 가지 기본 콘텐츠를 반환하는 함수:
import { registerBlockType } from "@wordpress/blocks";
import metadata from "./block.json";
const { name } = metadata;
registerBlockType(name, {
edit: () => {
return (
"Hello from the Block Editor"
);
},
save: () => {
return (
"Hello from the front end"
);
}
});
이것은 기본적으로 이전에 사용했던 것과 동일한 코드의 제거된 버전입니다. block.json 블록 이름을 가져오고 Edit 및 Save 여기에서 직접 함수를 실행하기 때문에
다음을 실행하여 컴파일할 수 있습니다. npm run build 명령줄에서. 그런 다음 블록 편집기에서 "블록 예제"라는 블록에 액세스할 수 있습니다.
블록을 콘텐츠 영역에 놓으면 반환되는 메시지가 나타납니다. edit 기능:
WordPress 블록 개발 시작하기
게시물을 저장하고 게시하면 반환되는 메시지를 받아야 합니다. save 프론트 엔드에서 볼 때 기능:
WordPress 블록 개발 시작하기
블록 생성
모든 것이 연결된 것 같습니다! 우리는 우리가 가지고 있던 것으로 되돌릴 수 있습니다 index.js 테스트 전에 작동하는 것을 확인했습니다.
import { registerBlockType } from "@wordpress/blocks";
import metadata from "./block.json";
import Edit from "./edit.js";
import Save from "./save.js";
const { name } = metadata;
registerBlockType(name, {
edit: Edit,
save: Save,
});
있음을 주목하라 edit 및 save 함수는 두 개의 기존 파일에 연결되어 있습니다. src 디렉토리 @wordpress/create-block 우리를 위해 생성되었으며 각 파일에 필요한 모든 추가 가져오기를 포함합니다. 그러나 더 중요한 것은 이러한 파일이 Edit 및 Save 블록의 마크업을 포함하는 구성요소.
백엔드 마크업(src/edit.js)
import { useBlockProps } from "@wordpress/block-editor";
import { __ } from "@wordpress/i18n";
export default function Edit() {
return (
{__("Hello from the Block Editor", "block-example")}
);
}
우리가 그곳에서 무엇을 했는지 볼까요? 에서 소품을 가져오고 있습니다. @wordpress/block-editor 나중에 스타일 지정에 사용할 수 있는 클래스를 생성할 수 있는 패키지입니다. 수입도 하고 있습니다 __ 번역을 처리하기 위한 국제화 기능.
WordPress 블록 개발 시작하기
프런트 엔드 마크업(src/save.js)
이렇게하면 Save 구성 요소와 거의 동일한 것을 사용할 것입니다. src/edit.js 약간 다른 텍스트:
import { useBlockProps } from "@wordpress/block-editor";
import { __ } from "@wordpress/i18n";
export default function Save() {
return (
{__("Hello from the front end", "block-example")}
);
}
다시 말하지만, CSS에서 사용할 수 있는 멋진 클래스를 얻었습니다.
WordPress 블록 개발 시작하기
스타일링 블록
방금 블록 소품을 사용하여 클래스를 만드는 방법을 다루었습니다. 당신은 CSS에 관한 모든 사이트에서 이 기사를 읽고 있으므로 블록 스타일을 작성하는 방법을 구체적으로 다루지 않았다면 뭔가 놓친 것 같습니다.
프론트엔드와 백엔드 스타일의 차별화
살펴보시면 block.json FBI 증오 범죄 보고서 src 디렉토리에는 스타일과 관련된 두 개의 필드가 있습니다.
리콜 @wordpress/scripts 패키지는 다음을 복사합니다. block.json 파일에서 코드를 처리할 때 /src 디렉토리에 컴파일된 자산을 배치하고 /build 예배 규칙서. 그것은 build/block.json 블록을 등록하는 데 사용되는 파일입니다. 이는 우리가 제공하는 모든 경로를 의미합니다. src/block.json 를 기준으로 작성해야 합니다. build/block.json.
Sass 사용
몇 개의 CSS 파일을 build 디렉토리에서 경로를 참조하십시오. src/block.json, 빌드를 실행하고 하루라고 합니다. 그러나 그것은 전체 능력을 활용하지 않습니다. @wordpress/scripts Sass를 CSS로 컴파일할 수 있는 컴파일 프로세스. 대신 스타일 파일을 src 디렉토리를 만들고 JavaScript로 가져옵니다.
하는 동안 우리는 방법을 염두에 두어야 합니다. @wordpress/scripts 프로세스 스타일:
이름이 지정된 파일 style.css or style.scss or style.sass, JavaScript 코드로 가져온 다음으로 컴파일됩니다. style-index.css.
다른 모든 스타일 파일은 다음으로 컴파일 및 번들됩니다. index.css.
XNUMXD덴탈의 @wordpress/scripts 패키지 사용 웹팩 번들링 및 @wordpress/scripts 를 사용하여 PostCSS 플러그인 스타일 처리 작업을 위해. PostCSS는 추가 플러그인으로 확장할 수 있습니다. 그만큼 scripts 패키지는 Sass, SCSS, Autoprefixer용을 사용하며, 모두 추가 패키지를 설치하지 않고도 사용할 수 있습니다.
사실, 초기 블록을 다음으로 스핀업할 때 @wordpress/create-block, 실행에 착수하는 데 사용할 수 있는 SCSS 파일을 사용하여 좋은 출발을 얻을 수 있습니다.
editor.scss 백엔드 편집기에 적용되는 모든 스타일을 포함합니다.
style.scss 프런트 엔드와 백 엔드 모두에서 공유하는 모든 스타일을 포함합니다.
이제 블록의 CSS로 컴파일할 약간의 Sass를 작성하여 이 접근 방식을 실제로 살펴보겠습니다. 예제가 Sass-y가 아니더라도 컴파일 프로세스를 보여주기 위해 SCSS 파일에 계속 작성하고 있습니다.
앞 및 백엔드 스타일
자, 프런트 엔드와 백 엔드 모두에 적용되는 스타일부터 시작하겠습니다. 먼저 src/style.scss (사용 중이라면 이미 있습니다. @wordpress/create-block) 그리고 그것을 가져올 수 있는지 확인하십시오. index.js:
import "./style.scss";
열어 src/style.scss 블록 소품에서 생성된 클래스를 사용하여 몇 가지 기본 스타일을 거기에 드롭합니다.
그런 다음 가져 오기 edit.js, 이는 우리의 Edit 구성 요소(원하는 모든 위치에서 가져올 수 있지만 이러한 스타일은 편집기용이므로 여기에서 구성 요소를 가져오는 것이 더 논리적임):
import "./editor.scss";
이제 우리가 달릴 때 npm run build, 스타일은 두 컨텍스트 모두에서 블록에 적용됩니다.
WordPress 블록 개발 시작하기WordPress 블록 개발 시작하기
스타일 참조 block.json
스타일 파일을 가져왔습니다. edit.js 및 index.js그러나 컴파일 단계에서 두 개의 CSS 파일이 생성된다는 점을 기억하십시오. build 예배 규칙서: index.css 및 style-index.css 각기. 블록 메타데이터에서 생성된 파일을 참조해야 합니다.
달리기 npm run build 다시 한 번 WordPress 사이트에 플러그인을 설치하고 활성화하면 사용할 준비가 된 것입니다!
당신이 사용할 수 npm run start 시계 모드에서 빌드를 실행하려면 코드를 변경하고 저장할 때마다 코드를 자동으로 컴파일합니다.
우리는 표면을 긁고 있습니다
실제 블록은 블록 편집기의 설정 사이드바 및 WordPress가 제공하는 기타 기능을 활용하여 풍부한 사용자 경험을 제공합니다. 게다가, 본질적으로 우리 블록의 두 가지 버전이 있다는 사실은 — edit 및 save — 코드 중복을 피하기 위해 코드를 구성하는 방법도 고려해야 합니다.
그러나 이것이 WordPress 블록을 만드는 일반적인 프로세스를 이해하는 데 도움이 되기를 바랍니다. 이것은 WordPress 개발의 진정한 새로운 시대입니다. 새로운 일을 하는 방법을 배우는 것은 어렵지만, 어떻게 발전해 나갈지 기대됩니다. 다음과 같은 도구 @wordpress/create-block 도움이 될 수 있지만 그때도 정확히 무엇을 하고 왜 하는지 아는 것이 좋습니다.
여기서 다룬 내용이 변경됩니까? 대부분! 그러나 적어도 WordPress 블록을 만드는 모범 사례를 포함하여 성숙한 WordPress 블록을 계속 지켜보면서 작업할 기준선이 있습니다.
참고자료
다시 말하지만, 여기서 제 목표는 상황이 빠르게 발전하고 WordPress 문서가 따라잡는 데 약간 어려움을 겪고 있는 이번 시즌에 블록 개발에 들어가기 위한 효율적인 경로를 매핑하는 것입니다. 다음은 이를 통합하는 데 사용한 몇 가지 리소스입니다.
