최첨단 패턴 관리 및 생성

블록 패턴을 마스터하는 사람들은 WordPress를 설계, 구축 및 확장하는 새로운 패러다임을 이끌 수 있는 강력한 위치에 있을 것입니다.

이 세션을 보고 최신 패턴 기능과 프리랜서 및 에이전시의 패턴 관리 경험을 향상시키는 흥미로운 새 도구를 활용하는 방법을 알아보십시오.

스피커:

• WP Engine의 React 엔지니어 Michael Day
• Phil Johnston, WP Engine 선임 ​​소프트웨어 엔지니어

세션 슬라이드:

성적 증명서:

PHIL JOHNSTON: 안녕하세요. 제 이름은 Phil Johnston이고 WP Engine의 수석 스태프 소프트웨어 엔지니어입니다. 그리고 팀 동료 Mike Day와 함께 WordPress에서 최첨단 패턴 관리 및 생성에 대해 이야기할 예정입니다.

따라서 최근 워드프레스에 새롭고 흥미로운 것들이 많이 추가되고 있습니다. 그리고 그 중 하나는 패턴입니다. 그리고 나는 그것에 대해 이야기 할 것입니다. 패턴은 블록으로 만들어집니다. 그럼 바로 들어가 봅시다.

WordPress 대시보드인 블록 편집기에서 블록을 사용합니다. 여기에서 블로그 게시물이나 페이지와 같은 항목을 만들고 글을 쓰거나 만들 수 있습니다. 그리고 블록을 사용하는 곳입니다.

그래서 저는 이 강연을 위해 아이들에게서 레고 블록을 빌릴 수 있었습니다. 이를 설명하기 위해 여기에서 내가 표제 블록이라고 표시된 페이지를 볼 때 그것을 하나의 LEGO 블록으로 생각할 수 있습니다. 그리고 나서 내가 단락 블록이라고 말하는 그 아래에, 여러분은 그것을 그 아래에 잘라낸 또 다른 블록으로 생각할 수 있습니다.

그 아래에 또 다른 표제 블록이 있습니다. 그래서 그것을 클릭할 수 있습니다. 그런 다음 원하는 대로 페이지 구축을 시작할 수 있습니다. 클릭, 끌기 또는 재정렬을 통해 해당 블록을 재정렬할 수 있습니다. 그런 다음 페이지가 모두 차단되기 때문에 그런 식으로 페이지를 매우 쉽게 다시 조립할 수 있습니다.

이것은 블로그 게시물과 같은 경우 매우 간단하고 편집기로 바로 들어가서 이것이 블록이라는 사실조차 모른 채 이 작업을 시작할 수 있지만, 여기서 다시 본다. 여기에 세 개의 이미지가 있는 세 개의 열 레이아웃이 있습니다. 그리고 그 위에 실제로 전체 너비 열이 있습니다. 그리고 그것은 세 기둥 모두에 걸쳐 있습니다. 그런 다음 3개의 이미지 블록, 3개의 샘플 제목 블록, 3개의 단락 블록, 그리고 그 아래에 3개의 버튼 블록이 있습니다.

다시 말하지만 WordPress 블록은 LEGO와 같습니다. 내가 보여드린 첫 번째 레이아웃과 같은 간단한 레이아웃이나 지금 보고 있는 것과 같은 더 복잡한 레이아웃을 만들기 위해 그것들을 함께 스냅할 수 있습니다. 그래서 저는 여러분이 이와 같은 페이지에서 볼 수 있을 것으로 예상되는 블록을 빨간색으로 강조 표시했습니다. 첫 번째 항목 주위에 빨간색 상자가 있는 것을 볼 수 있습니다. [명쾌한 목구멍] 실례합니다. 그리고 그것은 블록을 나타냅니다. 그리고 그 아래에는 Lorem ipsum 텍스트가 있는 또 다른 블록이 있고 앞서 언급한 세 개의 이미지 블록, 세 개의 제목 블록, 그 아래에 세 개의 단락 블록, 세 개의 버튼 블록이 있습니다.

이와 같은 페이지 레이아웃을 만드는 데 필요한 전부라고 생각할 수도 있지만 실제로는 그보다 훨씬 더 복잡합니다. 여기 이 슬라이드에서는 보이지 않는 블록, 볼 수 없는 블록을 강조 표시했습니다. 이들은 하나의 열 대신 세 개의 열이 있다는 사실과 같이 항목이 어디에 있어야 하는지를 정의하기 위해 페이지에 있어야 하는 블록입니다.

