Drupal의 레이아웃 빌더 경험 개선

Layout Builder가 Drupal 8.6에서 도입되고 Drupal 8.7에서 안정화되었을 때 Drupal의 에코스페이스에서 사용되는 페이지 구축 메커니즘에 드리프트가 발생했습니다. 레이아웃 빌더는 단락, 벽돌, 패널 및 Display Suite와 같은 다른 도구와 치열한 경쟁을 펼쳤습니다. 구성 요소를 드래그 앤 드롭하고 실시간으로 미리 볼 수 있는 고유한 기능은 페이지 빌더 도구와 작성자에게 진정한 양보였습니다.

그러나 페이지 작성을 위한 엄청난 도구임에도 불구하고 더 나은 작성 기능, 제한된 선택, 빠른 액세스 및 더 중요하게는 다양한 사용자 역할에 대한 세분화된 권한이 필요한 엔터프라이즈 애플리케이션에 사용할 때 단점이 있습니다.

이 기사에서는 도구를 더욱 매력적이고 권위 있게 만들어 줄 멋진 레이아웃 빌더 모듈과 함께 사용할 수 있는 10개의 Drupal 기여 모듈을 다룰 것입니다. 이 대단함을 더하기 위해 이 모든 모듈은 Drupal 9와도 호환됩니다!

모듈은 특정 범주로 나뉩니다.

• 스타일 지정 - 섹션 및 블록에 적용할 수 있는 스타일 라이브러리에서 선택할 수 있는 편집기에 대한 액세스를 제공하는 기능입니다.
• 저작 경험 - 편집자가 좋아할 저작 경험을 향상시킵니다.
• 재사용성 - 페이지 작성 시간을 줄이기 위해 다른 페이지의 구성 요소 또는 섹션을 재사용할 수 있습니다.
• 빠른 액세스 - 편집기에 대한 빠른 액세스를 제공하여 특정 작업을 수행하여 시간을 절약합니다.
• 권한 - 액세스 권한에 따라 편집자 또는 기타 사용자 역할에 제한된 액세스 권한을 부여합니다.

레이아웃 빌더 스타일

레이아웃 빌더 스타일은 UI에서 바로 블록과 섹션에 스타일을 추가할 수 있는 강력한 Drupal 모듈입니다. 작성자가 백엔드에 정의된 사전 설정 스타일 목록에서 선택할 수 있는 기능을 제공하는 데 사용할 수 있습니다.

"스타일"은 적용될 하나 이상의 CSS 클래스의 표현일 뿐입니다. 또한 블록의 경우 선택한 스타일에 대한 블록 템플릿 제안이 추가됩니다.

스타일은 기본적으로 CSS 클래스를 포함하는 구성 엔티티입니다. 구성에서 추가되는 클래스는 특정 섹션이나 블록에 적용될 때 프런트엔드에 반영되도록 프런트엔드 테마 스타일시트에 정의되어야 합니다. 단일 블록 또는 섹션에 적용할 수 있는 여러 스타일을 갖는 데 사용할 수 있는 조항이 있습니다.

스타일은 구성으로 저장되기 때문에 Drupal 구성 관리를 사용하여 구성 파일로 쉽게 내보낼 수 있습니다.

그러나 페이지에 배치되는 구성 요소의 스타일을 변경할 수 있는 강력한 기능을 작성자에게 제공하므로 스타일을 추가하는 동안 책임을 져야 합니다. 제대로 계획하지 않으면 상황이 상충되는 스타일로 남을 수 있습니다.

레이아웃 빌더 구성 요소 속성

레이아웃 빌더 구성 요소 속성 모듈은 작성자에게 유사한 조항을 제공하지만 더 많은 옵션이 있으며 레이아웃에 배치되는 블록에만 해당됩니다.

