WordPress 6.0의 새로운 기능: 새로운 블록, 스타일 전환, 템플릿 편집, Webfonts API 등

게시 됨: 2022-05-05

WordPress 6.0 릴리스가 얼마 남지 않았으며 평소와 같이 독자들에게 다음 WordPress 주요 릴리스에서 기대할 수 있는 사항에 대한 미리보기를 제공하기 위해 커튼 뒤를 엿보았습니다.

WordPress 5.9가 우리를 Gutenberg의 2단계의 핵심으로 이끌었다면 WordPress 6.0은 이미 사용 가능한 사용자 정의 도구를 통합하는 것을 목표로 한다고 가정해 보겠습니다.

그러나 새 버전은 그 뿐만이 아닙니다. Matias Ventura가 6.0에 대한 예비 로드맵에서 지적했듯이 사이트 편집기의 도입은 큰 이정표를 표시했지만 이는 여정의 첫 단계일 뿐입니다.

실제로 WordPress 6.0을 사용하면 다음을 포함하여 사용성에서 성능에 이르기까지 CMS의 여러 영역에서 상당한 개선을 기대할 수 있습니다.

  • 향상된 정보 아키텍처 및 템플릿 탐색 경험
  • 향상된 템플릿 생성
  • 새로운 탐색 UI
  • 사이트 편집기를 위한 새로운 탐색 모드
  • 대체 전역 스타일
  • 향상된 탐색 블록
  • 새로운 디자인 도구
  • 그리고 훨씬 더…

하지만 그게 다가 아닙니다. WordPress 6.0은 또한 편집기를 위한 400개 이상의 업데이트 및 500개 이상의 버그 수정을 포함하여 인상적인 변경, 기능 및 버그 수정을 제공합니다. 91개의 새로운 기능 및 개선 사항을 포함하여 189개 이상의 티켓이 수정되었습니다.

네, 할 얘기가 많습니다. 그러니 더 이상 미루지 말고 워드프레스 6.0의 새로운 기능을 알아보자.


날짜를 저장하십시오! WordPress 6.0은 향상된 템플릿 생성, 대체 글로벌 스타일, 새로운 블록 등을 제공하는 5월 24일에 출시될 예정입니다... 곧 출시될 WordPress 주요 릴리스의 새로운 기능을 바로 여기에서 확인하세요. Click to Tweet

웹폰트 API

새로운 Webfonts API는 이제 웹폰트를 WordPress에 로드하는 표준화된 방법을 제공하여 성능과 사용자 개인정보를 보장합니다.

WordPress 6.0부터 theme.json 에서만 새 웹폰트를 등록할 수 있습니다.

theme.json 을 사용하는 것은 매우 간단합니다. typography 섹션에 새 글꼴 모음을 추가하기만 하면 됩니다. 다음 코드는 웹폰트 등록의 예를 제공합니다:

 "typography": { "fontFamilies": [ { "fontFamily": "-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif", "name": "System Font", "slug": "system-font" }, { "fontFamily": "\"Source Serif Pro\", serif", "name": "Source Serif Pro", "slug": "source-serif-pro" }, { "fontFamily": "\"Inter\", sans-serif", "name": "Inter", "slug": "inter", "fontFace": [ { "fontFamily": "Inter", "fontWeight": "200 900", "fontStyle": "normal", "fontStretch": "normal", "src": [ "file:./assets/fonts/inter/Inter.ttf" ] } ] } ] }

위의 코드를 사용하여 Twenty Twenty-Two의 기본 fontFamilies 세트에 Inter 글꼴을 추가했습니다. 직접 사용해보고 싶다면 Google Fonts에서 Inter 웹폰트를 ./assets/fonts 폴더로 다운로드한 다음 위의 코드를 Twenty Twenty-Two's theme.jsonsettings.typography 섹션에 추가하세요. 완료되면 파일을 저장하고 사이트 편집 인터페이스로 돌아갑니다.

다음 이미지는 편집기의 결과를 보여줍니다.

Twenty Twenty-Two의 새로운 글꼴 모음을 보여주는 스크린샷.
Twenty Twenty-Two에 새로운 글꼴 패밀리가 등록되었습니다.

Webfont API는 현재 페이지에서 블록을 렌더링하는 데 필요한 글꼴만 등록하며 이는 스타일 변형에 정의된 웹 글꼴에 특히 유용합니다. 또한 API는 글꼴 패밀리별로 글꼴을 등록하고 대기열에 추가하여 HTTP 요청 수를 최적화합니다.