따라서 보이지 않는 블록은 강력하지만 일반 사용자가 뛰어들고 바로 사용하기에는 정말 어렵습니다. 블록 편집기 내에서 마우스를 움직일 때 보이지 않는 블록이 있는지 알 수 없습니다. 블록이 보이지 않기 때문입니다. 그리고 이러한 모든 블록에는 함께 제공되는 복잡한 컨트롤도 있습니다. 예를 들어, 여기에 열 블록 중 하나가 있습니다.

오른쪽을 보면 이해하기 쉽지 않거나 직관적이지 않은 복잡한 컨트롤을 모두 볼 수 있습니다. 내부 블록과 같은 것들은 콘텐츠 너비, 패딩 또는 블록 간격을 사용합니다. 일반 사용자는 이러한 설정이 무엇을 하는지 알거나 이해하지 못할 것입니다. 그리고 이것은 제가 부엌에 들어가 많은 향신료를 본다면 저와 약간 비슷합니다.

나는 훌륭한 요리사가 아닙니다. 그래서 저는 이와 같은 랙에 많은 향신료를 두었습니다. 그리고 나는 셰프가 되기 위해 시간을 들이지 않았기 때문에 그것들을 결합하거나 사용하는 방법을 몰랐을 것입니다. 별 5개짜리 셰프가 되어 훌륭하고 맛있는 식사를 요리하는 데 시간이 걸리는 것처럼 블록 편집기와 보기 좋고 맛이 좋은 것을 만들기 위해 어떤 블록을 언제 사용해야 하는지 이해하는 데 시간이 걸리고 어려운 학습 곡선이 있습니다. 좋은.

그래서 그것은 전문 분야입니다. 개발해야 하는 기술입니다. 따라서 일반 사용자는 여기에서 볼 수 있는 것과 같은 빈 슬레이트로 블록 편집기에 버려질 것입니다. 그리고 그들은 기둥 블록을 사용해야 하는지, 그 블록을 어떻게 사용하는지, 그 블록 안에 무엇을 넣어야 하는지, 기본적으로 진정으로 멋져 보이는 것을 만들기 위해 결합해야 하는 향신료를 알지 못할 것입니다.

실망스러울 수도 있습니다. 그들은 원하는 것을 얻는 것이 지루하고 어렵다는 것을 알게 될 것입니다. 그리고 블록의 복잡성을 모두 배우더라도 디자인 기술이 없을 수도 있습니다. 따라서 블록은 강력하지만 사용하기 어려울 수 있습니다. 그리고 이것이 패턴의 개념이 발명된 이유입니다.

그래서 WP Engine에서는 Atomic Blocks라는 플러그인을 만들었습니다. 그리고 Atomic Blocks에서 우리는 기본적으로 패턴의 개념을 생각해냈지만 이를 섹션과 레이아웃이라고 불렀습니다. 그리고 완전히 같은 개념입니다. 그리고 WordPress Core는 실제로 현재 WordPress Core에 있고 패턴이라고 하는 개념에 대해 Atomic Blocks에서 영감을 얻었습니다.

따라서 패턴은 여기에서 볼 수 있는 것처럼 사용자가 탐색할 수 있는 사전 구축된 블록 그룹입니다. 여기에는 그들이 선택할 수 있는 많은 패턴이 있습니다. 그리고 하나를 클릭하면 클릭 한 번으로 페이지에 모든 항목이 삽입됩니다. 그래서 이런 블록, 레고 블록을 조립할 필요 없이, 그들은 이미 디자인에 매우 능숙하고 그 제작 기술에 몇 시간을 투자한 누군가에 의해 미리 조립된 블록 묶음의 그룹을 얻습니다. 블록.

페이지에 삽입하면 다음과 같이 보입니다. 그리고 이와 같이, 붐, 보기 좋고, 맛도 좋고, 작동하는 패턴, 미리 조립된 많은 블록이 있습니다. 그런 다음 들어가서 변경해야 하는 텍스트를 입력할 수 있습니다. . 따라서 샘플 제목과 같은 것을 페이지의 고유한 텍스트로 변경합니다.

