구텐베르크 블록 패턴의 전체 가이드(I)
게시 됨: 2020-12-23지난 주에 Matt Mullenweg는 매년 전통적으로 프레젠테이션(이 경우 가상)인 State of The Word 에서 WordPress의 현재 상태와 새로운 기능에 대한 간략한 요약을 발표했습니다.
Matt는 우리가 Gutenberg 블록 편집기가 제공하는 경험과 사랑에 빠지게 만드는 데 그 어느 때보다 집중하고 있습니다. Matt가 강조한 새로운 기능 중 하나는 WordPress 버전 5.5와 함께 제공되는 블록 패턴 입니다. 나는 그들에 대한 완전한 가이드를 만드는 것이 흥미로울 것이라고 생각했습니다.
이 가이드는 세 개의 게시물로 나누어져 있으며 다음 주제를 살펴볼 것입니다.
- 블록 패턴 소개
- 페이지에 패턴 삽입
- 사전 정의된 패턴 및 기타 디렉토리에서 사용 가능
- 디렉토리에서 사용 가능한 패턴을 사이트에 추가
- 처음부터 패턴을 만드는 방법
- 개발자가 아닌 경우 패턴을 만드는 방법
- 재사용 가능한 블록을 블록 패턴으로 변환하는 방법
- 블록 패턴을 사용한 주제
- 공식 문서.
자, 더 이상 지체하지 않고 시작하겠습니다!
1. 블록 패턴 소개
Gutenberg가 도착했을 때 WordPress에 사용했던 클래식 편집기와 관련된 가장 큰 변화는 "블록" 개념의 도입이었습니다. 게시물 제목, 단락, 목록, 이미지 등 모든 것이 블록이어야 했습니다. 각 블록은 글꼴 크기, 제목, 정렬 등을 설정하기 위한 고유한 사용자 정의 속성이 있는 블록이었습니다.
블록은 빠르게 더 정교해졌으며 이제 이미지 갤러리, 미디어/텍스트 블록 또는 다른 블록을 포함하는 블록도 있습니다.
동시에 많은 개발자들이 페이지 디자인을 개선할 수 있도록 고유한 기능을 갖춘 대규모 블록 세트를 제공했습니다. 예를 들어 Nelio에서는 간단한 슬라이더로 두 이미지를 비교하기 위해 Nelio 이미지 비교를 개발했습니다.
플러그인 및 테마에서 볼 수 있는 블록이 폭발적으로 증가했을 뿐만 아니라 다양한 버전의 WordPress와 함께 해당 기능도 발전했습니다. 따라서 현재 재사용 가능한 블록을 생성하고 이를 사용하여 페이지 또는 게시물 템플릿을 생성할 수도 있습니다.
빠르고 쉽게 재사용할 수 있는 사전 정의된 디자인을 갖는 아이디어를 계속해서 WordPress 버전 5.5에서 블록 패턴이 도착했습니다. 블록 패턴의 개념은 매우 간단합니다. 페이지 및 게시물 생성에 사용할 수 있는 블록 그룹에 의해 형성된 미리 정의된 섹션 또는 조각입니다. 이러한 패턴은 두 개의 버튼을 보여주는 섹션이나 눈길을 사로잡는 복잡한 디자인의 가격 섹션과 같이 단순한 것일 수 있습니다.
2. 페이지에 패턴 삽입
기본부터 시작하겠습니다. 페이지에 새 패턴을 삽입하는 방법은 무엇입니까? 아주 쉽게! 블록과 마찬가지로 패턴을 삽입하려면 편집기의 왼쪽 상단에 있는 + 버튼을 클릭하고 블록을 추가하는 대신 패턴 탭을 선택하면 됩니다. 거기에서 선택할 수 있는 패턴 유형, 미리 정의된 WordPress 패턴, 설치한 테마 및 플러그인과 함께 설치한 기타 패턴 유형이 있는 작은 드롭다운이 표시됩니다.
가장 마음에 드는 패턴을 선택하고 이를 구성하는 블록 세트가 페이지에 어떻게 삽입되는지 확인하세요.
패턴을 삽입한 후 지금까지 하던 대로 각 블록을 수정할 수 있습니다. 또한 해당 패턴의 블록이 그룹화되면 그룹의 속성을 전체적으로 수정할 수도 있습니다. 간단하죠?
3. 기본 패턴 및 타사 디렉터리의 추가 패턴
버전 WordPress 5.5에는 이제 페이지를 만드는 데 사용할 수 있는 미리 정의된 블록 패턴 세트가 있습니다. 위에서 언급한 + 버튼을 클릭하기만 하면 사이트에서 사용할 수 있는 패턴을 볼 수 있습니다.
또한 활성 테마는 자체 블록 패턴을 정의할 수도 있습니다. 예를 들어, Twenty Seventeen 또는 Twenty Twenty-One WordPress 테마에는 몇 가지 블록 패턴이 포함되어 있으며 GoDaddy 및 Genesis Blocks도 마찬가지입니다. 몇 가지 예를 들자면.
WordPress 5.0이 출시된 후 블록이 폭발적으로 증가했고 이제 동일한 결과를 보고 있습니다. if 블록 패턴: 나중에 설명하겠지만 웹사이트에서 블록과 패턴을 매우 쉽게 다운로드하고 설치할 수 있습니다. 여기에 두 개의 블록과 패턴 웹이 있어 마음대로 사용할 수 있지만 곧 더 있을 것이라고 확신합니다.
- Shareablock Patterns by Jeffrey Carandang – 사이트에 다운로드하여 설치할 수 있는 수많은 블록, 템플릿 및 패턴을 공유하고 얻을 수 있는 환상적인 웹사이트입니다.
- Munir Kamal의 Gutenberg Hub – 여기에서 많은 블록, 템플릿 및 패턴도 찾을 수 있습니다.
페이지에 삽입할 수 있는 1000개 이상의 타사 블록, 템플릿 및 패턴(위 디렉토리에서 사용 가능한 항목 포함)이 있는 라이브러리를 제공하는 Redux Framework 플러그인 도 있습니다. 플러그인을 사용하면 최대 5개의 무료 패턴을 다운로드한 다음 유료 버전으로 업그레이드할 수 있습니다.
4. 디렉토리에서 사용 가능한 패턴을 사이트에 추가
이미 언급했듯이 Redux Framework 플러그인을 사용하여 Shareablock 및 GutenbergHub에서 패턴을 쉽게 추가할 수 있습니다. 전문 WordPress 웹 사이트 디자이너라면 항상 원하는 만큼의 패턴을 매우 빠르게 찾을 수 있는 좋은 옵션입니다. 그러나 프리미엄 플러그인 없이도 새로운 블록 패턴을 사용할 수 있습니다. 방법을 봅시다.
Shareablock 패턴 추가
Shareablock의 경우 패턴(물론 블록 또는 템플릿)을 설치하려면 웹에서 선택하고 지금 다운로드 버튼을 클릭하기만 하면 됩니다.
처음으로 사용자 이름과 암호를 얻을 수 있도록 이메일 주소를 묻는 메시지가 표시됩니다.
이메일에는 웹사이트에 로그인할 수 있는 링크가 있습니다. 로그인하면 관심 있는 패턴을 다운로드할 수 있습니다. 선택하고 지금 다운로드 를 다시 클릭하면 이메일로 차단 패턴을 수신할 수 있습니다.
이메일에 제공된 링크를 클릭한 후 웹에 접속하여 패턴의 .json 파일을 다운로드할 수 있습니다. 다운로드한 후 WordPress 블록 편집기로 드래그하면 패턴을 구성하는 모든 블록이 자동으로 표시됩니다.
번거로운 과정이지만 작업을 완료합니다. 불행히도 블록 패턴이 라이브러리에 표시되지 않는 것을 알 수 있습니다...
구텐베르크 허브 패턴 추가
Gutenberg Hub에서 패턴을 추가하는 것이 더 쉽습니다. 이전과 마찬가지로 먼저 복사할 패턴을 선택합니다.
패턴의 오른쪽에 코드 복사 버튼이 표시됩니다. 버튼을 클릭하여 클립보드에 복사한 다음 구텐베르크 편집기에 붙여넣습니다. 이렇게 하면 편집기에 블록이 붙여넣지만 라이브러리는 건너뜁니다.
하지만 기다려! 그렇게 빠르지 않습니다. 결과 블록을 완전히 사용자 정의하려면 Munir Kamal이 편집기에 새 블록을 추가하고 고급 디자인 컨트롤, 글꼴, 아이콘, 구분선, 애니메이션 등으로 Gutenberg를 확장하는 무료 플러그인 EditorPlus를 설치하는 것이 좋습니다. 특징.
그렇게 하면 편집기의 오른쪽 사이드바에 복사된 패턴의 디자인을 수정할 수 있는 고급 컨트롤이 있는 것을 볼 수 있습니다.
이제 블록 패턴이 무엇인지, 어디서 찾을 수 있는지, 웹사이트에 삽입하여 멋진 디자인을 만드는 방법을 알게 되었습니다. 자신만의 패턴을 만드는 방법을 배울 다음 포스트를 놓치지 마세요!
Unsplash의 Raul Cacho Oses의 추천 이미지 .