Webfonts API 풀 요청 및 WordPress 6.0 포함용 Webfonts API 상태에서 새 API에 대한 자세한 내용을 읽을 수 있습니다.

전역 스타일 전환

전역 스타일 변형은 WordPress 6.0에서 가장 기다려지는 기능 중 하나입니다. 이제 테마 작성자는 여러 글로벌 스타일 세트를 테마와 함께 묶을 수 있어 사용자가 클릭 한 번으로 다양한 스타일을 전환할 수 있습니다.

각 테마에 대해 미리 정의된 스타일 세트가 있는 즉시 사용할 수 있는 하위 테마를 갖는 것과 같습니다.

블록 테마에 스타일 변형을 추가하려면 테마 루트에 있는 스타일 폴더에 대체 JSON 파일을 추가합니다.

전역 스타일 변형을 지원하는 테마는 전역 스타일 사이드바에 새로운 스타일 찾아보기 항목을 표시합니다. 그러면 테마 사용자가 사용 가능한 스타일 목록을 찾는 패널이 나타납니다.

WordPress 6.0의 찾아보기 스타일 항목을 보여주는 스크린샷.
WordPress 6.0에서 스타일을 찾아보세요.

목록에서 글로벌 스타일을 선택하면 스타일이 전체 웹사이트에 자동으로 적용됩니다.

WordPress 6.0의 탐색 스타일 패널을 보여주는 스크린샷.
WordPress 6.0에서 한 번의 클릭으로 스타일 선택.

새로운 기능을 통해 테마 개발자는 스타일 변형을 무제한으로 만들고 새로운 Webfonts API와 완벽하게 짝을 이룰 수 있습니다.

다음 이미지는 제목에 다른 글꼴이 적용된 이전 예제의 사용자 정의 스타일을 보여줍니다.

WordPress 6.0의 사용자 정의 글꼴이 있는 스타일 변형을 보여주는 이미지.
WordPress 6.0의 사용자 정의 글꼴이 있는 스타일 변형.

직접 시도하려면 스타일 폴더를 블록 테마의 루트에 추가하고 의미 있는 이름을 가진 새 JSON 파일을 만들고 즐겨 사용하는 코드 편집기에서 열고 다음 코드를 추가합니다.

 { "version": 2, "settings": { "color": { "duotone": [ { "colors": [ "#143F6B", "#EFEFEF" ], "slug": "foreground-and-background", "name": "Foreground and background" }, { "colors": [ "#143F6B", "#FEB139" ], "slug": "foreground-and-secondary", "name": "Foreground and secondary" }, { "colors": [ "#143F6B", "#F6F54D" ], "slug": "foreground-and-tertiary", "name": "Foreground and tertiary" }, { "colors": [ "#F55353", "#EFEFEF" ], "slug": "primary-and-background", "name": "Primary and background" }, { "colors": [ "#F55353", "#FEB139" ], "slug": "primary-and-secondary", "name": "Primary and secondary" }, { "colors": [ "#F55353", "#F6F54D" ], "slug": "primary-and-tertiary", "name": "Primary and tertiary" } ], "palette": [ { "slug": "foreground", "color": "#143F6B", "name": "Foreground" }, { "slug": "background", "color": "#EFEFEF", "name": "Background" }, { "slug": "primary", "color": "#F55353", "name": "Primary" }, { "slug": "secondary", "color": "#FEB139", "name": "Secondary" }, { "slug": "tertiary", "color": "#F6F54D", "name": "Tertiary" } ] }, "typography": { "fontFamilies": [ { "fontFamily": "\"Inter\", sans-serif", "name": "Inter", "slug": "inter", "fontFace": [ { "fontFamily": "Inter", "fontWeight": "200 900", "fontStyle": "normal", "fontStretch": "normal", "src": [ "file:./assets/fonts/inter/Inter.ttf" ] } ] } ] } }, "styles": { "blocks": { "core/post-title": { "typography": { "fontFamily": "var(--wp--preset--font-family--inter)", "fontWeight": "700" } }, "core/query-title": { "typography": { "fontFamily": "var(--wp--preset--font-family--inter)" } } }, "elements": { "h1": { "typography": { "fontFamily": "var(--wp--preset--font-family--inter)", "fontWeight": "700" } }, "h2": { "typography": { "fontFamily": "var(--wp--preset--font-family--inter)", "fontWeight": "700" } }, "h3": { "typography": { "fontFamily": "var(--wp--preset--font-family--inter)", "fontWeight": "700" } }, "h4": { "typography": { "fontFamily": "var(--wp--preset--font-family--inter)", "fontWeight": "700" } }, "h5": { "typography": { "fontFamily": "var(--wp--preset--font-family--inter)", "fontWeight": "700" } }, "h6": { "typography": { "fontFamily": "var(--wp--preset--font-family--inter)", "fontWeight": "700" } } }, "typography": { "fontFamily": "var(--wp--preset--font-family--inter)" } } }