종종 작성자는 특정 데이터 속성 또는 특정 CSS 클래스/ID를 블록에 추가하여 특정 방식으로 데이터를 렌더링해야 합니다. 블록 속성 및 블록 클래스와 같은 경우에 사용할 수 있는 모듈이 있지만 레이아웃 빌더의 지원이 부족하거나 작동하려면 패치가 필요합니다. 레이아웃 빌더 구성요소 속성 모듈은 이러한 세부사항을 기본적으로 레이아웃 빌더 UI에서 바로 블록에 속성으로 추가하는 옵션을 제공합니다.

모듈은 옵션 ID, 클래스(들), 스타일[블록에 인라인 스타일], 데이터-* 속성을 제공합니다. 이러한 속성은 1) 블록(외부) 요소, 2) 블록 제목, 3) 블록 내용(내부) 요소에 추가할 수 있습니다. 옵션은 각 요소 유형에 대해 구성할 수 있습니다. 예를 들어 블록 제목에 ID 필드를 사용하지 않으려면 모듈 구성 양식에서 선택 취소할 수 있습니다.

"/admin/config/content/layout-builder-component-attributes"

레이아웃 빌더 모달

Drupal의 Layout Builder Modal 모듈은 블록 구성 양식 또는 생성 양식(인라인 블록의 경우)에 대한 UI 및 저작 경험을 현대화합니다. 캔버스 외부 대화 상자 사이드바에 표시되는 양식은 매우 좁기 때문에 매우 복잡할 수 있습니다. 특히 복잡한 필드, 서식 있는 텍스트 필드, 미디어 참조 등을 처리하는 경우 캔버스 외부 대화 상자는 사용성을 크게 감소시키며 이러한 상황에는 적합하지 않습니다.

모듈은 충분한 양의 호흡 공간과 향상된 사용성이 있는 팝업 창에서 양식을 엽니다. 모달 팝업 창의 너비와 높이를 설정할 수 있는 구성이 있습니다. 기본 활성화 테마(위 스크린샷의 경우 Olivero)와 오래된 Seven 관리 테마를 선택할 수 있는 모달 콘텐츠에 사용할 테마를 선택할 수도 있습니다. 현재 Claro는 지원되지 않지만 Claro를 대안으로 사용할 수 있도록 이 전면에서 작업이 진행 중입니다.

전반적으로 이 모듈은 편집자를 위한 저작 경험과 레이아웃 빌더의 유용성을 크게 향상시킵니다.

레이아웃 빌더 라이브러리

편집자가 특정 분류 용어 선택과 같은 특정 기준에 따라 특정 콘텐츠 블록 구성 요소를 표시해야 하는 페이지를 신속하게 설정해야 하는 상황을 고려해 보겠습니다. 이제 편집자가 랜딩 페이지를 만든 다음 콘텐츠는 같지만 조건이 다른 여러 페이지에 대해 동일한 레이아웃을 계속해서 만드는 어려운 방법으로 이 작업을 수행할 수 있습니다. 또는 Layout Builder 라이브러리 모듈을 사용하십시오.

레이아웃 빌더 라이브러리 모듈은 사이트 관리자에게 각 엔티티 유형 및 번들 조합에 대해 미리 정의된 레이아웃을 생성할 수 있는 기능을 제공합니다. 이제 이러한 레이아웃은 방문 페이지 콘텐츠를 만드는 동안 사이트 편집자가 사용할 수 있습니다. 이렇게 하면 편집자가 동일한 작업을 반복적으로 다시 수행할 필요가 없는 작업이 훨씬 쉽고 빨라집니다. 이 모듈은 또한 편집자가 자신의 맞춤형 레이아웃을 생성하도록 제한하는 세분화된 권한을 제공하지만 콘텐츠 항목별로 레이아웃을 사용자 정의할 수 있는 기능을 제공합니다.

섹션 라이브러리

