WordPress 5.9의 새로운 기능 — 전체 사이트 편집, 전역 스타일, 블록, 패턴, API, UI 개선 사항 등

워드프레스 5.9 조세핀이 나왔습니다! 올해의 첫 번째 WordPress 버전은 처음에 2021년 12월 14일에 릴리스될 예정이었습니다. 여러 미해결 문제와 해결되지 않은 버그로 인해 최종 릴리스가 연기되어 2022년 1월 25일에 마침내 릴리스되었습니다.

WordPress 5.9의 새로운 기능이 무엇인지 궁금하다면 FSE( 전체 사이트 편집 )가 짧은 대답입니다.

그리고 실제로 많은 5.9 기능은 완전히 새로운 기본 테마인 Twenty Twenty-Two와 같이 전체 사이트 편집을 지원하는 테마를 사용하는 경우에만 사용할 수 있습니다.

WordPress 5.9를 사용하면 구텐베르크 로드맵의 두 번째 단계인 사용자 지정 단계 의 핵심에 도달합니다. 이 단계는 대부분 전체 사이트 편집, 블록 패턴, 블록 디렉토리 및 블록 기반 테마에 중점을 둡니다.

다음 달에 출시될 5.9와 함께 우리는 구텐베르크의 이 사용자 정의 단계의 최소 실행 가능한 제품인 MVP에 있습니다.

2021 State of the Word에서 Matt Mullenweg의 이 단어는 새 WordPress 릴리스의 주요 기능을 가장 잘 요약합니다.

그렇다면 2022년 첫 번째 WordPress 릴리스의 새로운 기능은 무엇입니까?

알아 보자!

전역 스타일: theme.json 을 위한 그래픽 인터페이스

2021년 WordPress 5.8 릴리스와 함께 theme.json 파일 조작은 테마 개발자가 편집기 설정 및 스타일을 사용자 정의하는 표준 방법이 되었습니다.

WordPress 5.9는 사용자가 한 줄의 코드를 작성하지 않고도 전 세계적으로 또는 블록 수준에서 웹 사이트의 스타일 사전 설정을 사용자 지정할 수 있는 그래픽 인터페이스를 도입하여 다음 단계로 나아가고 있습니다.

글로벌 스타일은 WordPress 사이트 디자인의 여러 측면에 영향을 미치므로 글로벌 스타일 메커니즘은 웹사이트의 모양을 사용자 지정하는 데 사용되는 방식을 크게 변경해야 합니다.

먼저 전역 스타일 인터페이스가 사용자 지정 프로그램을 대체하며 이제 블록 테마로 설정 및 스타일을 사용자 지정할 수 있는 유일한 방법입니다. 마찬가지로 복잡한 테마 옵션 관리 페이지는 더 이상 필요하지 않습니다. 이는 테마 설정 및 스타일을 구성하는 새로운 표준 방법을 제공하는 동시에 테마 개발 워크플로를 간소화해야 합니다.

글로벌 스타일을 사용하면 WordPress 사용자는 개별 페이지 또는 게시물의 컨텍스트를 넘어 전 세계적으로 또는 블록 유형별로 웹 사이트 표시를 더 잘 제어할 수 있습니다.

이제 사이트 편집기에서 새 사이드바를 사용할 수 있으며, 상단에는 작은 미리보기 패널과 다음 순서로 4개의 구성요소가 있습니다.

• 타이포그래피
• 그림 물감
• 형세
• 블록

시간이 지남에 따라 새로운 구성 요소가 추가될 것으로 예상할 수 있습니다.

새로운 인터페이스를 자세히 살펴보겠습니다.

여기있다! WordPress 5.9에 대해 알아야 할 모든 것, 하나의 메가 포스트에 모두 포함되어 있습니다 .
[CTA]

스타일 미리보기

전역 스타일 사이드바의 첫 번째 요소는 미리보기 패널입니다. 이 패널을 사용하면 사용자 정의 결과를 확인할 수 있으며 변경 사항이 사이트 편집기 캔버스에 표시되지 않는 요소에 적용될 때 특히 유용합니다.

다음 이미지는 비교된 세 가지 스타일 조합을 보여줍니다.

타이포그래피

타이포그래피 패널은 웹사이트의 타이포그래피를 제어하는 ​​곳입니다. 물론 이 패널에서 사용할 수 있는 컨트롤은 theme.json 설정에 따라 다릅니다.

예를 들어, Twenty Twenty-One Blocks(TT1 Blocks) 테마는 다음과 같은 타이포그래피 속성을 선언합니다.

 "settings": { "typography": { "customLineHeight": true, "fontSizes": [], "fontFamilies": [] } }

다음 이미지는 전역 스타일 사이드바의 결과 타이포그래피 설정을 보여줍니다.

좀 더 자세히 살펴보고 TT1 Blocks 테마가 fontFamilies 를 선언하는 방법을 살펴보겠습니다.

 "fontFamilies": [ { "fontFamily": "-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif", "slug": "system-font", "name": "System Font" }, { "fontFamily": "Helvetica Neue, Helvetica, Arial, sans-serif", "slug": "helvetica-arial" }, { "fontFamily": "Geneva, Tahoma, Verdana, sans-serif", "slug": "geneva-verdana" }, { "fontFamily": "Cambria, Georgia, serif", "slug": "cambria-georgia" }, { "fontFamily": "Hoefler Text, Baskerville Old Face, Garamond, Times New Roman, serif", "slug": "hoefler-times-new-roman" } ]