GitHub 및 요지에서 위의 예제에 사용된 전체 코드를 찾을 수 있습니다.

개발자는 전역 설정 및 스타일 및 Theme.json 문서 문서에서 전역 스타일 및 Theme.json에 대한 심층적인 개요를 찾을 수 있습니다.

또한 세 가지 새로운 스타일 변형이 포함된 최신 버전의 Twenty Twenty-Two를 확인할 수도 있습니다.

Twenty Twenty-Two의 스타일 탐색 패널을 보여주는 스크린샷.
Twenty Twenty-Two에서 스타일을 찾아보세요.

모든 곳에서 패턴 차단

한 가지 확실한 것은 블록 패턴은 현재 WordPress 개발 단계에서 중심적인 역할을 한다는 것입니다. WordPress 5.5에서 처음 도입된 블록 패턴은 시간이 지남에 따라 정기적으로 개선되었습니다.

또한 WordPress 5.9부터 Patterns 디렉토리에 있는 패턴이 WordPress 웹사이트로 유입되어 Patterns 디렉토리에서 동적으로 검색되고 블록 삽입기에 로드됩니다.

이제 새로운 온라인 도구 덕분에 누구나 패턴 개발자가 될 수 있습니다. 패턴 생성기를 사용하면 최상의 블록 패턴을 작성, 편집 및 패턴 디렉토리에 제출할 수 있습니다 . 시작하려면 WordPress.org 계정만 있으면 됩니다.

패턴 생성기 도구의 스크린샷.
패턴 생성기에서 이미지 검색.

그리고 WordPress 6.0은 블록 패턴에 대한 추가 개선 사항을 도입했습니다.

첫째, 템플릿 편집에서 블록 패턴을 더 쉽게 찾을 수 있습니다. 이제 빠른 삽입기는 템플릿의 최상위 수준에서 액세스할 때만 블록 패턴을 표시합니다. 즉, 템플릿에 추가하려는 블록이 문서의 직계 자손일 때입니다.

다음 조건이 충족되는 경우입니다.

  • 블록 템플릿을 편집 중입니다.
  • 빠른 삽입기는 루트 수준에 있습니다.
  • 다른 블록 사이에 블록을 추가하고 있습니다(즉, 페이지의 첫 번째 블록도 마지막 블록도 아님).
빠른 삽입기의 블록 패턴을 보여주는 이미지입니다.
빠른 삽입기는 템플릿 편집기에서 블록 패턴만 표시합니다.

이제 또 다른 유용한 기능을 통해 테마 개발자는 theme.json 에 권장 패턴을 추가할 수 있습니다. 시도하려면 Patterns 디렉토리를 검색하고 테마 사용자에게 추천할 패턴을 찾은 다음 URL에서 패턴 슬러그를 가져와 다음과 같이 theme.json 에 추가합니다.

 "patterns": [ "image-with-angled-overlay-shape-call-to-action-button-and-description", "hero-section-with-overlap-image" ],

사용자는 블록 삽입기에서 권장 패턴을 찾을 수 있습니다.

빠른 삽입기의 권장 패턴을 보여주는 스크린샷.
빠른 삽입기의 권장 패턴.

WordPress 6.0과 함께 제공되는 강력한 패턴 관련 기능은 암시적 패턴 등록입니다. 테마는 이제 테마 루트에 있는 새 /patterns 디렉토리에서 패턴을 PHP 파일로 선언하여 암시적으로 패턴을 등록할 수 있습니다.

프로세스는 매우 간단합니다.

  1. 테마의 루트에 새 패턴 폴더를 만들고,
  2. 블록 편집기에서 블록 그룹을 만들고,
  3. HTML을 복사하여 새 텍스트 파일에 붙여넣습니다.
  4. 다음 제목을 앞에 붙이고,
  5. 패턴 폴더에 파일을 PHP로 저장합니다.
 <?php /** * Title: My pattern * Slug: my-theme/my-pattern * Categories: text */ ?>

그리고 그게 다야. 이제 블록 삽입기에 표시할 새 블록 패턴이 있습니다.

빠른 블록 삽입기의 사용자 정의 패턴.
빠른 블록 삽입기의 사용자 정의 패턴.

블록 패턴 개발에 대한 보다 포괄적인 개요를 보려면 GitHub에서 추적 문제를 팔로우할 수 있습니다.

