WordPress 블록 개발을 시작합니다-CSS 튜토리얼-php.cn

Getting Started With WordPress Block Development WordPress 개발은 현재 초보자이든 선임 개발자이든, 블록 편집기 (WordPress 5.0) 및 사이트 편집기 (WordPress 5.9)를 포함한 "Site-wide Editing"(WordPress 5.9)을 포함한 과도기 기간이 진행되고 있습니다.

우리는 5 년 동안 블록 편집기와 접촉 해 왔지만 문서가 누락되거나 구식이기 때문에 여전히 개발이 어려워집니다. 이는 FSE 기능의 빠른 반복의 현재 상황을 더 많이 반영합니다.

예를 들어, 2018 년에 Gutenberg Development 소개에 관한 일련의 기사가 CSS- 트릭에 게시되었습니다. 그러나 시간이 지남에 따라 개발 방법이 여전히 효과적이지만 더 이상 권장되지 않습니다 (또한, 그에 기반한 생성-가텐 블록 프로젝트는 더 이상 유지 관리되지 않습니다).

이 기사는 WordPress 블록 개발을 시작하고 현재 접근 방식을 따르는 데 도움이됩니다. 물론이 기사가 게시 된 후에는 상황이 바뀔 수 있습니다. 그러나 도구가 시간이 지남에 따라 개발 되더라도 핵심 개념은 동일하게 유지 될 가능성이 있기 때문에 핵심 아이디어에 집중하려고 노력할 것입니다.

WordPress 블록은 정확히 무엇입니까?

먼저, "블록"과 같은 일부 용어를 명확히하겠습니다. WordPress 5.0 이전의 이러한 기능의 모든 개발은 코드 이름 "Gutenberg"(인쇄 발명가)와 함께 사용되었습니다.

그 이후로 "Gutenberg"는 블록 편집자 및 사이트 편집기를 포함한 블록과 관련된 모든 것을 설명하는 데 사용되었으므로 일부 사람들이 이름을 싫어할 정도로 복잡해졌습니다. 가장 중요한 것은 미래에 포함될 수있는 실험 기능 테스트를위한 Gutenberg 플러그인도 있습니다. 이 모든 "웹 사이트 전체 편집"을 호출하면 문제가 해결 될 수 있다고 생각되면 몇 가지 우려 사항도 있습니다.

따라서이 기사에서는 "블록"을 참조 할 때 WordPress 블록 편집기에서 컨텐츠를 만드는 구성 요소를 참조하십시오. 블록은 페이지 나 기사에 삽입되며 특정 유형의 컨텐츠에 대한 구조를 제공합니다. WordPress에는 단락, 목록, 이미지, 비디오, 오디오 등과 같은 일반적인 컨텐츠 유형을위한 "핵심"블록이 포함되어 있습니다.

이 핵심 블록 외에도 사용자 정의 블록을 만들 수도 있습니다. 이것은 WordPress 블록 개발의 초점입니다 (코어 블록을 필터링하여 기능을 수정할 수도 있지만 한동안 필요하지 않을 수도 있습니다).

블록의 역할

블록을 만들기 전에 먼저 블록이 내부적으로 어떻게 작동하는지 이해해야합니다. 이것은 미래에 우리에게 많은 문제를 절약 할 것입니다.

나는 다음과 같이 추상적으로 블록을 이해하고 싶습니다 : 특정 컨텐츠를 나타내는 특정 속성 (속성이라고 함)을 가진 엔티티. 나는 이것이 모호하게 들리는 것을 알고 있지만, 나에게 인내심을 갖도록 설명하십시오. 블록은 기본적으로 두 가지 방식으로 나타납니다 : 블록 편집기의 그래픽 인터페이스 또는 데이터베이스의 데이터 블록으로.

WordPress 블록 편집기를 열고 블록 (예 : PullQuote 블록)을 삽입하면 멋진 인터페이스가 나타납니다. 인터페이스를 클릭하고 참조 된 텍스트를 편집 할 수 있습니다. 블록 편집기 UI의 오른쪽 설정 패널은 텍스트를 조정하고 블록 모양을 설정하는 옵션을 제공합니다.

