WordPress Gutenberg 블록의 사용자 정의 스타일: 1부

버전 5.0의 공식 출시가 코앞으로 다가온 지금은 WordPress 개발자가 되기에 매우 흥미로운 시기입니다. 이는 코드명 구텐베르그(Gutenberg)라는 새로운 편집기의 데뷔를 의미합니다. 개발자로서든 사용자로서 정기적으로 WordPress를 사용한다면 이것이 왜 큰 뉴스인지 이해하게 될 것입니다.

새 버전은 WordPress에 매우 다른 편집 환경을 제공하므로 모든 사람이 새 버전을 기대하는 것은 아닙니다. 이것이 더 넓은 WordPress 생태계에 어떤 영향을 미칠지는 불확실합니다. 그러나 새 편집기는 WordPress 웹 사이트의 콘텐츠를 만드는 방식에 혁명을 일으킬 가능성이 있습니다. 사용자를 끌어들이는 데 초기 저항이 있을 수 있지만(전반적으로), 궁극적으로는 기존 TinyMCE 편집기가 할 수 없는 방식으로 콘텐츠와 보다 실질적인 연결을 만들 수 있다고 생각합니다

.

WordPress 플러그인 저장소에서 Gutenberg 플러그인을 설치하여 계획된 WordPress 5.0 릴리스에 앞서 새 편집기를 사용해 볼 수 있습니다. 아직 사용해 볼 기회가 없었다면 WordPress에서 향후 편집 경험을 미리 볼 수 있도록 시도해 보시기를 적극 권장합니다!

새 편집기에서 콘텐츠를 만드는 것은 전적으로 블록을 기반으로 합니다. 편집기에 추가하는 각 콘텐츠는 블록입니다. 여기에는 슬라이더, 단락, 버튼, 목록, 이미지, 사용후기 등과 같이 즐겨찾는 모든 요소가 포함됩니다. 편집기에 블록을 추가한 후 블록의 모양과 동작을 제어하는 ​​설정을 구성할 수 있습니다. 이는 블록 자체에서 편집하거나 Inspector 패널(편집기 화면 오른쪽에 위치)을 통해 편집할 수 있습니다. 블록 설정은 두 위치에서 반복되는 경우가 있지만 이는 블록마다 다릅니다.

그러나 거의 모든 블록은 검사기 패널에서 하나 이상의 CSS 클래스 이름을 수동으로 추가하여 블록을 추가로 사용자 정의할 수 있는 옵션을 제공합니다. 이는 코어 블록이나 타사 블록의 스타일을 재정의하려는 경우 유용할 수 있습니다.

이 방법은 잘 작동하지만 이 동작을 확장하고 사전 정의된 스타일 선택 세트를 통해 블록 사용자 정의 옵션을 추가할 수 있도록 허용하는 것이 좋습니다. 이것이 바로 블록 스타일 변경으로 인해 발생하는 일이며, 이 튜토리얼에서는 이에 대해 구체적으로 집중하겠습니다.

전제조건

또한 자신의 블록에 블록 스타일 변형을 추가하는 방법과 기존 블록을 확장하는 방법도 살펴보겠습니다. 따라서 진행하려면 WordPress 플러그인 개발의 기본 사항과 블록 생성 방법을 숙지하는 것이 이상적으로 필요합니다.

하지만 당황하지 마세요. 단기 집중 교육이 필요한 경우 맞춤 블록 생성에 대한 4부작 튜토리얼을 확인하세요. 여기에는 이 튜토리얼에서 알아야 할 거의 모든 내용이 포함되어 있습니다. 단, 이 특정 튜토리얼의 초점인 블록 스타일 변경은 제외됩니다!

또한 코드를 따라가며 직접 사용해 보려면 WordPress(예: WAMP, MAMP 등)를 실행하기 위한 로컬 개발 서버와 코드 편집기가 필요합니다.

배경

블록 스타일 변형 API는 플러그인 v3.2의 프로젝트 구텐베르크에 도입되었으며 편집기 인터페이스를 통해 직접 대체 블록 스타일을 적용할 수 있습니다.

블록 스타일이 변경되기 전에 동일한 결과를 얻으려면 고급 섹션에 있는 블록 검사기 패널의 기타 CSS 클래스 텍스트 필드에 사용자 정의 CSS 클래스를 수동으로 입력해야 합니다.

블록 스타일 변경에 대한 원래 제안에 관심이 있다면 공식 Gutenberg 저장소의 풀 요청에서 전체 세부 정보를 읽을 수 있습니다.

블록에 대해 정의된 모든 스타일 변형은 블록 도구 모음에서 직접 액세스할 수 있습니다. 블록을 선택하고 도구 모음의 왼쪽 상단에 있는 아이콘을 클릭하여 블록 스타일 창을 표시합니다.

앞서 특정 블록 설정 및 검사 그룹에 블록에서 직접 액세스할 수 있다고 말한 것을 기억하시나요? 글쎄, 그것이 바로 블록 스타일 변경으로 일어나는 일입니다! Inspector 패널에서 블록이 선택되고 표시되는지 확인하십시오.