사이트 편집 기능

전체 사이트 편집 개발은 WordPress 5.9로 끝나지 않았습니다. WordPress 6.0은 시각적 테마 구축 기능을 개선하고 블록 테마에 대한 새로운 템플릿 옵션을 제공하여 작업을 한 단계 더 발전시킵니다. 그리고 더 많은 기능이 제공될 예정입니다.

비주얼 테마 빌딩

WordPress 6.0에는 모든 변경 사항 및 사용자 정의가 포함된 현재 테마를 다운로드할 수 있는 향상된 블록 테마 내보내기 도구가 도입되었습니다.

지금까지 블록 테마 내보내기 도구를 사용하지 않았다면 스타일과 템플릿을 전체 테마로 내보낼 수 있는 강력한 사이트 편집 도구입니다.

변경 사항이 만족스러우면 사이트 편집기의 인터페이스에서 옵션 사이드바를 열고 도구 섹션을 찾으십시오. 여기에서 내보내기 버튼을 사용하면 모든 스타일 및 템플릿 사용자 정의가 포함된 현재 테마를 zip 파일로 다운로드할 수 있습니다.

편집기 인터페이스의 테마 내보내기 옵션을 보여주는 이미지.
편집기의 인터페이스에서 테마를 내보냅니다.

그런 다음 테마를 내보내고 WordPress 웹 사이트에 설치할 수 있습니다.

우리는 로컬 WordPress 설치에서 개선된 테마 내보내기 도구를 테스트했으며 거의 ​​모든 것이 예상대로 작동한다는 것을 발견했습니다...

어쨌든 내보내기 도구는 아직 개발 중이며 오늘날 우리는 그 엄청난 잠재력을 볼 수 있습니다. 웹사이트의 편집 인터페이스에서 테마를 만들고 임의의 수의 설치에 배포할 가능성에 대해 생각해 보십시오. 그리고 그것은 당신이 개발자인지 아닌지…

아직 해결해야 할 미해결 문제가 많기 때문에 곧 몇 가지 개선 사항이 나타날 것이라고 생각합니다. Visual Theme Building에 대해 궁금하고 더 자세히 알고 싶다면 GitHub에서 추적 문제를 팔로우할 수 있습니다.

블록 테마의 더 많은 템플릿 옵션

이전 WordPress 버전에서는 제한된 수의 템플릿 유형을 사용할 수 있었습니다.

WordPress 5.9의 템플릿을 보여주는 스크린샷.
WordPress 5.9에 새 템플릿 추가

이제 WordPress 6.0에는 작성자, 범주, 날짜, 태그 및 분류를 포함한 여러 가지 새로운 템플릿 유형이 도입되었습니다.

WordPress 6.0의 템플릿을 보여주는 스크린샷.
WordPress 6.0에 새 템플릿 추가.

이 추가 기능은 사이트 편집 워크플로를 간소화해야 합니다. 시도해 보려면 드롭다운 목록에서 새 템플릿을 선택하고 필요한 블록을 추가하고 변경 사항을 저장하고 프런트 엔드에서 어떻게 보이는지 확인하십시오. 네, 그렇게 쉽습니다. 이제 위에서 언급한 테마 내보내기 기능과 함께 사용하면 곧 사이트 편집에서 기대할 수 있는 것을 더 잘 이해할 수 있습니다.

인터페이스 및 사용성 개선

워드프레스 6.0은 UI에 많은 변경 사항을 도입했으며 그 중 많은 부분이 사이드바에서 주문하기 위한 것입니다. 이러한 모든 변경 사항은 전체 편집 환경에 상당한 영향을 미칩니다. 여기에서는 그 중 몇 가지만 언급할 것이지만 보다 포괄적인 변경 목록은 Gutenberg 릴리스 노트에서 확인할 수 있습니다(Gutenberg 12.4, 12.5, 12.6, 12.7, 12.8, 12.9, 13.0 참조).

목록 보기 개선 사항

목록 보기는 구성 요소의 사용성을 개선하는 많은 변경 사항의 영향을 받습니다.

선택 시 목록 보기 확장

편집기에서 블록을 클릭하면 이제 블록이 목록 보기에서 자동으로 강조 표시됩니다. 블록이 상위 블록에 중첩된 경우 상위 블록이 확장되어 블록 트리에 항목이 표시됩니다.

블록 선택 시 목록 보기의 확장된 그룹 블록.
블록 선택 시 목록 보기의 확장된 그룹 블록.

기본적으로 축소된 목록 보기