아름다운 견적을 작성하고 게시를 클릭하면 전체 게시물이 데이터베이스의 WP_Posts 테이블에 저장됩니다. 이것은 Gutenberg로 인해 새로운 것이 아닙니다. WordPress는 데이터베이스의 지정된 테이블에 기사 내용을 저장하는 방식입니다. 그러나 새로운 것은

pullquote 블록의 표현이 WP_Posts 테이블의 Post_Content 필드에 저장된 내용의 일부라는 것입니다.

이 표현은 어떻게 생겼습니까? 를 살펴 보자 는 일반적인 HTML처럼 보입니다. ! 기술적 인 관점에서, 이것은 "직렬화 된"블록입니다. HTML 주석 "Textalign": "Right"의 JSON 데이터에 유의하십시오. 이것은 블록 관련 속성입니다.

블록 편집기를 닫은 다음 잠시 후에 다시 열었다고 가정 해 봅시다. 블록 편집기는 관련 post_content 필드에서 내용을 검색합니다. 편집자는 검색된 컨텐츠를 구문 분석하고 다음을 만날 때 :

자체와 대화 할 것입니다

<blockquote>
    <p>It is not an exaggeration to say that peas can be described as nothing less than perfect spheres of joy.</p>
    <cite>The Encyclopedia of world peas</cite>
  </blockquote>

로그인 후 복사

좋아요, 이것은 PullQuote 블록처럼 보입니다. 글쎄 ... 속성도 있습니다 ... 나는 속성을 기반으로 편집기에서 Pullquote 블록의 그래픽 인터페이스를 구성하는 방법을 알려주는 JavaScript 파일이 있습니다. 나는이 블록이 완전히 영광으로 표시되도록 지금 이것을해야합니다.

블록 개발자로서, 당신의 직업은 다음과 같습니다 는 WordPress에게 특정 유형의 블록과 관련 세부 사항을 등록하려고한다고 말합니다.

는 블록 편집기에 JavaScript 파일을 제공하므로 편집기의 블록을 렌더링하면서 데이터베이스에 저장하기 위해 "직렬화"하는 데 도움이됩니다.

는 스타일 및 글꼴과 같이 블록이 제대로 작동하는 데 필요한 다른 리소스를 제공합니다.

<code>...</code>

로그인 후 복사

직렬화 된 데이터에서 그래픽 인터페이스 로이 모든 변환이 블록 편집기에서만 발생한다는 점에 유의해야합니다. 프론트 엔드에서는 내용이 정확히 같은 방식으로 표시되고 저장됩니다. 따라서 어떤 의미에서 블록은 데이터를 데이터베이스에 넣는 영리한 방법입니다.

이것이 블록이 어떻게 작동하는지에 대한 명확한 이해를 제공하기를 바랍니다.

블록은 단지 플러그인입니다 블록은 단지 플러그인입니다. 기술적으로

블록을 테마에 넣거나 하나의 플러그인에 여러 블록을 넣을 수 있습니다. 그러나 일반적으로 블록을 만들려면 플러그인을 만들고 싶을 것입니다. 따라서 WordPress 플러그인을 만든 경우 WordPress 블록을 만드는 방법을 부분적으로 마스터했습니다.
그러나 블록은 물론 WordPress 플러그인을 설정 한 적이 없다고 가정 해 봅시다. 어디에서 시작합니까?

세트 블록 우리는 이미 블록이 무엇인지 소개했습니다. 하나를 만들기 위해 설정을 시작합시다.

노드가 설치되어 있는지 확인하십시오 이렇게하면 NPM이 블록의 종속성을 설치하고 콘텐츠를 컴파일하는 데 도움이되는 NPM 및 NPX 명령에 액세스 할 수 있습니다. NPX는 패키지를 설치하지 않고 패키지에서 명령을 실행합니다. MacOS를 사용하는 경우 노드가 설치되어있을 수 있으며 NVM을 사용하여 버전을 업데이트 할 수 있습니다. Windows를 사용하는 경우 노드를 다운로드하여 설치해야합니다.