따라서 패턴은 일반 사용자에게 매우 유리합니다. 그들은 블록 편집기의 모든 복잡성, 그 모든 복잡한 것들을 배울 필요가 없습니다. 그들은 전문 디자이너가 될 필요는 없지만 페이지에 패턴을 삽입하는 것만으로도 멋진 디자인을 얻을 수 있습니다.

따라서 다른 사람이나 클라이언트를 위해 웹사이트를 구축하는 에이전시라면 블록 패턴을 사용하여 클라이언트가 스스로를 도울 수 있습니다. 미리 디자인된 패턴을 고객에게 제공함으로써 고객은 자신만의 페이지를 만들 수 있습니다.

따라서 특별한 페이지가 필요한 이벤트가 있다고 가정해 보겠습니다. 그들은 자신의 브랜드와 일치하는 블록 패턴을 생성할 수 있습니다. 그것은 그들의 색 구성표와 모든 종류의 것들과 일치하며, 그들은 클릭하여 페이지에 삽입하고 리버스 엔지니어링할 수 있습니다. 시나리오, 하지 말아야 할 것, 장치 및 모든 종류의 것들에서 훌륭하게 작동하는 레이아웃을 구축하는 방법.

그러나 블록 패턴은 일반 사용자가 사용하기 쉬운 반면 만들기는 쉽지 않습니다. 그리고 시간이 지남에 따라 관리하기가 훨씬 더 어렵습니다. 그리고 개발자와 대행사의 경우 WordPress에 패턴을 만드는 데 도움이 되는 워크플로나 도구가 없습니다.

그래서 저는 여기서 어려운 방법이라고 부를 현재 패턴을 구축하는 단계를 10단계로 나누었습니다. 그리고 이것이 압도적으로 보인다면 그것은 일종의 것이기 때문입니다. 가장 먼저 해야 할 일은 VS Code와 같은 코드 편집기에서 PHP 파일을 만드는 것입니다. 해당 파일의 맨 위에 특정 파일 헤더를 넣어야 합니다.

그런 다음 건물을 지을 곳이 필요합니다. 따라서 아마도 로컬에 WordPress가 있어야 합니다. 그러나 그런 다음 어딘가에 블록을 놓고 작업할 수 있도록 WordPress 내부에 임시 페이지를 만들어야 합니다. 그런 다음 그것을 구축해야합니다. 당신이 개발한 기술, 기술을 사용하고 예쁘게 만들어야 합니다. 그런 다음 완료되면 코드 보기로 전환하고 모든 코드를 1단계에서 만든 해당 파일에 복사해야 합니다.

그런 다음 해당 파일을 테마의 특정 위치에 저장해야 합니다. 테마를 빌드하고 클라이언트에 제공하는 경우 패턴 디렉토리에 넣어야 합니다. 그런 다음 패턴에 제가 보여드린 3열 레이아웃과 같은 이미지가 포함되어 있다면 고객에게 전달할 때 해당 이미지가 실제로 작동하는지 확인해야 합니다. 따라서 로컬 컴퓨터에서 빌드했기 때문에 해당 이미지는 로컬 컴퓨터의 하드 드라이브에 있는 것처럼 코드에서도 참조됩니다.

분명히 이것은 문제입니다. 더 이상 컴퓨터에 없으면 해당 이미지가 작동하지 않습니다. 따라서 가는 빗으로 코드를 살펴보고 로컬 컴퓨터의 URL을 찾아 특정 PHP 태그로 교체해야 합니다. 그런 다음 실제로 해당 이미지 파일을 테마로 이동했는지 확인해야 합니다. 코드에서 변경할 수는 없습니다. 또한 해당 파일을 이동해야 합니다.

그리고 더 어렵게 만드는 것은 여기에서 정말 제가 생각하기에 가장 실망스러운 점은 적어도 제가 많은 패턴을 만들 때 패턴 내부에서 철자 오류를 범했다면 시작해야 한다는 것이었습니다. 철자 오류를 수정하기 위해 매번 3단계에서 다시 9단계로 이동합니다. 또한 매번 모든 블록 코드를 재생성해야 하기 때문에 모든 이미지 URL을 조사하고 교체한 다음 파일에 다시 넣어야 합니다.