WordPress 6.0 이전에는 목록 보기 패널을 열면 기본적으로 확장됩니다.

WordPress 5.9의 기본 목록 보기.
WordPress 5.9의 기본 목록 보기.

그러나 게시물은 중첩된 블록의 복잡한 구조로 구성되는 경우가 많기 때문에 목록 보기를 열 때 블록 트리가 축소되는 것은 완벽합니다.

6.0에서는 기본적으로 모든 편집기에서 목록 보기가 축소되어 블록 트리를 한 눈에 훨씬 더 쉽게 이해할 수 있습니다.

WordPress 6.0의 기본 목록 보기.
WordPress 6.0의 기본 목록 보기.

목록 보기 버튼에 초점 맞추기

목록 보기 패널을 열면 이제 초점이 목록 보기 버튼으로 올바르게 돌아갑니다. 이는 키보드에서 목록 보기를 탐색할 때 특히 유용하며 결과적으로 더 부드럽고 매끄러운 편집 환경을 제공합니다.

다중 블록 선택 및 드래그 앤 드롭

목록 보기에 대한 또 다른 변경을 통해 동일한 수준에서 여러 블록을 선택하고 목록 내의 다른 위치로 끌어다 놓을 수 있습니다.

블록 스타일 미리보기

WordPress 6.0 이전에는 블록 스타일 미리보기가 블록 사이드바에 배치되어 스타일 패널의 상당 부분을 차지했습니다.

WordPress 5.9의 블록 스타일 미리보기.
WordPress 5.9의 블록 스타일 미리보기.

6.0에서는 스타일 패널에 스타일 변형의 이름만 표시되는 반면 스타일 이름을 가리키거나 포커스를 받으면 스타일 미리보기가 사이드바 외부에 표시됩니다.

이 변경으로 사이드바 크기가 줄어들고 스타일 이름이 더 명확해집니다.

WordPress 6.0의 블록 스타일 미리보기.
WordPress 6.0의 블록 스타일 미리보기.

단락 타이포그래피 섹션

블록 사이드바에서 순서를 정하기 위해 단락 블록의 단락 시작표시문자 컨트롤이 해당 섹션에서 타이포그래피 섹션으로 이동되었습니다.

이 변경으로 모든 타이포그래피 설정 컨트롤이 이제 동일한 섹션 아래에 배치되어 보다 일관된 사용자 경험을 제공합니다.

WordPress 5.9 대 WordPress 6.0의 타이포그래피 설정을 보여주는 이미지.
WordPress 5.9 대 WordPress 6.0의 타이포그래피 설정.

도구 패널 아래로 이동된 테두리 및 색상 설정

지저분한 설정 사이드바에서 순서를 정하기 위해 테두리 설정 및 색상 설정 컨트롤이 ToolsPanel로 이동되었으며 여러 컨텍스트에서 확장 및 축소할 수 있습니다.

새로운 테두리 설정 패널
새로운 테두리 설정 패널.

이 변경 사항은 여러 블록을 사용하여 편집 환경을 간소화하고 사이드바에 더 많은 일관성을 제공해야 합니다.

WordPress 6.0의 색상 패널.
WordPress 6.0의 색상 패널.

게시 후 패널 카테고리 알림

바쁘거나 정기적으로 많은 블로그 게시물을 게시하면 태그나 카테고리를 잊어버리기 쉽습니다. 이러한 상황에 자주 노출된다면 게시물 게시 패널에 표시되는 태그 알림이 매우 유용하다는 것을 알게 될 것입니다.

이제 사이트 관리자와 작성자가 게시물에 필요한 범주가 할당되었는지 확인하는 데 도움이 되도록 WordPress 6.0에서는 범주가 아직 게시물에 추가되지 않은 경우 게시물 게시 패널에 새로운 제안: 범주 할당 패널이 나타납니다.

아래 이미지는 WordPress 5.9와 6.0의 게시 게시 패널을 비교한 것입니다.

WordPress 5.9 대 6.0의 게시 게시 패널.
WordPress 5.9 대 6.0의 게시 게시 패널.

사이트 편집기에 코드 편집기 추가

WordPress 6.0부터 코드 편집기는 이제 사이트 편집기에서도 사용할 수 있습니다. 게시물 편집기와 마찬가지로 옵션 메뉴에서 코드 편집기를 찾을 수 있습니다.

WordPress 6.0은 사이트 편집기에 코드 편집기를 추가합니다.
WordPress 6.0은 사이트 편집기에 코드 편집기를 추가합니다.

추가 개선 사항