편집자가 라이브러리의 기존 레이아웃에서 선택해야 할 수 있는 위에서 언급한 상황과 유사하게 편집자가 여러 페이지에서 레이아웃 빌더의 특정 섹션을 재사용해야 하는 상황이 있을 수 있습니다. 여기에서 섹션 라이브러리가 작동합니다. 모듈을 사용하여 편집자는 다른 페이지에서 재사용할 수 있는 자체 미니 레이아웃을 만들 수 있습니다. 이를 통해 동일한 작업을 반복하지 않고도 페이지를 더 빠르게 생성할 수 있습니다.

이 모듈과 레이아웃 빌더 라이브러리 모듈의 주요 차이점은 후자가 전체 페이지 템플릿을 빌드하고 구성 기반이라는 것입니다. 섹션 라이브러리는 콘텐츠 기반이므로 콘텐츠 편집기는 가져오기/내보내기 구성 없이 템플릿을 즉석에서 만들 수 있으며 섹션 또는 여러 결합된 섹션(페이지) 템플릿에 대한 템플릿을 빌드합니다.

두 모듈 사이에 겹침이 없으며 두 모듈을 동시에 사용할 수 있습니다.

레이아웃 빌더 직접 추가

Layout Builder의 주요 기능 중 하나는 페이지에 특정한 재사용할 수 없는 블록인 인라인 블록을 추가하는 기능입니다. 이제 시스템의 페이지가 이러한 인라인 블록을 구성 요소로 주로 사용하는 경우 레이아웃 빌더 직접 추가는 몇 번의 클릭을 절약하여 편집자의 시간을 절약할 수 있습니다.

모듈 단순은 "블록 추가" 버튼을 시스템에서 사용할 수 있는 블록 유형에 대한 빠른 드롭다운 버튼으로 대체하고 캔버스 외부 대화 상자 사이드바를 여는 "추가" 옵션을 사용합니다. 편집기가 목록에서 블록 유형을 선택하면 해당 구성요소를 생성하기 위해 블록 양식이 직접 열립니다.

레이아웃 빌더 작업 링크

이 작은 모듈은 사이트에 대한 기능을 갖는 것이 좋습니다. 엔터티에 대한 레이아웃 빌더 UI에 액세스하려면 편집자가 페이지를 방문한 다음 작업 표시줄에서 레이아웃 탭을 클릭해야 합니다. Layout Builder Operation Link는 컨텐츠 개요 페이지의 컨텐츠에 드롭다운 버튼에 레이아웃 옵션을 추가합니다.

레이아웃 빌더가 활성화된 모든 엔티티 유형 번들에 대해 레이아웃 옵션이 표시됩니다. 이 링크는 콘텐츠 편집자가 편집 페이지를 먼저 로드하지 않고 엔터티의 레이아웃 페이지에 직접 액세스하려는 경우 클릭/페이지 로드를 저장합니다.

레이아웃 빌더 제한 사항

기본적으로 레이아웃 빌더는 다양한 플러그인 및 모듈에서 제공하는 시스템에서 사용 가능한 모든 블록을 나열하고 필드는 블록으로 사용할 수 있으며 일회성 블록을 생성하기 위한 인라인 블록 옵션이 있습니다. 그 외에도 다른 모듈과 테마에서 제공하는 모든 레이아웃은 섹션이 배치될 때 나열됩니다. 이것은 편집자에게 약간 혼란스럽고 압도적일 수 있으며 엔터프라이즈 애플리케이션에서 블록 수가 빠르게 증가할 수 있기 때문에 사용성 문제를 제기합니다.

레이아웃 빌더 제한은 필요한 옵션이 있는 구성 가능한 레이아웃을 제공하여 이 문제를 해결합니다. 이러한 옵션은 레이아웃 빌더가 엔터티 표시에 대해 활성화될 때마다 표시됩니다. 허용 목록/거부 목록 블록 및 레이아웃을 위한 모듈 구성 가능한 UI입니다. 사이트는 특정 공급자의 모든 옵션을 허용하거나 공급자별로 모든 옵션을 제한하거나 허용되는 개별 블록 및 레이아웃을 지정할 수 있습니다. 사이트 관리자는 편집자가 페이지를 작성하는 데 유용한 블록을 허용/거부할 수 있으며 편집자가 선택할 수 있는 블록과 레이아웃만 사용할 수 있습니다.