전역 스타일 미리 보기 패널에서 다음 글꼴 모음을 확인할 수 있습니다.

그림 물감

색상 섹션에서 색상 팔레트를 보고 편집하고 여러 사이트 요소의 색상을 사용자 지정할 수 있습니다.

이러한 요소를 클릭하면 핵심, 테마 및 사용자 정의 팔레트의 세 가지 색상 팔레트에서 색상을 선택할 수 있는 새 패널에 액세스할 수 있습니다(기본 색상, 테마 색상 및 사용자 정의 색상에서 자세히 읽어보기).

이 패널에서 현재 요소의 색상을 설정하고 수정할 수 있습니다.

형세

마지막 도구 그룹은 레이아웃 사용자 지정을 위한 것입니다. 전역 컨텍스트에서 이는 사이트 컨테이너로 제한됩니다.

블록

글로벌 스타일 메커니즘의 구현으로 이제 단락(타이포그래피 및 색상), 버튼(레이아웃) 및 열(색상 및 레이아웃)과 같은 특정 블록의 모양을 변경할 수도 있습니다.

블록 스타일은 블록 이 해당 block.json 파일에서 특정 기능에 대한 지원을 선언하는 경우에만 전역 스타일 인터페이스에서 사용자 정의할 수 있습니다. 예를 들어 core/post-title 블록은 현재 다음 스타일을 지원합니다.

 "supports": { "align": [ "wide", "full" ], "html": false, "color": { "gradients": true, "link": true }, "spacing": { "margin": true }, "typography": { "fontSize": true, "lineHeight": true, "__experimentalFontFamily": true, "__experimentalFontWeight": true, "__experimentalFontStyle": true, "__experimentalTextTransform": true, "__experimentalLetterSpacing": true, "__experimentalDefaultControls": { "fontSize": true, "fontAppearance": true, "textTransform": true } } },

core/post-title 블록은 색상, 간격 및 타이포그래피를 지원하므로 게시물 제목 블록의 전역 스타일 설정에서 해당 항목을 찾을 수 있습니다.

다음 이미지는 위의 코드와 쉽게 비교할 수 있는 타이포그래피 설정을 보여줍니다.

WordPress 5.9는 Global Styles 인터페이스의 첫 번째 구현만 제공한다는 점은 주목할 가치가 있습니다. Matias Ventura가 지적했듯이 새로운 스타일 제어 기능의 추가 개발을 합리적으로 기대할 수 있습니다.

미래에는 버튼 블록을 사용자 정의하고 해당 유형의 모든 버튼에 변경 사항을 전역적으로 적용하도록 선택하는 것과 같이 로컬 스타일에서 전역 스타일로 이동할 수 있는 흐름이 시스템에 구축될 것입니다.

따라서 곧 주요 개선 사항을 볼 수 있습니다. 아래 이미지는 우리가 예상할 수 있는 예시일 뿐입니다.

추가 개선 사항에는 테마가 대체 색상 팔레트 및 여러 글로벌 스타일 변형을 제공하는 기능이 포함될 수 있습니다.

지난 주에 저는 Twenty Twenty-Two의 몇 가지 색상 + 글꼴 변형을 매우 단순한 하위 테마로 만들었습니다. 정말 가볍고 클릭 한 번으로 완전히 다른 사이트를 제공한다는 아이디어가 마음에 듭니다.https://t.co/dItIkvvhK9 pic.twitter.com/rB4CcTfW0A

— kjellr(@kjellr) 2021년 11월 15일

개발자는 전역 설정 및 스타일(theme.json) 지원 문서에서 전역 스타일 지정 메커니즘에 대해 자세히 알아볼 수 있습니다. Twenty Twenty-Two 기본 테마 소개에서 추가 예제를 찾을 수 있습니다.

탐색 블록

탐색 블록은 "가장 영향력 있는 테마 블록 중 하나"라고 불리며, 이에 동의합니다.

블록은 잠시 동안 초기 단계에 있었습니다(네비게이션 블록 추적 문제 및 추적 문제 i2 참조). 그러나 이제 WordPress 5.9 필수 항목으로 나열된 모든 보류 중인 문제와 차단기가 수정되었으므로 마침내 WordPress 5.9의 핵심에 병합된 가장 강력한 기능 중 하나를 사용할 수 있습니다.
[CTA]

탐색 블록 인터페이스에 대한 간략한 개요

새 블록을 사용하는 것은 처음에는 다소 혼란스러울 수 있지만 일단 익숙해지면 그 잠재력을 충분히 이해할 수 있을 것입니다.

탐색 블록을 처음 추가할 때 블록 자리 표시자는 기존 블록 기반 메뉴를 선택하거나, 모든 페이지가 포함된 메뉴를 생성하거나, 빈 메뉴로 새로 시작하는 세 가지 옵션을 제공합니다.

새로운 탐색 메뉴를 사용하면 클래식 테마에서 사용할 수 있는 모양 메뉴 화면을 통해 만든 메뉴를 가져올 수도 있습니다.

즉, 클래식 테마에서 블록 테마로 전환하는 경우 기존 메뉴를 다시 만들 필요가 없습니다. 현재 사용 가능한 "클래식 메뉴" 중 하나를 선택하기만 하면 자동으로 블록 기반 탐색 메뉴로 변환됩니다.

페이지의 아무 곳에나 탐색 블록을 추가할 수 있습니다. 예를 들어 긴 형식의 기사에서 목차를 만들어 사용자가 특정 콘텐츠 섹션으로 이동할 수 있도록 하는 것이 유용할 수 있습니다.