특히 시간이 지남에 따라 관리하는 경우 전체적으로 반복적이고 지루한 일련의 단계입니다. 예를 들어 지금부터 몇 달 후에 패턴을 조정해야 한다고 말할 수 있습니다. 매우 지루합니다. 그리고 이것이 우리가 Genesis Pro 컬렉션의 패턴을 구축하는 동안 마주쳤던 것입니다. 우리는 그것으로 많은 섹션과 레이아웃 또는 패턴을 제공했으며 이러한 지루한 작업을 반복해서 수행하는 프로세스에 매우 실망했습니다.

그래서 우리는 이런 일을 할 필요가 없고, 지루함을 없애고, 가능한 한 빨리 만들 수 있는 도구를 만들었습니다. 작업하고 저장하면 파일로 바로 이동합니다. 파일을 올바른 위치에 놓을 것입니다. 그것은 당신을 위해 모든 코드를 작성합니다. 그래서 우리는 내부적으로 이 모든 고통을 덜어줄 도구를 만들기로 결정했습니다. 그리고 우리는 그것이 다른 사람들이 사용하게 하려는 것이 아니라 우리에게 너무 유용해서 다른 사람들도 사용할 수 있게 만들고 싶었습니다.

보시다시피 패턴을 구축하는 현재의 어려운 방법은 이상적이지 않으며 작업을 수행하는 좋은 방법도 아닙니다. 그래서 우리는 WordPress 내에서 패턴 컬렉션을 생성하고 유지하기 위한 UI인 Pattern Manager를 구축했습니다. 그래서 저는 그것을 제 동료인 Mike Day에게 넘겨 패턴 관리자를 살펴보고 그 안에 있는 모든 멋진 기능을 보여줄 것입니다. 그래서 당신에게, 마이크.

마이크 데이: 안녕하세요. 저는 마이크입니다. 저는 WP Engine의 소프트웨어 엔지니어입니다. 패턴은 WordPress 빌더의 판도를 바꿀 수 있는 강력한 레이아웃 생성 도구입니다. 그러나 Phil이 방금 보여준 것처럼 이러한 패턴을 만들고 관리하는 측면에서 실제로 이러한 패턴을 사용한 경험은 아무리 줄잡아 말해도 부족합니다. Pattern Manager는 워크플로우에 삽입할 수 있는 플러그인을 통해 마찰 없는 방식으로 패턴 파일 관리를 WordPress 디자인의 최전선으로 가져오는 것을 목표로 합니다. 뛰어들자.

이 데모의 초기 목적을 위해 여기 오른쪽에 내 코드 편집기 창을 열어 두겠습니다. 이것은 내 디스크에 직접 저장된 실제 패턴 파일입니다. 그리고 Pattern Manager로 작업할 때 실제로 디스크에 저장된 실제 파일을 조작하고 생성한다는 점을 강조하고 싶습니다. 특히 현재 테마 디렉토리에 저장됩니다. 여기에서 두 개의 PHP 파일 또는 패턴 파일을 볼 수 있습니다. 이 파일은 이 패턴 보기에서 현재 활성화된 패턴을 나타냅니다.

또한 이 이미지 디렉토리를 기록해 두십시오. Phil은 패턴으로 작업할 때 바로 지금 패턴에 저장된 많은 이미지가 있다고 가정해 봅시다. 특정 이미지에 대한 모든 URL은 로컬 설치를 가리킵니다. 작업을 실제로 공유할 때가 되면 큰 문제가 됩니다.

그 모든 이미지가 깨질 것입니다. 그래서 우리는 조금 다르게 접근합니다. 실제로 이러한 이미지의 복사본을 테마 폴더 자체에 직접 저장합니다. 예를 들어 이것은 버전 제어를 위한 게임 체인저입니다. 귀하와 귀하의 공동 작업자가 Git을 사용하고 있다고 가정해 보겠습니다. 이제 작업할 때 모두 동일한 이미지에 액세스할 수 있습니다.

좋아요. 이제 실제로 인터페이스로 이동해 보겠습니다. 이것은 패턴보기입니다. 그리고 바로 여기에서 내 테마에 등록된 두 패턴을 모두 볼 수 있습니다. 패턴 미리보기 위로 마우스를 가져가면 팝업되는 작업 버튼을 확인하십시오. 주어진 패턴을 편집, 복제 또는 삭제할 수 있는 옵션이 있습니다. 여기 왼쪽에도 몇 가지 필터링 옵션이 있지만 여기서는 잠시 후에 다시 설명하겠습니다. 지금은 실제로 뛰어들어 패턴을 편집해 보겠습니다.