다중 선택 – 이제 여러 블록에서 텍스트를 선택할 수 있습니다.

두 단락에 걸친 텍스트 선택을 보여주는 스크린샷.
두 단락에 걸쳐 텍스트 선택.

블록 잠금 UI – 추가 설정 드롭다운의 새로운 잠금 항목은 사용자가 블록(또는 둘 다)을 이동하거나 제거하는 것을 방지할 수 있는 팝업을 엽니다.

블록 그룹을 잠급니다.
블록 그룹을 잠급니다.

이것은 블록 편집을 제한할 수도 있는 템플릿 편집 및 재사용 가능한 블록에서 특히 유용합니다.

재사용 가능한 그룹 블록을 잠급니다.
재사용 가능한 그룹 블록을 잠급니다.

스타일 유지 – 블록을 변형하거나 새 버튼을 생성할 때 이제 여러 스타일이 유지됩니다.

아래 이미지는 다양한 스타일의 List 블록을 보여줍니다.

다양한 스타일이 적용된 List 블록의 스크린샷.
다양한 스타일이 적용된 List 블록.

목록 블록을 단락으로 변환하면 새 블록은 이전 목록 항목과 동일한 스타일을 유지합니다.

목록을 단락으로 변환하는 미리보기.
목록을 단락으로 변환합니다.

동일한 개선 사항이 Buttons 블록에 추가된 새 버튼에 적용되며 이제 인접 버튼의 스타일을 상속합니다.

새로운 코어 블록

코어 블록의 수는 지속적으로 증가하고 있습니다. 현재 사용 가능한 핵심 블록이 무엇인지 궁금하다면 이제 구텐베르크 플러그인에 포함된 전체 핵심 블록 목록을 제공하는 핸드북 페이지가 있습니다. 각 블록에 대해 이름, 범주, 지원 및 속성과 함께 블록 개발자가 좋아할 소스 코드에 대한 유용한 링크가 제공됩니다.

더 많은 블록이 WordPress 6.0과 함께 제공됩니다. 다음 버전에서 기대할 수 있는 블록을 여기에서 찾으십시오.

댓글 쿼리 루프

쿼리 루프 블록과 유사하게 새로운 댓글 쿼리 루프 블록은 게시물 댓글을 표시합니다. 개별적으로 편집하고 구성할 수 있는 여러 내부 블록이 포함된 고급 블록입니다.

아래 이미지에서 볼 수 있듯이 Comment Query Loop 블록에 포함된 블록을 선택하여 원하는 대로 모양을 사용자 지정할 수 있습니다. 블록을 더 추가하거나 기존 블록을 이동 또는 제거할 수도 있습니다(소스 코드).

주석 쿼리 루프 블록 구성.
주석 쿼리 루프 블록 구성.

더 읽어보기

새로운 사용자 정의 가능한 더 보기 블록을 사용하면 더 보기 버튼의 다양한 측면(테두리, 색상, 모서리, 타이포그래피 등)을 사용자 정의할 수 있습니다(소스 코드).

다운타임 및 WordPress 문제로 어려움을 겪고 계십니까? Kinsta는 시간을 절약하도록 설계된 호스팅 솔루션입니다! 우리의 기능을 확인하십시오

이것은 Excerpt 블록의 컨텍스트 외부에 더 읽기 링크를 추가하고 사용자 지정할 수 있기 때문에 훌륭한 추가 기능입니다.

새로운 더 읽기 블록.
새로운 더 읽기 블록.

쿼리 루프에 결과 없음

No Results 블록은 쿼리에 결과가 없을 때 표시할 텍스트나 블록을 추가할 수 있는 블록 컨테이너입니다. 쿼리 루프에 No Results 블록을 추가하려면 쿼리 루프를 선택하고 오른쪽 하단 모서리에 있는 더하기 아이콘을 클릭하여 빠른 삽입기를 시작하십시오. 그런 다음 결과 없음을 검색합니다. 블록은 쿼리 루프(소스 코드) 외부에서 사용할 수 없습니다.

쿼리 루프에 No Result 블록을 추가합니다.
쿼리 루프에 No Result 블록을 추가합니다.

아바타 및 포스트 작성자 약력

WordPress 6.0은 또한 Author 블록을 구성 요소로 분할하고 콘텐츠에서 별도로 사용하는 새로운 블록 유형을 도입했습니다.

Post Author Biography 블록은 저자의 설명(소스 코드)을 제공합니다.

Avatar 블록은 단순히 사이트 작성자(소스 코드) 중에서 선택할 수 있도록 사용자의 아바타를 보여줍니다.