다른 유형의 블록이 메뉴에 이미 추가되지 않은 경우 오른쪽에 있는 더하기( + ) 아이콘을 클릭하면 새 탐색 링크가 탐색 블록에 즉시 추가됩니다(Gutenberg 11.7 릴리스 정보 참조).

탐색 링크 블록 도구 모음에서 편집 버튼을 클릭하면 메뉴 항목이 사용자 정의 링크로 변환됩니다. 이를 통해 항목을 개별적으로 추가, 편집, 재정렬 및 ​​제거할 수 있습니다.

블록 도구 모음에서 변환 버튼을 클릭하여 링크를 블록으로 변환할 수도 있습니다. 이렇게 하면 특정 블록을 탐색 메뉴에 직접 추가할 수 있습니다.

사용자 정의 링크, 스페이서, 사이트 로고, 홈 링크, 소셜 아이콘 및 검색 블록은 탐색 메뉴에 블록을 추가할 때 사용자에게 노출됩니다.

설정 사이드바에는 탐색 메뉴의 여러 측면을 제어하기 위한 포괄적인 옵션 세트가 있습니다.

레이아웃 패널에는 자리맞추기, 방향 및 줄 바꿈에 대한 컨트롤이 포함되어 있습니다.

탐색 블록에는 항상 켜져 있는 버거 메뉴 옵션이 있는 향상된 디스플레이 설정 패널도 있습니다.

메뉴와 하위 메뉴의 텍스트와 배경색을 사용자 정의할 수도 있습니다.

최근 탐색 블록에 추가된 또 다른 유용한 기능은 블록 간격 지원으로, 사용자가 메뉴 항목 사이의 거리를 제어할 수 있는 기능을 추가합니다.

타이포그래피 패널은 글꼴 모음, 모양, 줄 높이, 장식 및 대소문자에 대한 컨트롤 세트를 제공합니다. 이 모든 컨트롤은 오른쪽에 있는 줄임표 아이콘을 클릭할 때 나타나는 드롭다운 메뉴에서 켜고 끌 수 있습니다.

탐색 블록: Under the Hood

탐색 블록 데이터는 wp_navigation 전용 포스트 유형을 사용하여 데이터베이스에 저장됩니다.

이것이 WordPress 사용자에게 흥미로운 이유는 무엇이며 어떻게 작동합니까?

두 개의 사용자 정의 링크와 검색 상자로 구성된 탐색 메뉴를 만들었다고 가정해 보겠습니다. Twenty Twenty-Two 테마가 설치된 상태에서 메뉴는 다음 이미지와 같이 표시될 수 있습니다.

위의 탐색 블록은 다음과 같이 wp_navigation 포스트 유형으로 데이터베이스에 저장됩니다.

 <!-- wp:navigation-link {"label":"Contacts","type":"page","id":7,"url":"http://wordpress-59.local/?page_id=7","kind":"post-type","isTopLevelLink":true} /--> <!-- wp:navigation-link {"label":"About Us","type":"page","id":10,"url":"http://wordpress-59.local/?page_id=10","kind":"post-type","isTopLevelLink":true} /--> <!-- wp:search {"showLabel":false,"placeholder":"Search the site","buttonPosition":"button-inside","buttonUseIcon":true} /-->