따라서 매우 친숙한 UI를 바로 알아볼 수 있을 것입니다. 이것은 WordPress 블록 편집기이며, 이 경우 패턴 작업을 위한 특정 공간을 제공하도록 용도가 변경되었습니다. 여기 오른쪽에는 다양한 헤더 속성이 표시됩니다. 이제 시작하기 전에 좀 더 많은 컨텍스트를 제공하고 실제로 WordPress 개발자 문서에서 빌린 일부 텍스트를 사용하고 싶습니다.

title 속성은 매우 자명합니다. 이것은 사용자가 사이트에서 패턴과 상호 작용할 때 표시되는 사람이 읽을 수 있는 전면 ID입니다. 범주는 실제로 패턴을 함께 그룹화하는 데 사용됩니다. 이것은 원하는 경우 하나 또는 여러 개를 추가하거나 전혀 추가할 수 없는 등록된 범주의 배열이 될 것입니다. 그러나 이것이 WordPress Core에서 작동하는 현재 방식에는 문제가 있습니다.

어떤 카테고리가 실제로 사용 가능한지 알 수 있는 좋은 방법은 없습니다. 적어도 내가 아는 한 귀하의 사이트 어디에서나 이러한 등록된 블록 패턴 범주를 실제로 찾을 수 있는 명확한 지점이 없습니다. 이제 키워드는 검색어와 비슷하다고 생각할 수 있습니다. 기본적으로 이러한 설명 별칭을 입력하여 패턴을 설명할 수 있으므로 사용자가 삽입기에서 무엇을 검색하든 필요한 것을 쉽게 찾을 수 있습니다. 그리고 설명은 시각적으로 숨겨진 텍스트라는 점을 제외하고는 그 아이디어의 확장입니다. 이것은 스크린 리더를 사용하는 시각 장애가 있는 사용자에게 정말 유용합니다.

이제 패턴 관리자로 돌아가서 이러한 메타 속성을 수정해 보겠습니다. 패턴 제목은 간단한 텍스트 입력입니다. 입력을 시작하여 패턴의 이름을 바꾸기만 하면 됩니다. 그러나 여기에 숨겨진 기능이 있습니다. 패턴 관리자가 이 제목의 패턴이 테마에 이미 존재한다고 알려줍니다. 실수로 해당 파일을 파괴하고 싶지 않기 때문에 제목만 그대로 두겠습니다.

좋아요. 몇 가지 범주를 선택해 보겠습니다. 바로 이 카테고리 목록이 드롭다운에 렌더링되었음을 알 수 있습니다. 그렇지 않으면 실제로 이 데이터를 어디에서 찾을 수 있는지 알기 어렵습니다. 하지만 이 목록은 API 호출을 통해 동적으로 채워집니다. 즉, 테마에 대해 등록된 모든 블록 패턴 범주뿐만 아니라 등록했을 수 있는 모든 범주가 ​​여기에 표시됩니다. 지금은 추천 항목을 선택해 보겠습니다.

좋아요. 검색 가능한 용어를 추가해 보겠습니다. 이 데모에서는 샘플 패턴만 사용하겠습니다. 그러나 여기에서 삽입기에서 검색하는 사용자에 대해 이 패턴을 설명하는 용어를 추가할 수 있는 위치를 기억하십시오. 여기서 여러 단어로 된 용어를 사용했습니다. 그것들은 패턴 관리자에서 지원됩니다.

좋아요. 그리고 설명을 추가해 보겠습니다. 이것은 시각적으로 숨겨진 텍스트라는 점을 기억하십시오. 제 생각에 여기의 주요 의도는 스크린 리더를 지원하는 것입니다. 이것을 색상이 반전된 세 개의 열로 설명하겠습니다. 좋아요. 완벽한. 지금은 좋은 위치에 있는 것 같습니다. 실제로 작업을 저장할 수 있습니다. 하지만 그 전에 오른쪽에 있는 이 파일의 헤더에 주의를 기울이시기 바랍니다. 이제 패턴 업데이트를 누르자마자 갑자기 여기에 더 많은 데이터가 있습니다. 방금 수정한 설명, 범주 및 키워드가 모두 이 파일을 건드리지 않아도 여기에 나타납니다.