프로젝트 폴더를 만듭니다 이제 명령 줄로 직접 점프하고 @wordpress/create-block이라는 패키지를 설치하도록 지시하는 다른 자습서를 발견 할 수 있습니다. 이 패키지는 개발을 시작하는 데 필요한 모든 종속성과 도구를 갖춘 완전한 프로젝트 폴더를 생성하기 때문에 훌륭합니다.

나는 개인적으로 내 자신의 블록을 설정할 때이 접근 방식을 취하지 만, 이해하기 위해 기본 개발 환경의 필요한 부분에만 초점을 맞추고 집중하는 주관적인 콘텐츠를 제거하고 싶기 때문에 잠시 동안 저를 견딜 수 있습니다.

이 문서는 구체적으로 지적하고 싶은 문서입니다.

<..> readme.txt : 플러그인 디렉토리의 전면과 비슷하며 일반적으로 플러그인을 설명하고 사용 및 설치에 대한 자세한 내용을 제공하는 데 사용됩니다. WordPress 플러그인 디렉토리에 블록을 제출하면이 파일이 플러그인 페이지를 채우는 데 도움이됩니다. 블록 플러그인에 대한 GitHub 리포지토리를 만들 계획이라면 동일한 정보가있는 readme.md 파일을 사용하여 잘 표시되도록 고려할 수도 있습니다.

Package.json : 개발에 필요한 노드 패키지를 정의합니다. 설치할 때 열 것입니다. Classic WordPress 플러그인 개발에서 Composer 및 Composer.json 파일을 사용하는 데 사용될 수 있습니다. 이것은 동일합니다.

plugin.php : 이것은 메인 플러그인 파일입니다. 예, 클래식 PHP입니다! 여기에 플러그인 제목과 메타 데이터를 배치하여 플러그인을 등록하는 데 사용합니다.

이 파일 외에도 블록의 소스 코드를 포함 해야하는 SRC 디렉토리도 있습니다.

이러한 파일과 SRC 디렉토리를 사용하면 시작하기에 충분합니다. 해당 그룹에서는

가 실제로 플러그인을 만들려면 파일 (플러그인 .php) 만 필요합니다. 나머지는 정보를 제공하거나 개발 환경을 관리하는 데 사용됩니다.

위에서 언급 한 @WordPress/Create-Block 패키지는 우리를 위해이 파일을 구축합니다. 필요하지 않은 자동화 도구로 생각할 수 있습니다. 어쨌든 작업을 더 쉽게 만들 수 있으므로 다음 명령을 실행하여 자유롭게 사용하여 블록을 빌드 할 수 있습니다.

블록 의존성 설치 이전 섹션에서 언급 한 세 가지 파일을 준비했으며 이제 종속성을 설치해야한다고 가정합니다. 먼저 필요한 종속성을 지정해야합니다. 우리는 package.json을 편집하여이를 수행합니다. @WordPress/Create-Block 유틸리티를 사용하는 경우 다음이 생성됩니다 (주석이 추가되었습니다. JSON은 주석을 지원하지 않으므로 코드를 복사하면 주석을 삭제하십시오) :

<blockquote>
    <p>It is not an exaggeration to say that peas can be described as nothing less than perfect spheres of joy.</p>
    <cite>The Encyclopedia of world peas</cite>
  </blockquote>

로그인 후 복사

무례한 버전보기

<.> 이제 package.json이 설정되었으므로 명령 줄의 프로젝트 폴더로 탐색하고 NPM 설치를 실행하여 이러한 모든 종속성을 설치할 수 있어야합니다.

플러그인 제목을 추가하십시오

Classic WordPress 플러그인 개발 출신이라면 모든 플러그인에 메인 플러그인 파일에 정보가 있다는 것을 알고 있습니다. 이는 WordPress가 플러그인을 인식하고 WordPress 관리자 패널의 플러그인 화면에 이에 대한 정보를 표시하는 데 도움이됩니다.