레이아웃 빌더 고급 권한

Drupal은 사용자 역할에 대한 강력한 권한 시스템을 제공하지만 역할에 따라 더 세분화된 권한이 있을 수 있습니다. 시스템 및 페이지와 상호 작용하는 여러 사용자 역할이 있는 경우 상황이 발생할 수 있습니다.

Layout Builder 고급 권한 모듈은 사이트 관리자가 역할에 따라 제한된 사용 권한을 제공할 수 있는 기능을 제공합니다. 이러한 권한은 레이아웃 빌더가 활성화된 모든 엔터티 유형에 적용되는 전역 권한입니다. 더 나아가 조잡한 수준에서 액세스를 제한하려면 다음 섹션에서 다룰 레이아웃 빌더 잠금이 유용할 것입니다.

레이아웃 빌더 잠금

위에서 언급했듯이 Layout Builder Lock은 사용자에게 보다 조잡한 액세스를 제공합니다. 이를 통해 관리자는 기본 레이아웃의 섹션을 잠글 수 있으므로 개별 엔터티에 대한 레이아웃을 재정의할 때 사용자가 특정 작업을 수행할 수 없습니다.

이러한 잠금 설정은 모듈이 설치될 때 사용할 수 있으며 모든 섹션에서 사용할 수 있습니다. 잠금 기능의 액세스를 관리하는 데 사용할 수 있는 전역 권한이 있습니다. 이들은 매우 책임감 있게 추가하고 사용해야 하는 고급 편집 기능입니다. 섹션 또는 섹션 내부의 구성 요소를 잠그면 해당 섹션이 변경 가능성에 대해 매우 제한적으로 액세스할 수 있습니다.

빠른 요약

1. 레이아웃 빌더 스타일 - 사이트 빌더가 스타일 목록에서 선택하여 레이아웃 빌더 블록 및 레이아웃 빌더 섹션에 적용할 수 있습니다.
2. 레이아웃 빌더 구성 요소 속성 - 편집자가 레이아웃 빌더 구성 요소(블록)에 HTML 속성을 추가할 수 있습니다.
3. 레이아웃 빌더 모달 - 레이아웃 빌더 UI의 모달에 기존 블록을 추가하고 구성할 수 있습니다.
4. 레이아웃 빌더 라이브러리 - 컨텐츠 편집자가 사전 정의된 레이아웃 목록에서 선택할 수 있는 레이아웃 라이브러리를 제공합니다.
5. 섹션 라이브러리 - 단일 또는 다중 섹션에 대해 재사용 가능한 템플릿을 생성합니다.
6. 레이아웃 빌더 직접 추가 - "블록 추가" 링크를 사용자 정의 블록 유형을 나열하는 드롭 버튼으로 바꿉니다.
7. 레이아웃 빌더 작업 링크 - Drupal 관리 페이지의 레이아웃 빌더 사용 콘텐츠에 '레이아웃' 작업 링크를 추가합니다.
8. 레이아웃 빌더 제한 - 레이아웃 빌더에서 배치할 수 있는 블록과 레이아웃을 설정합니다.
9. 레이아웃 빌더 고급 권한 - 보다 세분화된 권한 집합을 제공하여 레이아웃 빌더 페이지에 대한 액세스를 세부적으로 제어할 수 있습니다.
10. 레이아웃 빌더 잠금 - 관리자가 기본 레이아웃의 섹션을 잠글 수 있으므로 개별 엔터티에 대한 레이아웃을 재정의할 때 사용자가 특정 작업을 수행할 수 없습니다.