WordPress 그룹, 행 및 스택 블록을 사용하는 이유와 시기

WordPress 블록 편집기로 페이지를 만들고 편집할 때 코드를 건드리지 않고 일부 블록의 레이아웃이나 스타일을 변경하려고 하면 한 번 이상 좌절했을 것입니다. 특히 열을 만들지 않는 레이아웃을 만들기 위해 열을 만들 때 사용합니다.

이 게시물에서는 일부 페이지 부분 레이아웃에 더 적합한 대안이 있음을 알 수 있습니다. 몇 가지 예를 통해 그룹, 행 및 스택 블록 이 제공하는 가능성 중 일부가 열과 관련하여 발생할 수 있는 일부 문제를 해결하는 것을 볼 수 있습니다.

이 게시물에 표시된 예에서는 WordPress 버전 6.0.1과 Twenty Twenty-Two 테마를 사용했습니다.

열을 사용한 예

예를 들어 여행사 페이지에 표시하려는 첫 번째 섹션 콘텐츠의 두 가지 간단한 레이아웃을 살펴보겠습니다.

블록 편집기에서 첫 번째 예를 재현하기 위해 한 가지 옵션은 먼저 선택한 이미지로 표지 블록을 추가한 다음 크기가 다른 두 개의 열을 추가하는 것입니다. 오른쪽 열은 3분의 1을 차지하며 내용(예: 제목, 단락 및 두 개의 버튼)을 포함합니다.

전체 크기로 보면 레이아웃이 멋지게 보입니다. 그러나 창의 크기를 줄이면 브라우저는 디스플레이를 열 형태로 유지하고 버튼을 다른 버튼 위에 표시합니다.

이 솔루션을 사용하여 빈 열을 추가했을 뿐만 아니라 더 작은 장치에서 찾던 디스플레이와 정확히 일치하지 않는다는 것을 알 수 있습니다.

마찬가지로 두 번째 예의 경우 먼저 표지 블록을 추가한 다음 몇 개의 열을 추가하고 마지막으로 콘텐츠를 추가합니다. 이제 콘텐츠에 봉투 아이콘과 전자 메일 주소가 포함됩니다. 블록 이미지의 최소 크기가 표시하려는 크기를 초과하기 때문에 미디어 및 텍스트 블록을 사용할 수 없습니다. 그래서 다시 두 개의 열을 사용합니다. 하나는 아이콘용이고 다른 하나는 텍스트용입니다.

이전과 마찬가지로 빈 열을 추가하는 것 외에도 창의 크기를 줄임으로써 화면에 표시되는 결과가 우리가 원하는 것과 정확히 일치하지 않습니다.

이전 이미지에서 볼 수 있듯이 모든 텍스트가 왼쪽에 매우 그룹화되어 있는 것을 제외하고는 봉투 이미지와 이메일 주소의 조합이 좋지 않습니다. 비율이 손실되고 메일의 텍스트가 깨집니다.

컬럼 대신에 group, raw, stack 블록을 사용한다면 위의 문제를 어떻게 해결할 수 있는지 봅시다.

그룹 블록

그룹 블록은 아시다시피 컨테이너 내의 블록 집합을 그룹화하는 데 사용되는 블록입니다. 그것은 아이들과 함께하는 부모 블록과 같습니다.

열 또는 단락 집합을 그룹화한 다음 배경색을 설정하거나 페이지의 다른 요소에서 사용하는 고유한 간격 및 여백 소품을 정의하여 전체 그룹을 조정하는 데 가장 일반적으로 사용됩니다.

모든 콘텐츠의 최대 크기를 지정하고 특정 스타일과 색상으로 테두리를 추가할 수도 있습니다.

행 및 스택 블록

행 블록과 스택 블록은 행(또는 스택 블록이 있는 열)에 여러 블록을 삽입하고 간격을 균등하게 둘 수 있는 블록 유형입니다. 행 또는 스택 블록을 사용하여 구분선을 만들거나 열에 포함된 것처럼 동일한 줄에 여러 항목을 추가할 수 있습니다.

두 블록에서 지정할 수 있는 속성은 콘텐츠의 최대 크기를 지정할 수 없다는 점을 제외하면 그룹의 속성과 매우 유사합니다. 이 경우 컨테이너를 기준으로 전체 블록의 정당성을 추가할 수 있습니다.

열 대신 이러한 유형의 블록을 사용하여 앞의 두 가지 예를 만드는 방법과 이들이 제공하는 이점을 살펴보겠습니다.

그룹, 행 및 스택 블록의 예

열을 사용하지 않고 첫 번째 예제의 첫 번째 섹션을 만들려면 먼저 이전과 같이 이미지로 표지 블록을 만듭니다. 다음으로, 커버 블록 안에 그룹 블록을 추가합니다. 그룹 블록의 특징 중 하나는 정렬이 항상 전체 너비이고 컨테이너 중앙에 있다는 것입니다. 따라서 제목, 단락, 두 개의 블록을 추가하고 각각의 블록을 가운데 정렬하면 다음과 같은 결과가 나옵니다.

그룹 블록이 표지 블록의 오른쪽 대신 중앙에 모든 정보를 표시하기 때문에 이것은 처음에 우리가 원했던 것이 아닙니다.

그러나 표시된 텍스트가 표지 블록의 전체 너비를 차지하지 않도록 최대 너비를 지정할 수 있다는 장점이 있습니다. 그리고 열과 달리 창의 크기를 아무리 줄여도 버튼은 항상 나란히 정렬됩니다.

이미지의 오른쪽에 그룹을 표시하려면 어떻게 해야 합니까? 이것이 스택 그룹이 우리가 찾던 솔루션을 제공하는 곳입니다.

커버 블록 생성 후 스택 블록을 추가하고 오른쪽 맞춤을 설정합니다. 다음으로 크기를 제한하는 그룹 블록을 추가하고 콘텐츠를 추가합니다.

이제 빈 블록이 없으며 페이지 크기에 관계없이 페이지를 볼 때 콘텐츠는 항상 버튼이 나란히 정렬된 상태로 표시됩니다.

두 번째 예는 매우 유사하지만 아이콘과 이메일 주소 문제를 어떻게 해결합니까? 이미지 블록과 단락이 있는 행 유형 블록을 만듭니다.

이제 창 크기를 줄이면 페이지의 첫 번째 섹션 표시가 여전히 멋지게 보이며 텍스트가 깨지지 않고 이미지와 이메일 주소가 정렬된 상태로 유지됩니다.

결론

이 두 가지 예를 통해 열과 관련된 일부 레이아웃 문제가 이제 그룹, 스택 및 행 블록으로 해결될 수 있음을 알 수 있었습니다. 이러한 블록을 사용하면 콘텐츠를 정당화하고 여백을 조정할 수 있어 열에 대한 유연성을 얻을 수 있습니다. 또한 의미가 없는 빈 열을 사용하지 않아도 됩니다. 따라서 빈 열이 있는 페이지를 만드는 것은 잊어버리십시오!

Unsplash의 La-Rel Easter의 특집 이미지.