다음은 창의적으로 "hello world"라고 불리는 @wordpress/create-block이 저를 위해 만든 플러그인입니다.

<code>...</code>

로그인 후 복사

이것은 메인 플러그인 파일에 있으며 원하는대로 이름을 지정할 수 있습니다. index.php 또는 plugin.php와 같은 공통 이름을 지정할 수 있습니다. Create-Block 패키지는 자동으로 설치 당시 제공 한 프로젝트 이름으로 이름을 지정합니다. 이 예제를 "블록 예제"라고 말하기 때문에 패키지는이 모든 것이 포함 된 Block-Aexample.php 파일을 제공합니다.

자신을 저자로 만드는 등의 세부 사항을 변경해야합니다. 이 모든 것이 필요하지는 않습니다. 내가 "머리"로 시작하면 이것에 더 가까울 수 있습니다 :

나는 WordPress 플러그인 매뉴얼에서 이미 완전한 패턴이기 때문에 각 라인의 정확한 목적에 대해 자세히 설명하지 않을 것입니다.

파일 구조 우리는 블록에 필요한 파일을 보았습니다. 그러나 @WordPress/Create-Block을 사용하는 경우 프로젝트 폴더에 다른 많은 파일이 표시됩니다.

다음은 현재 포함 된 내용입니다

와우, 너무 많이! 새로운 콘텐츠를 지적합시다 :

빌드/:이 폴더는 생산 목적 파일을 처리 할 때 컴파일 된 자산을 수신합니다.

> src/:이 폴더는 플러그인의 소스 코드를 보유하고 있으며, 이는 컴파일되어 빌드 디렉토리로 전송됩니다. 우리는 나중에 그들 각각을 살펴볼 것입니다.

.editorconfig : 코드 일관성을 위해 코드 편집기를 조정하기위한 구성이 포함되어 있습니다.

.gitignore : 버전 제어 추적에서 제외 해야하는 로컬 파일을 식별하는 표준 저장소 파일입니다. Node_Modules는 여기에 반드시 포함되어야합니다.

Package-lock.json : NPM 설치를 사용하여 설치된 필수 패키지의 업데이트를 추적하는 자동 생성 된 파일입니다.

블록 메타 데이터 나는 당신과 함께 SRC 디렉토리를 파헤 치고 싶지만 먼저 파일 중 하나 인 block.json에 중점을 둡니다. 당신이 Create-Block을 사용하고 있다면, 그것은 당신을 위해 준비하십시오. WordPress는 WordPress가 블록을 동시에 식별하고 블록 편집기에서 렌더링하는 메타 데이터를 제공하여 블록을 등록하여 표준 사양 방법으로 사용하기가 어려워지고 있습니다.

다음은 @WordPress/Create-Block이 생성하는 것입니다

실제로, 우리는 여기에 많은 다른 정보를 포함시킬 수 있지만 실제로 이름과 제목 만 필요합니다. 슈퍼 라이트 버전은 다음과 같이 보일 수 있습니다
<blockquote> <p>It is not an exaggeration to say that peas can be described as nothing less than perfect spheres of joy.</p> <cite>The Encyclopedia of world peas</cite> </blockquote>
로그인 후 복사
로그인 후 복사
로그인 후 복사
로그인 후 복사

이 작업을 수행 할 때 @WordPress/Scripts가 스타일을 처리하는 방법에주의를 기울여야합니다.

@@WordPress/Scripts 패키지는 WebPack을 사용하여 번들로 제공되며 PostCSS 플러그인을 사용하여 스타일링됩니다. PostCS는 다른 플러그인으로 확장 할 수 있습니다. 스크립트 패키지는 SASS, SCSS 및 AutoPRefixer의 플러그인을 사용하며 추가 패키지를 설치하지 않고 사용할 수 있습니다.

실제로 @WordPress/Create-Block으로 초기 블록을 시작하면 SCSS 파일을 매우 잘 시작할 수 있습니다.이 파일을 사용하여 신속하게 시작할 수 있습니다.

~~editor.scss에는 백엔드 편집기에 적용되는 모든 스타일이 포함되어 있습니다.~~