WordPress 6.0의 Avatar 블록.
WordPress 6.0의 Avatar 블록.

이 블록은 작성자 정보 블록 또는 주석 컨텍스트 외부에 작성자의 아바타를 표시하는 데 특히 유용합니다. 예를 들어 모든 저자 전용 페이지 또는 사용자/독자의 리뷰를 보여주는 페이지에서 사용할 수 있습니다.

기존 블록 개선

WordPress 6.0은 또한 편집 워크플로에 잠재적으로 큰 영향을 미칠 수 있는 기존 블록에 대한 몇 가지 변경 사항 및 개선 사항을 도입합니다. 탐색 블록은 여러 변경 사항의 영향을 받지만 쿼리 루프, 추천 이미지, 그룹 및 소셜 아이콘을 비롯한 다른 블록에서도 개선된 사항을 볼 수 있습니다.

탐색 블록 개선

지난 몇 달 동안 Navigation 블록은 몇 가지 개선 사항을 받았으며 이제 훨씬 사용하기 쉬운 인터페이스를 제공합니다.

먼저 탐색 링크 블록에 풍부한 미리보기가 추가되었습니다. 공개적으로 액세스 가능한 리소스를 가리키는 링크를 추가할 때 블록 도구 모음에서 링크 버튼을 클릭하면 해당 리소스의 미리보기 이미지가 표시됩니다.

탐색 링크에 대한 풍부한 미리보기.
탐색 링크에 대한 풍부한 미리보기.

몇 가지 추가 변경 사항이 전체 편집 환경에 영향을 줍니다.

이제 새 메뉴를 추가하고 탐색 메뉴가 하나만 있으면 기본적으로 사용 가능한 메뉴만 사용됩니다. 탐색 메뉴가 하나만 있는 경우 이 변경으로 편집 작업 속도가 빨라집니다.

탐색 링크에는 사용자가 탐색 링크를 설명하는 텍스트를 입력할 수 있는 설명 필드가 이미 있었습니다. 그러나 이전 WordPress 버전에서는 테마가 이 기능을 지원할 수 없었습니다.

이제 WordPress 6.0에서는 링크 레이블 뒤에 <span class="wp-block-navigation-item__description"> 이 나타납니다.

탐색 링크 설명은 링크 레이블 뒤에 나타납니다.
탐색 링크 설명은 링크 레이블 뒤에 나타납니다.

Twenty Twenty-Two에서 .wp-block-navigation-item__description 요소는 CSS를 통해 숨겨져 있지만 테마는 링크 설명을 표시하기 위해 display: block 속성을 추가할 수 있습니다.

WordPress 6.0 및 Twenty Twenty-Two의 탐색 링크 설명.
WordPress 6.0 및 Twenty Twenty-Two의 탐색 링크 설명.

쿼리 루프 필터 및 추천 이미지

이제 쿼리 루프 필터 설정 섹션에 사용자 지정 분류에 대한 입력 필드가 표시됩니다. 이를 통해 사용자는 선택한 게시물 유형에 대해 등록된 하나 이상의 사용자 정의 분류로 현재 게시물 유형을 필터링할 수 있습니다.

이제 여러 작성자의 게시물을 필터링할 수도 있지만 이전 버전에서는 드롭다운에서 한 명의 작성자만 선택할 수 있었습니다.

WordPress 6.0의 쿼리 루프 필터 설정을 보여주는 이미지.
WordPress 6.0의 쿼리 루프 필터 설정.

또한 이제 쿼리 루프 블록 내에서 추천 이미지 차원도 설정할 수 있습니다.

쿼리 루프 블록에서 주요 이미지 차원 제어.
쿼리 루프 블록에서 주요 이미지 차원 제어.

반응형 그룹 블록의 타이포그래피 및 테두리 지원

그룹 및 행 블록은 이제 타이포그래피 설정을 지원합니다. 이 변경을 통해 사용자는 한 번에 전체 블록 그룹에 동일한 타이포그래피 설정을 적용할 수 있으므로 여러 중첩 블록이 포함된 그룹의 서식을 지정할 때 몇 번의 클릭을 절약할 수 있습니다.

그룹 블록에 대한 타이포그래피 설정.
그룹 블록에 대한 타이포그래피 설정.

그룹 블록이 더욱 개선되어 이제 클릭 한 번으로 스택 또는 행에서 블록을 쉽게 그룹화할 수 있습니다.

그룹화하려는 블록을 선택하고 블록 도구 모음에서 사용할 수 있는 세 가지 컨트롤( Group , Row , Stack ) 중 하나를 선택하기만 하면 됩니다.