이는 편의를 위한 것이며 가장 적합한 스타일 변형을 선택할 수 있습니다. 예를 들어, 큰 화면에서는 Inspector 패널을 통해 블록 스타일을 변경하도록 선택할 수 있습니다. 마우스 클릭만으로 스타일을 전환할 수 있기 때문입니다. 그러나 소형 장치에서는 검사기 패널을 숨기고 블록 도구 모음을 통해 스타일을 변경할 수 있습니다.

코어 블록 지원

일부 핵심 블록은 현재 다음을 포함한 블록 스타일 변형을 지원합니다.

• 버튼
• 견적 인용
• 인용
• 구분 기호
• 테이블

이 기능이 널리 채택됨에 따라 향후 다른 핵심 블록에 대한 지원도 추가될 것이라고 확신합니다. 매우 유연하며 많은 사용자가 대부분의 블록에 대해 사전 정의된 스타일 옵션 중에서 선택할 수 있기를 기대합니다. 블록 스타일 변형을 사용하면 왜 이런 일이 발생하는지 쉽게 알 수 있습니다.

물론, 자신의 블록에 블록 스타일 변형을 추가할 수도 있습니다. 다음으로 구체적인 구현 세부 사항에 대해 논의하겠습니다.

블록 스타일 변경 구현

사용자 정의 블록 스타일 변경을 구현하는 방법에는 두 가지가 있습니다. 블록 정의에 액세스할 수 있는 경우 스타일 속성을 통해 registerBlockType() 함수 내에서 직접 블록 스타일 변형을 지정할 수 있습니다.

예를 들어 버튼 코어 블록 스타일 속성 정의는 다음과 같습니다.

으아아아

여기에는 세 가지 새로운 블록 스타일 변형이 등록되어 있습니다. Rounded Corners 스타일도 기본 스타일로 설정되어 있습니다.

하지만 블록 소스 코드에 접근할 수 없다면 다른 접근 방식을 취할 수 있습니다. Gutenberg 3.4에는 블록 정의 외부에서 블록 스타일 변형을 등록 및 등록 취소하기 위한 두 가지 새로운 기능이 추가되었습니다.

사용자 정의 블록 스타일 변형을 등록하려면 다음과 같이 registerBlockStyle() 기능을 사용하세요.

으아아아

이것은 핵심 버튼 블록에 custom-button-style라는 새로운 블록 스타일 변형을 추가합니다. 이제 편집기에 버튼 블록을 삽입하면 사용 가능한 새로운 블록 스타일 변형이 표시됩니다.

선택하면 블록 스타일 변형이 블록 검사기 패널의 is-style-custom-将 Button-style다른 CSS 클래스 텍스트 필드에 CSS 클래스를 추가합니다.

이렇게 하면 블록 출력 업데이트가 트리거되고 클래스가 HTML 마크업에 추가됩니다.

자신의 코드에서 registerBlockStyle() 함수를 어디에 추가해야 할지 궁금할 수도 있습니다. 걱정하지 마십시오. 다음 기사에서 전체 예제를 다룰 것이며 최종 플러그인 코드를 다운로드하여 직접 테스트할 수 있습니다.

작은 질문 하나!

블록 스타일 변형을 지원하는 블록을 처음 삽입할 때 블록 스타일 변형을 구체적으로 클릭하기 전까지는 CSS 클래스 중 하나가 기본 선택됨으로 나타나더라도 실제로 블록 태그에 추가된 CSS 클래스가 없다는 점에 유의할 가치가 있습니다.

직접 시도해 보세요.

새 버튼 블록을 편집기에 삽입하고 블록 스타일 변형 옵션을 켭니다. 기본적으로 둥근 모서리 옵션이 선택되어 있는 것을 볼 수 있습니다. 블록 검사기에서 Advanced 섹션을 열면 CSS 클래스가 텍스트 필드에 추가되지 않았습니다. 따라서 CSS 클래스는 블록 태그에 삽입되지 않습니다. 편집기에서 버튼 블록의 HTML 출력을 보고 직접 확인하세요.

이제 버튼 블록의 블록 스타일 변형 설정으로 돌아가서 기본 옵션(선택된 옵션) 또는 다른 블록 스타일 옵션을 클릭하세요. CSS 클래스가 Other CSS Classes 텍스트 필드와 블록 래퍼 태그에 추가된 것을 즉시 확인할 수 있습니다. 블록 스타일 변형을 선택한 후 사용자 정의 클래스에 정의된 모든 사용자 정의 CSS 규칙도 즉시 적용됩니다.

이 동작은 처음 접할 때 약간 혼란스럽습니다. 직관적으로 기본 선택된 블록 스타일 변형에 대해 CSS 클래스가 자동으로 추가될 것으로 예상하기 때문입니다.

결론

블록 스타일 변형이 무엇인지, 블록 편집 경험에 유용한 추가 기능인 이유를 알아봤습니다. 또한 블록 스타일 변형의 기본 구현을 보여줍니다.

다음 글에서는 자신만의 블록 스타일을 등록하는 방법과 플러그인 및 하위 테마를 통해 CSS를 연결하는 방법을 자세히 설명하겠습니다.

또한 블록 스타일 등록을 취소하는 방법과 블록이 편집기에 처음 삽입될 때 기본적으로 선택되는 스타일 변형을 설정하는 방법도 알아봅니다.

위 내용은 WordPress Gutenberg 블록의 사용자 정의 스타일: 1부의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!