좋아요. 나머지 메타 속성을 살펴보겠습니다. 먼저 뷰포트 너비에 꽤 흥미로운 속성이 있습니다. 이것은 이 패턴을 미리 보기 위해 조정된 너비를 나타내는 정수입니다. 따라서 기본적으로 패턴을 생성할 때마다 전체 너비 또는 매우 좁은 패턴을 만든다고 가정해 봅시다. WordPress Core의 기본 설정으로 인해 미리 보기에서 크기 조정이 약간 이상하게 보일 수 있습니다.

그래서 유형을 게시합니다. 이것은 단순히 패턴과 함께 사용하려는 포스트 유형 슬러그의 배열입니다. 여기에 값을 추가하면 실제로 패턴이 제한되므로 해당 게시물 유형에서만 작동합니다. 또한 이 항목을 공백으로 두면 패턴이 모든 게시물 유형에서 작동하게 됩니다.

다음으로 블록 유형이 있습니다. 이것은 또 다른 배열이지만 이번에는 패턴과 함께 사용할 블록 유형입니다. 이제 저는 이러한 블록 유형을 처음 사용하기 시작할 때마다 약간 혼란스럽다는 것을 인정해야 합니다. 사용법은 실제로 다목적으로 의도된 것 같지만 그 의도는 제 생각에는 명확하지 않습니다.

마지막으로 삽입기 속성이 있습니다. 이제 기본적으로 모든 패턴이 삽입기에 표시되지만 이를 변경하고 싶다고 가정해 보겠습니다. 이 속성에 대해 부울 값 false를 추가하기만 하면 삽입기에서 사용되지 않도록 숨겨집니다.

패턴 관리자로 돌아가서 이러한 나머지 메타 속성을 처리하는 방법을 살펴보겠습니다. 먼저 다른 패널을 닫겠습니다. 뷰포트 너비를 살펴보겠습니다. 이제 이것이 삽입기에서 패턴의 크기 조정된 미리 보기를 제어하는 ​​정수 값임을 기억하십시오. 이것의 현재 구현에서 고통스러운 한 가지는 실제로 작업 결과를 보는 것입니다.

패턴 파일의 헤더를 수정하고 뷰포트 너비를 변경한다고 가정해 보겠습니다. 실제로 어떻게 보이는지 확인하는 유일한 방법은 새 게시물을 만드는 것입니다. 조금 복잡해집니다. 앞뒤로 점프하는 것은 약간 지나치게 복잡합니다. 약간의 고통입니다. 따라서 우리가 접근한 방식은 슬라이더 위로 마우스를 가져가면 즉시 미리보기가 표시됩니다. 드래그하고 다른 크기를 시도해 보면 이 패턴이 어떻게 확장되는지 알 수 있습니다. 이것은 정말 유용하고 시간을 크게 절약해 줍니다. 지금은 1,200개를 선택하겠습니다. 그리고 게시물 유형으로 넘어 갑시다.

이 패널에 대해 주목해야 할 첫 번째 사항은 이러한 도구 설명이 있다는 것입니다. 이것은 당신이 앱을 사용할 때 당신의 길을 안내하고 시도하는 데 도움이 되는 약간의 정보일 뿐입니다. 먼저, 이것은 제가 이미 논의한 것을 반복하는 것입니다. 선택 항목이 없고 패턴 파일의 헤더에 추가된 게시물 유형이 없으면 패턴이 모든 게시물 유형에 대해 작동합니다. 하지만 아래에 Modal Visibility라는 설정이 있습니다.

이것은 정말 멋진 숨겨진 기능입니다. 기본적으로 패턴 파일의 헤더에 올바른 유형의 블록 유형이 있는 경우 사용자가 대상 유형의 새 게시물을 만들 때마다 모달이 나타나는 것을 볼 수 있습니다. 그리고 그들은 해당 모달에서 직접 패턴을 선택할 수 있습니다. 잠시 후에 제가 의미하는 바를 정확히 보여드리겠습니다. 하지만 이 토글이 실제로 어떻게 비활성화되어 있는지 알아두시기 바랍니다. 게시물 유형이 채워지지 않으면 모달 가시성 설정이 작동하지 않기 때문입니다.