탐색 블록 콘텐츠를 데이터베이스에 저장하면 사용자가 다른 블록 테마에서 동일한 탐색 메뉴를 사용할 수 있습니다. 메뉴가 즉시 표시되지 않으면 메뉴 선택기에서 원하는 탐색 메뉴를 선택하면 됩니다(문제 #36087 및 PR #36178 참조).

다음 이미지는 Twenty Twenty-One Blocks 테마의 위 메뉴를 보여줍니다.

탐색 블록은 여러 번 반복되었습니다. Gutenberg 11.7, 11.8 및 11.9 릴리스 정보에서 각 구현에 대해 더 자세히 알아볼 수 있습니다.

새로운 탐색 블록 개발 노트 및 탐색 블록 지원 문서에서 탐색 블록에 대한 자세한 내용을 읽을 수도 있습니다.
[CTA]

이미지 갤러리, 추천 이미지 및 사이트 아이콘

다양한 컨텍스트에서 이미지가 더 일관되게 작동하도록 하는 것을 목표로 하는 WordPress 5.9는 여러 블록에 새로운 기능과 개선 사항을 제공합니다. 갤러리 블록이 완전히 수정되었으며 추천 이미지 및 사이트 아이콘 블록에 대한 다양한 변경 사항을 통해 사용자는 각 이미지를 보다 세밀하게 제어할 수 있습니다.

리팩토링된 갤러리 블록

WordPress 5.8에서는 갤러리의 이미지 모양을 사용자 정의하는 기능이 다소 제한되었습니다. 이미지 스타일을 변경하거나 이중톤 필터를 적용할 방법이 없었습니다.

또한 갤러리의 개별 이미지에 대한 사용자 지정 링크를 추가하는 것과 같은 중요한 기능이 갤러리 이미지에서 누락되었습니다.

단일 이미지와 갤러리에 있는 이미지의 서로 다른 두 컨텍스트에 있는 이미지 사이의 비대칭에 대한 이유를 더 잘 이해하기 위해 WordPress 5.8의 코드 보기에서 갤러리 블록을 살펴보겠습니다.

이미지 세부 정보는 갤러리 블록 구분 기호에만 저장됩니다(구텐베르크 블록이란 무엇입니까? 참조).

이로 인해 개별 이미지가 갤러리의 이미지와 다르게 작동합니다.

이미지가 두 가지 다른 컨텍스트에서 일관되게 작동하도록 하기 위해 WordPress 5.9는 완전히 리팩터링된 갤러리 블록을 도입했습니다. 이 블록은 이제 정렬되지 않은 이미지 목록 대신 그림 요소 컬렉션의 컨테이너처럼 작동합니다.

WordPress 5.9에서 갤러리 이미지는 핵심 innerBlocks API를 사용하여 중첩되며 각 이미지는 개별 이미지와 마찬가지로 고유한 세부 정보 집합을 저장합니다.

갤러리 블록 이미지는 이제 이미지 크기 및 이중톤 필터와 같은 핵심 이미지 블록에서 사용할 수 있는 것과 동일한 기능 은 물론 끌어서 놓기, 복사, 복제 및 제거 기능과 같은 표준 블록 기능을 지원하기 때문에 크게 향상되었습니다. .

새로운 갤러리 블록을 사용하면 이미지에 개별적으로 스타일을 지정할 수 있습니다. 이를 통해 다양한 사용자 정의 기회를 얻을 수 있습니다.

아래 이미지는 갤러리에 있는 여러 사진을 표시하며 각각 모서리가 서로 다릅니다.

같은 갤러리의 다른 이미지에 다른 이중톤 필터를 사용할 수도 있습니다.

물론 각 이미지에 특정 CSS 클래스를 할당할 수 있으므로 갤러리 이미지에 필요한 모든 사용자 정의를 추가할 수 있는 강력한 기능이 추가로 제공됩니다.

새 갤러리 블록에 대한 자세한 내용은 갤러리 블록 리팩터 개발 노트, 향후 갤러리 블록 개선 사항 및 구텐베르크 11.4 릴리스 노트도 참조하세요.

주요 이미지 개선 사항

추천 이미지 블록에도 몇 가지 개선 사항이 적용되었습니다.

기본 치수 컨트롤

이제 추천 이미지 블록에 높이, 너비 및 크기 조절을 제공하는 새로운 치수 설정 패널이 있습니다.

치수 제어는 다음 이미지와 같이 쿼리 루프 블록의 추천 이미지에도 적용됩니다.

추천 이미지의 이중톤 필터

위에서 우리는 이제 새롭게 리팩터링된 갤러리 블록에 래핑된 이미지에 이중톤 필터를 적용할 수 있다고 언급했습니다.

이제 WordPress 5.9부터 이중톤 필터는 게시물 및 페이지 템플릿에서 쿼리 루프 블록에 이르기까지 모든 컨텍스트의 추천 이미지 블록에서도 사용할 수 있습니다.

이 기능은 사이트 전체에서 창의적이고 일관된 색상 조합의 문을 엽니다.

사이트 로고에서 이미지 자르기

WordPress 5.9(및 Gutenberg 11.6) 이전에는 로고 이미지를 업로드하기 전에만 편집할 수 있었습니다. WordPress 5.9를 사용하면 사이트 로고 블록에 사용된 이미지를 블록 도구 모음에서 직접 자르기, 확대/축소 및 회전할 수 있습니다.

새로운 디자인 도구, 블록 및 UI 개선 사항

11개의 Gutenberg 버전이 WordPress 5.9와 함께 코어에 병합되어 한 기사에서 모두 다룰 수 없을 정도로 많은 기능, 개선 사항 및 버그 수정을 제공합니다.

그래서 우리는 우리가 가장 관심을 기울일 가치가 있다고 생각하는 몇 가지를 골랐습니다. 이러한 기능 및 개선 사항에 대한 자세한 개요를 보려면 Gutenberg 10.8, 10.9, 11.0, 11.1, 11.2, 11.3, 11.4, 11.5, 11.6, 11.7, 11.8 및 11.9의 릴리스 게시물을 확인할 수도 있습니다.

즉, 이 섹션에서는 다음 변경 사항을 다룹니다.

테두리 지원 UI

WordPress 5.9부터 theme.json 이 border 설정을 선언하고 블록이 Block Supports API를 통해 테두리 지원을 선언하면 새 설정 패널에서 테두리 반경, 너비, 스타일, 색상 및 단위에 대한 컨트롤을 제공합니다(Gutenberg 11.1 참조). .

핵심 그룹 블록은 이 유용한 UI 향상의 좋은 예입니다. 이제 Group 블록의 block.json 파일에 다음 supports 선언이 포함됩니다.

 { ... "supports": { "align": [ "wide", "full" ], "anchor": true, "html": false, "color": { "gradients": true, "link": true }, "spacing": { "padding": true, "__experimentalDefaultControls": { "padding": true } }, "__experimentalBorder": { "color": true, "radius": true, "style": true, "width": true, "__experimentalDefaultControls": { "color": true, "radius": true, "style": true, "width": true } }, ... }, ... }

이 기능을 통해 사용자는 최소한의 노력으로 웹사이트에 멋진 그래픽 효과를 만들 수 있습니다. 새로운 Twenty Twenty-Two 테마와 함께 작동하는 모습을 볼 수 있습니다.

새 게시물 또는 페이지에서 새 그룹 블록을 만들고 선택합니다. 차단 설정 사이드바에 테두리 패널이 표시됩니다. 필요에 따라 테두리 너비와 스타일을 변경하고 결과를 즐기십시오.

테마 개발자이고 이 기능을 테마에 추가하려면 theme.json 파일을 열고 다음 코드와 같이 테두리 지원을 선언하세요.

 { "version": 1, "settings": { "border": { "customColor": true, "customRadius": true, "customStyle": true, "customWidth": true } } }

파일을 저장하고 WordPress 대시보드로 돌아갑니다. 새 게시물 또는 페이지에서 새 그룹 블록을 만들고 선택합니다. 이제 블록 설정 사이드바에 테두리 패널이 표시되어야 합니다(이 실험적인 theme.json 참조).

목록 보기 개선 사항

WordPress 5.9에서는 목록 보기가 개선되어 이제 끌어서 놓기, 접을 수 있는 섹션 및 HTML 앵커를 제공합니다.

목록 보기에서 끌어서 놓기

pull request #33320에서 언급했듯이 목록 보기에서 끌어서 놓기가 구현되었지만 성능 문제로 인해 비활성화되었습니다.

WordPress 5.9부터 목록 보기의 끌어서 놓기가 다시 구현되었습니다. 목록 보기의 아무 곳에서나 블록과 블록 그룹을 다시 끌어다 놓을 수 있습니다. 이것은 페이지에서 블록과 블록 그룹을 빠르고 쉽게 이동할 수 있게 해주므로 편집기의 사용성이 크게 향상되었습니다. 긴 형식의 기사 및 페이지에서 중요하며 중첩 블록의 복잡한 구조를 관리합니다.

축소 가능한 섹션 목록 보기

목록 보기의 또 다른 중요한 개선 사항은 중첩 블록의 섹션을 확장/축소하는 기능입니다. 이를 통해 복잡한 블록 구조를 쉽게 탐색할 수 있으며 나머지는 모두 축소된 상태로 단일 블록 그룹을 확장할 수 있습니다.

왼쪽 및 오른쪽 화살표를 사용하여 목록 보기 섹션을 확장하거나 축소할 수도 있습니다.

목록 보기 항목의 HTML 앵커

또 다른 유용한 개선 사항은 목록 보기에서 블록에 HTML 앵커를 추가하고 한 눈에 볼 수 있는 기능입니다.

블록 간격 조절

Gutenberg 11.4에서 처음 도입되었으며 이제 WordPress 5.9에서 코어에 병합된 새로운 블록 간격 제어를 사용하면 블록 내 항목 간의 사용자 정의 거리를 설정할 수 있습니다. 아래에서 Twenty Twenty-Two 기본 테마가 있는 Columns 블록에서 다양한 블록 간격 값으로 미리보기를 볼 수 있습니다.

간격 간격은 버튼, 이미지, 열, 제목 및 탐색을 포함한 특정 블록에 대해 처음에 사용할 수 있지만 향후 더 많은 블록으로 지원이 확장되어야 합니다.

테마는 새 appearanceTools 속성을 사용하여 theme.json 에서 간격 간격을 활성화해야 합니다. Twenty Twenty-Two에 대한 심층 분석에서 외모 도구에 대한 자세한 내용을 읽을 수 있습니다. pull 요청 #33991 및 #34630도 참조하세요.

링크 제어를 위한 리치 URL 미리보기

새로운 REST url-details 엔드포인트를 활용하여 링크 컨트롤은 이제 링크 대상 리소스에 대한 세부 정보를 보여주는 풍부한 URL 미리보기를 제공합니다.

첫 번째 구현에서 이 기능은 Post Editor 서식 있는 텍스트 구성 요소에서만 사용할 수 있었습니다. 이 글을 쓰는 시점에서는 사이트 편집기에서도 사용할 수 있지만 탐색 및 위젯 편집기에서는 사용할 수 없습니다.

링크 팝업에서 페이지 만들기

WordPress 5.9는 또한 개선된 인라인 링크 UI를 제공하여 인라인 링크 팝업에서 직접 새 페이지를 생성할 수 있는 새로운 버튼을 보여줍니다. 이 기능은 게시물 편집기에서만 사용할 수 있습니다.

검색 블록 개선

이제 검색 블록에 버튼 및 테두리 색상 설정이 표시됩니다.

이제 배경 및 텍스트 색상, 테두리 색상 및 반경을 사용자 정의할 수도 있습니다.

블록 치수에 대한 새로운 컨트롤

이제 사용자가 페이지에서 블록이 차지하는 공간을 제어할 수 있는 새로운 차원 설정 패널을 사용할 수 있습니다. 패널에는 높이, 너비, 패딩, 여백 및 가능한 정렬 컨트롤이 포함 되어야 하지만 모든 속성을 모든 블록에 사용할 수 있는 것은 아닙니다.

블록 개발자는 GitHub에 문서화된 <DimensionControl /> 구성 요소를 찾을 수 있지만 아직 실험 기능으로 표시되어 있으며 이 글을 쓰는 시점에서 주요 변경 사항이 적용될 수 있습니다.

위젯 화면에 추가된 새 위젯 그룹 블록

이제 블록 기반 위젯 편집기에서 새 위젯 그룹 블록을 사용할 수 있습니다. 최신 블록을 사용하면 클래식 테마의 위젯 편집기 및 사용자 정의 프로그램에서 제목이 있는 위젯에 블록 그룹을 추가할 수 있습니다.

블록 기반 위젯 편집기의 위젯 편집기와 사용자 정의 도구의 블록 위젯에 대한 자세한 내용을 읽을 수 있습니다.

Flex 레이아웃 및 새 행 블록

원래 Gutenberg 11.2에서 실험 기능으로 도입된 플렉스 레이아웃은 소셜 링크 및 그룹 블록을 포함한 여러 블록으로 확장되었습니다.

소셜 링크 블록과 같은 일부 블록은 이제 플렉스 레이아웃을 사용자 정의할 수 있는 도구 모음 컨트롤 및 사이드바 설정 세트를 제공합니다.

이 동일한 기능은 Gutenberg 11.5에 도입된 Group 블록의 새로운 변형인 Navigation 블록 및 Row 블록에서 사용할 수 있습니다.

다음 이미지는 설정 사이드바에 레이아웃 컨트롤이 있는 Row 블록을 보여줍니다.

아래에서 프론트엔드와 Chrome의 검사기 도구에서 동일한 Row 블록을 볼 수 있습니다.

블록 패턴 개선 사항

WordPress 5.5에서 처음 도입된 블록 패턴을 사용하면 WordPress 사용자가 클릭 몇 번으로 즉시 사용 가능한 복잡한 중첩 블록 구조를 콘텐츠에 포함할 수 있습니다.

이제 WordPress 5.9는 블록 패턴 시스템에 몇 가지 개선 사항을 도입하여 디자인 민주화 및 사용자 권한 부여를 향해 한 걸음 더 나아갔습니다.

그렇다면 WordPress 5.9에서 블록 패턴의 새로운 기능은 무엇입니까?

패턴 디렉토리의 주요 패턴

이제 블록 삽입기는 패턴 디렉토리에서 동적으로 검색된 주요 블록 패턴을 표시하여 사용자가 콘텐츠에서 사용할 인기 있는 패턴을 빠르고 쉽게 찾을 수 있도록 합니다.

마찬가지로 패턴이 WordPress 대시보드에 직접 입력됨에 따라 WordPress 개발자는 시간이 지남에 따라 점점 더 많은 패턴을 만들고 게시하도록 권장되어야 하며, 결과적으로 사용자를 위한 고급 디자인 기능이 향상됩니다.

새로운 전체 화면 패턴 탐색기

패턴 디렉토리에서 사용할 수 있는 블록 패턴의 수가 계속 증가하고 더 많은 테마가 이를 사용함에 따라 WordPress 5.9에는 새로운 블록 패턴 탐색 인터페이스인 패턴 탐색기가 도입되었습니다.

새로운 탐색 버튼은 이제 사용자가 몇 번의 클릭으로 블록 패턴을 탐색, 검색 및 삽입할 수 있는 전체 화면 모달을 엽니다. 그 결과 사용자 경험이 향상되었습니다.

Twenty Twenty-Two WordPress 테마에 대한 심층 분석에서 추가 참고 사항과 여러 블록 패턴 예제도 찾을 수 있습니다.

관심이 있고 더 자세히 알고 싶다면 Josepha Haden Chomphosy의 팟캐스트 에피소드 16 및 21을 듣고 Anne McCarthy의 WordPress 5.9 탐색 YouTube 비디오를 시청하십시오.

The Twenty Twenty-Two 테마 및 WordPress 블록 테마

WordPress 5.9를 사용하면 더 이상 WordPress 웹사이트에서 전체 사이트 편집을 활성화하기 위해 Gutenberg 플러그인을 설치할 필요가 없습니다. 블록 테마가 모든 FSE 기능을 활용하도록 허용하기만 하면 됩니다.

또한 WordPress 5.9에는 완전히 새로운 기본 테마인 Twenty Twenty-Two가 번들로 제공되며 Twenty Twenty-Two가 최초의 기본 블록 테마이기 때문에 게임 체인저입니다.

Twenty Twenty-Two는 매우 유연하고 사용자 정의 가능한 테마입니다. WordPress 5.9부터 코어에 추가된 새 템플릿 편집 흐름, 새 블록, 인터페이스 향상 및 모든 사이트 편집 기능을 시험해 볼 수 있는 완벽한 샌드박스를 제공합니다.

위에서 언급했듯이 Twenty Twenty-Two와 같은 블록 테마를 설치하고 활성화하기만 하면 됩니다. 테마가 활성화되면 WordPress 대시보드 관리 메뉴에 새 편집기(베타) 메뉴 항목이 나타납니다.

사이트 편집기 인터페이스는 이제 개선된 사이트 편집 흐름을 제공합니다. 편집 인터페이스에서 사이트의 홈페이지, 템플릿 및 템플릿 부분을 시각적으로 편집하고 전역 스타일 인터페이스에 액세스할 수 있습니다.

블록 테마를 활성화하면 사용자 지정 프로그램을 찾을 수 없습니다. 사용자 지정 프로그램은 사이트 편집기만 사용하는 블록 테마를 지원하지 않기 때문입니다. 이것이 비활성화된 블록 테마를 미리 볼 수 없는 이유이기도 합니다.

따라서 WordPress 5.9부터 사용자 정의 프로그램에 대한 액세스 포인트는 블록 테마가 활성화되어 있을 때 관리자 메뉴에서 더 이상 사용할 수 없습니다(사용하는 플러그인을 사용하지 않는 한).

여전히 전통적인 테마에 묶여 있고 이전 버전과의 호환성이 걱정된다면 안심하십시오. 테마를 계속 사용할 수 있습니다.

현재 선택할 수 있는 4가지 테마 카테고리가 있습니다.

• 블록 테마 : FSE용으로 설계된 테마
• 범용 테마 : 커스터마이저와 사이트 에디터 모두에서 작동하는 테마
• 하이브리드 테마 : theme.json과 같은 FSE 기능을 지원하는 클래식 테마
• 클래식 테마 : PHP 템플릿, functions.php 등의 테마

블록 테마가 WordPress 생태계에 미칠 영향으로 인해 Twenty Twenty-Two 및 WordPress 블록 테마를 다루는 전체 기사가 있습니다. 더 자세한 개요를 확인하려면 확인하십시오.

성능 향상

여기 Kinsta에서 우리는 웹사이트 속도에 집착합니다. 이것이 바로 WordPress 5.9와 함께 제공되는 성능 개선 사항에 대해 기쁘게 생각하는 이유입니다.

이러한 개선 사항은 블록 편집기에서 블록 테마, 지연 로딩 등에 이르기까지 CMS의 여러 영역에 영향을 미칩니다. 뛰어들어봅시다.

블록 삽입기 개선 사항

WordPress 5.9부터 블록 유형, 패턴 및 범주는 블록 삽입기에서 느리게 렌더링됩니다. 브라우저는 우선 순위가 더 높은 콘텐츠를 먼저 로드하여 사용자에게 더 부드러운 편집 경험과 향상된 성능을 제공합니다.

블록 편집기 컨텍스트에서 추가로 눈에 띄는 성능 향상은 재사용 가능한 블록과 목록 보기에 영향을 줍니다.

적은 CSS 로드

프론트엔드의 경우 WordPress 5.9는 블록 테마에 의해 로드되는 CSS의 양을 대폭 줄여 페이지 로드 속도가 훨씬 빨라졌습니다.

이 컨텍스트에서 주목해야 하는 주요 개선 사항은 수백 개의 CSS 선언을 포함하여 테마가 방대한 스타일시트를 사용하지 못하도록 하는 theme.json 설정 및 스타일 메커니즘의 도입입니다. 테마가 사용하는 CSS 코드의 양이 이제 모든 블록 유형에서 재사용할 수 있는 몇 가지 CSS 사용자 정의 속성으로 감소했습니다.

지연 로딩 성능 개선

이미지 지연 로딩은 WordPress 5.5에서 처음 도입되었습니다. WordPress 5.7부터 지연 로딩 기능이 iframe으로 확장되어 사이트 소유자가 더 빠른 웹사이트를 구축하고 SEO를 개선할 수 있습니다.

어쨌든 LCP(Large Contentful Paint)를 분석한 결과 페이지의 모든 이미지와 iframe에 loading="lazy" 속성을 할당하면 약간의 성능 저하가 발생하는 것으로 나타났습니다.

단순히 loading="lazy" 속성을 건너뛰는 것은 해결 방법이 아니었습니다. 그렇게 하면 지연 로딩의 분명한 이점을 잃게 되기 때문입니다.

최적의 솔루션은 스크롤 없이 볼 수 있는 부분에 표시되는 이미지에서 loading="lazy" 속성만 생략하는 것입니다. 그러나 loading="lazy" 속성이 서버 측에서 할당되기 때문에 WordPress는 스크롤 없이 볼 수 있는 부분에 정확히 어떤 이미지가 표시되는지 결정할 수 없습니다. 그것은 주로 활성 테마에 의존하는 것입니다.

이제 WordPress 5.9부터 트레이드 오프 솔루션으로 loading="lazy" 속성이 첫 번째 콘텐츠 이미지 또는 iframe에 적용되지 않습니다. 50개의 인기 있는 WordPress 테마에 대해 수행된 분석에 따르면 이 솔루션은 상당한 성능 향상과 페이지 로딩 속도를 최대 30%까지 향상시킵니다.

Felix Arntz는 작동 방식을 다음과 같이 설명합니다.

... 개발자가 동작을 사용자 지정하지 않고도 즉시 성능을 향상시키기 위해 WordPress는 이제 페이지의 첫 번째 "콘텐츠 이미지 또는 iframe"이 지연 로드되는 것을 건너뜁니다. 여기서 "컨텐츠 이미지 또는 iframe"이라는 용어는 현재 기본 쿼리 루프의 게시물 콘텐츠 내에서 발견되는 모든 이미지 또는 iframe과 해당 게시물의 추천 이미지를 나타냅니다. 이것은 "단일" 및 "아카이브" 콘텐츠 모두에 적용됩니다. "단일" 컨텍스트에서 (유일한) 게시물의 첫 번째 이미지 또는 iframe은 지연 로드되지 않는 반면 "아카이브" 컨텍스트에서는 첫 번째 이미지 또는 iframe이 쿼리의 첫 번째 게시물은 지연 로드되지 않습니다.

테마 개발자는 이제 새로운 wp_omit_loading_attr_threshold 필터를 사용하여 지연 로드에서 건너뛸 이미지/iframe의 수를 변경할 수 있습니다.

블록당 여러 스타일시트

블록 및 테마 개발자는 각 블록에 여러 스타일시트를 등록하고 필요할 때 다른 블록에서 스타일을 로드할 수 있습니다. 이렇게 하면 페이지 내용에 따라 스타일시트를 로드할 수 있으므로 테마가 모든 페이지에 거대한 스타일시트를 로드하는 것을 방지할 수 있습니다.

Ari Stathopoulos에 따르면:

이제 블록에서 여러 스타일시트를 등록하고 필요할 때 다른 블록에서 스타일을 로드할 수 있습니다. 테마는 어디에서나 강제로 로드되는 모놀리식 스타일시트를 로드하는 대신 블록별로 스타일을 추가할 수 있습니다. 이는 페이지 및 레이아웃 콘텐츠를 기반으로 스타일시트 로드가 최적화되지만 클래식 테마에서도 사용할 수 있는 블록 테마에 더 큰 영향을 미칩니다.

개발자를 위한 추가 기능

지금까지 논의된 많은 기능 및 UI 개선 사항 외에도 WordPress 5.9에는 개발자를 위한 몇 가지 기능도 도입되었습니다.

블록을 잠그는 새로운 속성

블록 개발자는 이제 블록 설정에 lock 속성을 추가하여 사용자가 개별 블록을 이동하거나 삭제하는 것을 방지할 수 있습니다.

 { ... "attributes": { "lock": { "type": "object", "default": { "move": true, "remove": true } } } }

이 기능이 활성화되면 사용자는 블록 콘텐츠를 편집할 수 있지만 페이지에서 블록을 이동하거나 편집기 캔버스에서 제거할 수 없습니다. 다음 이미지는 표준 도구 모음 컨트롤 세트가 있는 사용자 정의 블록을 보여줍니다.

위의 코드에서 볼 수 있는 것처럼 lock 속성을 정의하면 블록 도구 모음에서 블록 무버와 이동 및 제거 컨트롤이 숨겨집니다. 아래 이미지는 화면의 최종 결과를 보여줍니다.

블록 패턴에서 특정 블록을 잠글 수도 있습니다. 예를 들어 WordPress 5.9의 블록 잠금을 참조하십시오.

전역 설정 및 스타일에 액세스하는 새로운 API

WordPress 5.9에는 theme.json 에서 데이터를 읽는 새로운 PHP 공개 API가 도입되었습니다.

theme.json에서 설정 및 스타일 읽기

theme.json 에 선언된 settings 및 styles 섹션에서 데이터를 읽는 두 가지 새로운 함수가 있습니다.

 wp_get_global_settings( $path = array() , $context = array() ); wp_get_global_styles( $path = array(), $context = array() );

• $path 는 지정된 설정에 대한 경로를 나열하는 배열입니다.
• $context 는 해당 데이터의 컨텍스트를 설정하는 배열입니다. 개발자는 특정 블록 설정 섹션에서 읽을 수 있습니다(예: array( 'block_name' => 'core/paragraph' ) . orygin 키를 base 로 설정하면 사용자가 저장한 사용자 지정 데이터를 무시할 수 있습니다.

다음 샘플 코드는 contentSize 설정 값을 반환합니다. Twenty Twenty-Two에서는 650px 가 됩니다.

 wp_get_global_settings( array( 'layout', 'contentSize' ) );

컨텍스트를 설정하여 특정 블록의 스타일을 검색할 수 있습니다. 다음 코드는 core/button 블록의 테두리 반경 값을 검색하는 방법을 보여줍니다.

 function get_global_styles() { return wp_get_global_styles( array( 'border', 'radius' ), array( 'block_name' => 'core/button' ) ); }

위의 함수는 기본 설정, 테마 설정, 사용자 데이터를 고려하여 필요한 속성 값을 반환합니다. 사용자가 전역 스타일 인터페이스에서 버튼 테두리 반경을 구성하는 경우 사용자 정의 값이 제공됩니다.

사용자 데이터를 무시하려면 다음 코드를 사용합니다.

 function get_global_styles() { return wp_get_global_styles( array( 'border', 'radius' ), array( 'block_name' => 'core/button', 'origin' => 'base' ) ); }

생성된 스타일시트 가져오기

WordPress 5.9에는 기본, 테마 및 사용자 정의 스타일에서 스타일시트를 가져오는 새로운 기능도 도입되었습니다.

 wp_get_global_stylesheet( $types = array() );

$types 는 생성할 스타일 목록입니다.

새 API에 대한 자세한 내용은 새 API에서 전역 설정 및 스타일에 액세스할 수 있습니다.

개발자를 위한 추가 기능

개발자를 위한 추가 WordPress 5.9 변경 사항은 다음과 같습니다.

• WordPress 5.9에서 테마를 구축하는 새로운 방법인 차단 테마
• 설정, 스타일 및 theme.json에 대한 업데이트
• WordPress 5.9의 테마 중심 변경 및 필터
• WordPress 5.9의 새로운 기능 쿼리
• WordPress 5.9의 기타 핵심 변경 사항
• WordPress 5.9의 기타 블록 편집기 변경 사항
• 내부 블록 영역에 대한 더 많은 제어권 확보(블록 개발자로서)

WordPress 5.9에 대한 궁극적인 가이드: UI 개선에서 글로벌 스타일(및 그 이상!) 까지! Click to Tweet

요약

WordPress 시장 점유율에 대한 간략한 설명으로 이 기사를 마무리하겠습니다. WordPress는 현재 콘텐츠 관리 시스템이 알려진 모든 웹사이트의 65% 이상을 관리하고 있으며 전체 웹사이트의 43%보다 북쪽에 있습니다.

이러한 수치는 특히 Shopify와 같이 시장 점유율이 5% 미만인 가장 가까운 경쟁업체와 비교할 때 인상적입니다.

이것은 또한 WP CMS의 진화를 간과할 수 없다는 것을 의미합니다. WordPress의 새 버전은 새로운 기능, 인터페이스 향상, 성능 향상을 제공하며 WordPress 5.9도 예외는 아닙니다. 새로운 기능을 테스트하는 데 필요한 것은 새로운 Twenty Twenty-Two 기본 테마와 같은 블록 테마만 있으면 바로 사용할 수 있습니다.

지금 당신에게! 테마 및 FSE 차단으로 전환할 준비가 되셨습니까? WordPress 5.9에서 가장 좋아하는 변경 사항은 무엇입니까?