블록을 그룹화하면 설정 사이드바의 새 패널에 그룹 변형 설명이 표시되어 몇 번의 클릭으로 변형을 전환할 수 있습니다.

행 블록은 블록을 가로로 표시합니다.
행 블록은 블록을 가로로 표시합니다.

WordPress 6.0은 또한 그룹 블록에 대한 여백 지원을 도입하여 사용자가 상단 및 하단 여백을 개별적으로 제어할 수 있도록 합니다.

그룹 블록으로 여백을 제어합니다.
그룹 블록으로 여백을 제어합니다.

표지 블록의 주요 이미지

이제 WordPress 6.0에서와 같이 표지 블록에서 추천 이미지를 사용할 수 있습니다. 추천 이미지 사용 토글이 블록 도구 모음에 추가되었습니다. 이 새로운 컨트롤 덕분에 클릭 한 번으로 현재 이미지에서 추천 이미지로 전환할 수 있습니다.

Cover 블록과 함께 추천 이미지를 사용하십시오.
Cover 블록과 함께 추천 이미지를 사용하십시오.

소셜 아이콘에서 레이블 표시/숨기기

소셜 아이콘 블록에 대한 작지만 유용한 개선 사항을 통해 사용자는 아이콘 링크 레이블을 켜거나 끌 수 있습니다.

레이블 표시 컨트롤을 사용하면 소셜 아이콘에서 레이블을 켜거나 끌 수 있습니다.
레이블 표시 컨트롤을 사용하면 소셜 아이콘에서 레이블을 켜거나 끌 수 있습니다.

이 옵션을 활성화하면 기본 서비스 이름을 표시하거나 아이콘에 대한 사용자 정의 레이블을 별도로 설정할 수 있습니다.

레이블 표시 옵션이 켜져 있음을 보여주는 스크린샷.
라벨 표시가 켜져 있습니다.

추가 블록 개선 사항

다가오는 WordPress 버전은 다른 많은 블록에도 많은 개선 사항을 제공합니다.

예를 들어, 이제 기둥 블록의 경계를 제어할 수 있습니다(Gutenberg 12.7).

열 블록에 대한 테두리 컨트롤입니다.
열 블록에 대한 테두리 컨트롤입니다.

또 다른 유용한 UX 개선 사항을 통해 간단한 [[ 키보드 트리거를 사용하여 내부 링크를 삽입할 수 있습니다.

WordPress 6.0에서 내부 링크를 추가하는 것이 더 쉽습니다.
WordPress 6.0에서 내부 링크를 추가하는 것이 더 쉽습니다.

이제 새로운 블록 간격 컨트롤 덕분에 갤러리 블록에서 이미지 주변의 공간을 더 쉽게 제어할 수 있습니다.

블록 간격이 없는 이미지.
블록 간격이 없는 이미지.
블록 간격이 있는 이미지.
블록 간격이 있는 이미지.

그러나 이것은 WordPress 6.0부터 볼 수 있는 몇 가지 개선 사항일 뿐입니다. 전체 목록은 Gutenberg의 릴리스 정보를 확인하십시오.

WordPress 6.0에 어떤 기능이 제공되는지 이미 알고 있습니까? 아니요... ? 그런 다음 WordPress 6.0에 대한 심층적인 미리보기를 놓치지 마세요. Click to Tweet

요약

위에서 언급했듯이 이제 우리는 Gutenberg 개발의 2단계인 Customization 단계 의 중간에 있다고 말할 수 있습니다.

전체 사이트 편집은 이제 WordPress 코어 및 6.0의 일부이며 다음 버전은 우리가 이미 가지고 있고 지금 사용할 수 있는 기능을 더욱 개선할 것입니다. 이 모든 것이 워드프레스 생태계와 웹 전체에 큰 영향을 미치며, 이 글을 쓰는 시점에서,

WordPress는 우리가 알고 있는 콘텐츠 관리 시스템을 보유한 모든 웹사이트의 64.2%에서 사용됩니다. 이는 전체 웹사이트의 43.0%입니다. (출처 W3Techs)

우리는 지금 여기에서 멈출 것입니다. WordPress 6.0과 함께 제공되는 기능 및 개선 사항 목록은 단일 게시물로 다 쓸 수 없지만, 우리가 매일 WordPress를 사용하는 방식에 가장 큰 영향을 미칠 추가 사항을 강조 표시했으면 합니다.

이제 독자들을 위한 몇 가지 질문으로 이 기사를 마무리하려고 합니다!

아래 댓글 섹션에서 커뮤니티와 생각을 공유해 주세요.