따라서 우리가 접근하는 방식은 포스트 유형이 존재할 때까지 단순히 토글을 비활성화하는 것입니다. 좋아요. 이제 이것을 켤 수 있습니다. 그리고 디스플레이와 인서터가 토글되며 예상할 수 있는 작업을 수행합니다. 이 기능을 끄면 파일 헤더에 false 값이 할당됩니다. 그리고 이 패턴은 더 이상 삽입기에 나타나지 않습니다. 좋아요. 계속해서 이것을 업데이트합시다.

이제 게시물에서 이 모든 것이 실제로 어떻게 작동하는지 살펴보겠습니다. 그래서 전환하고 실제로 새 게시물을 만들 것입니다. 이제 바로 이것이 제가 실제로 이야기했던 모달입니다. 올바른 블록 유형과 게시물 유형이 모두 파일에 추가되었기 때문에 이제 새 게시물을 만들 때 이를 바로 볼 수 있습니다. 그리고 패턴 미리보기를 클릭하기만 하면 제 패턴이 바로 거기에 있습니다.

꽤 멋지지만 태깅이 실제로 어떻게 작동하는지 살펴보겠습니다. 여기 제가 선택한 범주인 기능이 있습니다. 그리고 내 테마의 다른 패턴에는 열과 텍스트의 범주가 있으므로 잘 작동합니다. 내 검색어는 어떻게 되나요? 샘플 패턴이 포함된 내 검색어입니다. 잘 작동합니다. 그리고 내 숨겨진 텍스트는 세 개의 열로 시작했으며 의도한 대로 정확하게 작동했습니다. 훌륭합니다.

좋아요. 이제 다시 시작하여 남아 있는 메타 속성을 하나 더 살펴보겠습니다. 이것은 설명하기가 약간 이상합니다. 그냥 보여주면 더 편할 것 같아요. 이제 새 패턴을 만들어 보겠습니다. 이를 위해 해야 할 일은 이 새 패턴 만들기 버튼을 누르는 것뿐입니다. 이제 에디터로 돌아왔습니다. 이 경우 코드 블록을 선택하겠습니다. 이 코드 블록에 몇 가지 샘플 코드를 붙여넣겠습니다.

이제 이것은 실제로 WordPress 문서에서 가져온 것입니다. 이것은 PHP를 사용하여 블록 변환을 등록하는 방법입니다. 따라서 이 코드를 사용하여 원하는 대로 함수 파일에 붙여넣을 수 있습니다. 어떻게 접근하는지 보여드리겠습니다. 이 변환된 블록 유형 섹션에는 드롭다운이 있습니다. 이 드롭다운은 API 호출을 통해 게시물 유형 및 카테고리와 마찬가지로 동적으로 채워집니다.

따라서 대상 유형(여기에 코어/코드가 있습니다)을 검색하고 선택할 수 있습니다. 이제 한 번 더 설명하자면 지금 수행하는 방법과 패턴 관리자를 사용하는 방법이 다릅니다. 지금 이 작업을 수행하려면 이 코드 블록을 찾고, 필요한 콘텐츠를 정확히 파악하고, 블록 유형을 파악하고, 이것을 어딘가에 붙여넣어야 합니다. 패턴 관리자에서는 방금 이 필드를 선택했습니다. 드롭다운에서 이 값을 선택했습니다. 좋아요. 이것을 업데이트합시다. 그리고 새로운 글을 작성하겠습니다. 그리고 모달을 빠져나갑시다.

이번에는 코드 블록도 선택하겠습니다. 그러나 실제로 여기에 콘텐츠를 채우는 대신 도구 모음에서 이 옵션을 선택할 수 있습니다. 그리고 이 패턴 선택을 주목하십시오. 내가 패턴을 고를 때 내 패턴이 있다. 그리고 클릭하면 즉시 이 블록이 내 목표 패턴으로 변환되었습니다.