STYLE.SCSS에는 프론트 엔드 및 백엔드가 공유하는 모든 스타일이 포함되어 있습니다.

이제 블록 CSS로 컴파일 할 SASS를 작성하여 해보자. 이 예제는 매우 sassize는 아니지만 컴파일 프로세스를 보여주기 위해 여전히 SCSS 파일에 작성합니다.

프론트 엔드 및 백엔드 스타일 좋아, 프론트 엔드와 백엔드에 적용된 스타일부터 시작하겠습니다. 먼저 Src/Style.scss를 만들어야합니다 ( @WordPress/Create-Block을 사용하는 경우 이미 존재합니다).

src/style.scss를 열고 블록 속성에서 생성 한 클래스를 사용하여 몇 가지 기본 스타일을 넣습니다.

그게 다야! 빌드를 실행할 때, 이것은 Build/Style.css에 컴파일하며 블록 편집기와 프론트 엔드에서 참조합니다.

The Encyclopedia of world peas 이제 NPM 실행 빌드를 실행하면 스타일이 두 컨텍스트의 블록에 적용됩니다. block.json의 참조 스타일 우리는 스타일 파일을 edit.js 및 index.js에서 가져 왔지만 컴파일 단계는 Build Directory (index.css 및 style-index.css)에서 우리를 위해 두 개의 CSS 파일을 생성한다는 것을 기억하십시오. 이 생성 된 파일을 블록 메타 데이터에 참조해야합니다.

Block.json 메타 데이터에 몇 가지 진술을 추가하겠습니다.

실행 NPM 실행 빌드를 다시 실행하고 WordPress 웹 사이트에 플러그인을 설치하고 활성화하면 사용할 준비가되었습니다!

NPM 실행 시작을 사용하여 모니터링 모드에서 빌드를 실행할 수 있으며 코드를 변경하고 저장할 때마다 코드가 자동으로 컴파일됩니다.

우리는 방금 표면에 닿았습니다 실제 블록은 블록 편집기의 설정 사이드 바 및 WordPress가 제공하는 기타 기능을 사용하여 풍부한 사용자 경험을 만듭니다. 또한 블록에는 실제로 편집 및 저장의 두 가지 버전이 있으므로 코드 복제를 피하기 위해 코드를 구성하는 방법에 대해 생각해야합니다.

그러나 이것은 WordPress 블록을 만드는 전반적인 과정의 미스터리를 제거하는 데 도움이되기를 바랍니다. 이것은 실제로 WordPress 개발의 새로운 시대입니다. 일을하는 새로운 방법을 배우는 것은 어렵지만, 그것이 발전하기를 기대합니다. @WordPress/Create Block 도움말과 같은 도구이지만, 그것이 무엇을하고 있는지, 그 이유를 아는 것이 좋습니다.

여기서 소개하는 콘텐츠가 변경됩니까? 아마도! 그러나 적어도 우리는 WordPress 블록의 성숙도에 계속 초점을 맞추기 때문에 참조를위한 기준을 가지고 있습니다.

참조 다시 말하지만, 저의 목표는이 빠르게 성장하는 시대에 블록 개발에 들어가는 효율적인 경로를 계획하는 것입니다. WordPress 문서는 계속 유지하기가 어렵습니다. 다음은이 내용을 구성하는 데 사용한 몇 가지 리소스입니다.

<code>...</code>

로그인 후 복사

주요 개념 (WordPress 블록 편집기 설명서) 블록 튜토리얼을 만듭니다 (WordPress 블록 편집기 설명서) block.json (WordPress 블록 편집기 매뉴얼)의 메타 데이터

코어 블록의 소스 코드 (WordPress github) @WordPress/Scripts 패키지 (WordPress Github) 에 사용 된 웹 팩 구성 백엔드 엔지니어 블록 편집자 블록, 1 부 (Tom McFarlin)를 구축하는 법을 배우십시오. Ryan Welcher의 Twitch Live Broadcast (Ryan은 Automattic Developer Advocate)

위 내용은 WordPress 블록 개발을 시작합니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!