변환 유형으로 다루어야 할 또 다른 사항은 시맨틱 블록 패턴이라는 아이디어입니다. 이들은 블록 변환과 유사하지만 템플릿 부분을 대상으로 합니다. 예를 들어 머리글과 바닥글입니다. 하지만 거기에 문제가 있습니다. 해당 대상 템플릿 부품 블록 유형을 선택하는 데 대해 알아야 할 한 가지는 올바른 유형의 게시물 유형도 할당해야 하며 그렇지 않으면 작동하지 않는다는 것입니다. 따라서 우리가 접근한 방법은 이 템플릿 유형을 할당하는 것입니다. 그리고 잠겨 있습니다. 그리고 이 블록 유형이 실제로 제거될 때까지 잠긴 상태로 유지됩니다.

이 편집기 보기의 초기 데모는 여기까지입니다. 하지만 여기에서 백그라운드에서 테마를 전환해야 합니다. 이제 패턴 보기로 다시 전환하겠습니다. 여기서 요점은 Pattern Manager가 많은 패턴에서 어떻게 작동하는지 보여주는 것입니다. 이 특정 테마는 50개 이상의 패턴이 등록되어 있습니다.

이제 이러한 다양한 범주를 클릭하면 이러한 패턴이 얼마나 즉시 필터링되는지 알 수 있습니다. 이것은 많은 패턴 중에서 필요한 것을 찾으려고 할 때 정말 유용합니다. 그러나 보다 세분화된 제어를 원한다고 가정해 보겠습니다. 입력을 시작하기만 하면 됩니다. 이 필터링은 삽입기와 매우 유사하게 작동합니다. 정말 유용하고 정말 빠릅니다. Snappy에 대해 한 가지 더 지적해야 할 것은 이 UI가 얼마나 빠르게 느껴지는가입니다.

이 미리보기는 실제로 스크롤할 때까지 로드되지 않습니다. 이것은 브라우저 리소스를 절약하는 데 정말로 뛰어난 사용자 정의 구현입니다. 그리고 얼마나 많은 패턴을 사용하든 이 앱이 빠르고 매우 산뜻하게 느껴집니다. 괜찮은. 이 프레젠테이션에서 많은 부분을 다루었으므로 간단히 요약해 보겠습니다. 패턴은 개별 콘텐츠 요소의 큐레이션과 전체 페이지 디자인 간의 흥미로운 교차점을 나타냅니다.

WordPress 빌더로서 더 큰 레이아웃 요소를 만들고 테마 전체에서 재사용할 수 있는 기능은 매력적인 아이디어입니다. 머리글, 바닥글, 평가, 기능 상자. 이것들은 모든 웹사이트의 특징입니다. 이제 전체 사이트를 패턴으로 쉽게 디자인할 수 있습니다.

이제 패턴이 블록 테마의 핵심 구성 요소로 등장했음에도 불구하고 WordPress 자체에는 이러한 패턴을 실제로 생성하거나 관리하기 위한 공식 인터페이스가 없으며 로드맵에도 없습니다. 대신 빌더는 코드 편집기에서 수동으로 패턴을 만들고 코드를 수십 번 복사하고 붙여넣어야 하므로 오류가 발생할 여지가 많습니다.

당사의 제품인 Pattern Manager는 귀하의 워크플로우에 통합되도록 설계되었습니다. 플러그인을 설치하고 활성화하기만 하면 핵심 WordPress 편집기를 사용하는 익숙한 환경에서 콘텐츠를 편집하는 경험과 함께 패턴 필터링, 생성, 복제, 편집, 삭제 등을 위한 최신 UI를 얻을 수 있습니다. 또한 카테고리, 키워드를 추가하거나 특정 사용자 지정 게시물 유형에서만 작동하도록 제한하는 것과 같이 패턴 파일에 적절하게 태그를 지정하는 것과 관련하여 이해하기 어려운 많은 복잡성이 모두 UI에서 추상화됩니다. 빌더는 사용하기 쉬운 사이드바 컨트롤을 통해 이러한 설정을 완벽하게 제어할 수 있습니다.

Pattern Manager가 출시되었으며 지금 아래 URL에서 다운로드할 수 있습니다. 한 번 사용해 보고 여러분의 생각을 알려주세요. 그리고 저에게 개인적으로 연락하셔서 여러분의 생각을 알려주시기 바랍니다. Pattern Manager를 사용해 보시기 바랍니다. 또한 WordPress 빌더 팀을 도왔던 것과 같은 방식으로 도움이 되기를 바랍니다. 감사합니다.