워드프레스 6.2의 새로운 기능: 탐색 모드, 스타일 북, 향상된 탐색 메뉴, 새로운 API 등

WordPress 6.2는 2023년 3월 28일 에 출시될 예정이며 2023년의 첫 번째 릴리스와 함께 제공되는 기능을 살펴볼 시간입니다.

워드프레스 6.2와 함께 장기 구텐베르크 개발 로드맵의 2단계 최종 단계에 진입하고 블록 편집기는 공식적으로 베타 단계를 떠납니다.

이 릴리스는 주로 인터페이스를 개선하고 편집 환경을 간소화하는 데 중점을 둡니다.

템플릿과 템플릿 부분 사이를 탐색하는 새로운 접근 방식이 도입되었을 뿐만 아니라 위젯을 블록 테마로 가져오는 기능, 산만하지 않은 새로운 쓰기 모드, 확장된 블록 설정 환경, 기존 블록에 대한 수많은 크고 작은 개선 사항이 도입되었습니다. , 성능 및 유용성.

그러나 기능과 유용성 측면에서 도약하는 것이 있다면 탐색 블록입니다. 탐색 메뉴는 처음 출시된 이후 여러 차례 반복되어 시간이 지남에 따라 편집 프로세스가 상당히 간소화되었습니다. WordPress 6.2에서는 개발이 계속되고 있으며 이 기사에서는 이제 탐색 메뉴를 얼마나 쉽게 관리할 수 있는지 보여줍니다.

향상된 편집 경험

WordPress 6.2는 전체 사이트 구조가 중앙에 배치되어 향상된 편집 환경을 제공합니다. 이제 탐색 메뉴를 더 쉽게 관리하고, 단일 블록에서 전역 스타일로 스타일 변경을 푸시하고, 색상이 지정된 템플릿 부분과 재사용 가능한 블록으로 템플릿과 템플릿 부분 사이를 쉽게 탐색할 수 있습니다.

하지만 더 많은 것이 있습니다. 편집기 인터페이스의 주요 추가 사항 및 변경 사항을 자세히 살펴보겠습니다.

개선된 사이트 편집기 인터페이스 및 탐색 모드

WordPress 6.2에서는 편집기 인터페이스에 대한 몇 가지 개선 사항이 핵심입니다. 첫 번째이자 가장 흥미로운 업데이트는 사이트 편집기 인터페이스에 영향을 미칩니다. 새로운 찾아보기 모드 덕분에 이제 템플릿과 템플릿 부분을 보다 쉽게 ​​탐색할 수 있습니다.

새 인터페이스를 사용하면 메뉴 제목 오른쪽에 있는 더하기(+) 아이콘을 클릭하기만 하면 편집기의 사이드바에서 직접 새 템플릿 또는 템플릿 부분을 추가할 수 있습니다.

Wp Core 및 Documentation 기고자인 Ryan Welcher에 따르면 "이 기능에 대한 작업이 진행 중이며 새로운 Gutenberg 버전이 출시됨에 따라 계속 개선될 것입니다."

이제 워크플로가 더 매끄럽고 원활해졌습니다. 현재 템플릿/템플릿 부분 편집을 시작하려면 왼쪽 메뉴에서 편집 버튼을 클릭하거나 페이지 중간에 있는 템플릿 미리보기를 클릭하십시오.

산만 무료 모드

워드프레스 6.2는 캔버스에서 혼란을 없애고 페이지의 내용에 집중할 수 있게 해주는 새로운 Distraction Free 편집 모드를 도입했습니다.

오른쪽 상단 모서리에 있는 줄임표(점 3개) 아이콘을 클릭하면 표시되는 옵션 패널에서 이 기능을 활성화할 수 있습니다.

Distraction Free 모드가 활성화되면 관련 없는 사이드바와 도구 모음이 사라지고 작업 중인 콘텐츠만 화면에 남습니다.

탭 블록 검사기

워드프레스 6.2에는 설정 컨트롤을 별도의 패널로 나누어 사이드바에 질서를 부여하는 것을 목표로 하는 새로운 블록 검사기가 도입되었습니다.

이제 블록 설정이 탭으로 구분되어 스타일 설정을 다른 블록 설정과 구분합니다.

사용 가능한 경우 블록 검사기 탭은 다음 순서로 표시됩니다.

• 목록 보기: 탐색 블록의 하위 메뉴 및 링크와 같은 블록의 하위 항목을 관리하기 위한 컨트롤을 포함합니다.
• 설정: 블록의 모양과 관련 없는 구성 설정을 포함합니다.
• 모양: 타이포그래피 및 색상과 같이 현재 블록의 스타일과 특별히 관련된 설정을 포함합니다.

이것은 특히 그룹 블록 또는 탐색 블록과 같은 많은 구성 옵션이 있는 고급 블록의 경우 인터페이스의 유용성이 눈에 띄게 개선되었습니다.

참고:

• 새로운 Inspector는 표시할 요소가 포함된 경우에만 탭을 표시합니다.
• 설정 탭에 고급 패널만 있는 경우 모양 탭으로 이동됩니다.
• Block Inspector에 탭이 하나만 있는 경우 WordPress 6.2 이전과 같이 표시됩니다.

새로운 Block Inspector에 대한 자세한 내용은 개발자 노트를 확인하세요.

색상화된 템플릿 부품 및 재사용 가능한 블록

그룹 및 블록과 더 쉽게 구분할 수 있도록 이제 템플릿 부품 및 재사용 가능한 블록이 목록 보기, 블록 삽입기, 블록 도구 모음 및 편집기 캔버스에서 다른 색상으로 강조 표시됩니다.

이는 아래 이미지와 같이 사이트 편집기와 게시물 편집기 모두에서 발생합니다.

개선된 블록 삽입기

블록 삽입기는 전체 편집 환경을 크게 개선하는 몇 가지 변경 사항의 영향을 받습니다.

첫째, 새로운 인터페이스 디자인은 패턴과 미디어 범주 간의 탐색을 개선하고 패턴 및 미디어 항목에 대한 더 큰 미리보기를 제공합니다.

사이트에 미디어가 있는 경우 블록 삽입기에 미디어 탭이 표시되어 콘텐츠 내 미디어 삽입을 단순화합니다. 이미지/미디어를 끌어다 놓거나 단순히 미디어를 클릭하여 콘텐츠에 추가할 수 있습니다.

블록 삽입기의 미디어 탭” width=”1296″ height=”1420″ class=”size-full wp-image-148375″> 블록 삽입기의 새로운 미디어 탭

탭 내에서 미디어 라이브러리 열기 버튼을 누르면 WordPress Media Lybrary로 이동합니다.

블록 삽입기의 Openverse 통합

Openverse는 누구나 사용할 수 있도록 공개 라이선스 또는 퍼블릭 도메인 저작물을 공유하는 것을 목표로 하는 도구입니다. 이제 WordPress 6.2에서 Openverse가 블록 삽입기에 통합되었습니다.

이 새로운 기능에 액세스하려면 블록 삽입기의 미디어 탭을 클릭하십시오. 이것은 Openverse 리포지토리에서 직접 가져온 검색 필드와 이미지 미리보기가 있는 패널을 보여줍니다.

기술 세부 정보는 Openverse 통합 풀 요청을 참조하세요.

블록 테마로 위젯 마이그레이션

WordPress 6.2부터 클래식 테마를 사용하여 사이트를 운영하는 사용자가 블록 테마로 전환하기로 결정하면 기존 위젯 영역을 새 테마로 마이그레이션하여 템플릿 부분으로 변환할 수 있습니다.

어떻게 작동하는지 알아봅시다.

먼저 클래식 테마에 위젯 영역을 생성합니다. 예를 들어 Twenty-Eleven을 활성화하고 바닥글 영역 1에 달력을 추가할 수 있습니다.

이제 테마를 Twenty Twenty-Three로 변경합니다. 사이트 편집기를 열고 편집할 템플릿을 선택한 다음 템플릿 부분을 추가합니다.

블록 사이드바의 위젯 영역 가져오기 드롭다운 메뉴에서 가져올 위젯 영역을 선택합니다.

그리고 그게 다야. 이제 다른 템플릿 부분처럼 이전 위젯 영역을 관리할 수 있습니다.

문서 세부 정보 및 목록 보기 결합

워드프레스 6.2 이전에는 편집기 도구 모음에 세부 정보 및 목록 보기 에 대한 두 개의 별도 버튼이 있었습니다. 다음 이미지에서 WordPress 6.1의 문서 세부 정보 팝오버를 볼 수 있습니다. 여기에는 단어 수, 문자 수, 읽는 시간, 헤더, 단락 및 블록 수와 문서 개요가 포함됩니다.

WordPress 6.2부터 목록 보기 및 세부 정보가 목록 보기 및 개요의 두 탭으로 나누어진 단일 문서 개요 패널로 이동되었습니다.

이 변경으로 인해 문서를 보다 쉽게 ​​관리할 수 있습니다.

확장된 블록 기능

WordPress 6.2에서는 여러 코어 블록 유형의 기능이 확장되었습니다. 편집 환경에 대한 몇 가지 변경 사항 및 개선 사항의 영향을 받는 탐색 블록의 경우 특히 그렇습니다.

주요 변경 사항을 자세히 살펴보겠습니다.

탐색 블록에 대한 목록 기반 편집

WordPress 6.2 릴리스에서는 블록 설정 사이드바의 목록 보기에서 탐색 블록 요소의 배열을 변경할 수 있습니다.

메뉴 항목을 클릭하면 선택한 페이지 링크의 설정 사이드바로 이동하여 레이블, URL, 설명, 링크 제목 및 링크 상대를 포함한 링크 세부 정보를 편집할 수 있습니다.

이 변경 사항은 탐색 메뉴의 편집 환경을 크게 단순화하여 메뉴에서 항목을 추가, 정렬 및 삭제하거나 새 탐색 메뉴를 만들 수도 있습니다.

내비게이션 잠금

탐색 블록의 또 다른 개선 사항은 보다 세분화된 방식으로 메뉴 편집을 잠그는 기능입니다. 이제 편집 제한 , 이동 비활성화 및 제거 방지 를 사용할 수 있지만 WordPress 6.1에서는 편집 제한 및 이동 비활성화 옵션만 사용할 수 있었습니다.

또한 선택한 옵션은 내부 블록(링크 및 하위 메뉴)에도 적용할 수 있습니다.

블록 도구 모음에서 캡션 추가/제거

새로운 추가/제거 캡션 버튼을 사용하면 사용자가 여러 블록(오디오, 비디오, 이미지)에 대한 블록 도구 모음에서 캡션을 제어할 수 있습니다.

이미 캡션을 설정한 경우 콘텐츠에 이미지를 추가하면 캡션이 자동으로 포함됩니다.

페이지 목록 블록 개선 사항

두 가지 개선 사항에는 페이지 목록 블록이 포함됩니다.

먼저 페이지 목록 블록을 확장하여 목록 보기 패널에 페이지 목록을 표시할 수 있습니다.

또한 이제 블록 사이드바의 새 옵션을 사용하여 시작 페이지를 설정하고 블록에서 해당 페이지의 내림차순 페이지만 표시할 수 있습니다.

새 그룹 블록 자리 표시자

이제 그룹 블록 자리 표시자는 블록이 페이지 콘텐츠에 추가될 때 변형 선택기를 표시합니다.

스티키 포지셔닝 블록 지원

워드프레스 6.2에는 고정 위치 지정으로 시작하는 새로운 위치 블록 지원 기능이 도입되었습니다.

이 새로운 기능은 현재 기본적으로 선택되어 있는 그룹 블록에만 적용됩니다.

테마 개발자는 theme.json 의 appearanceTools 기능을 사용하여 테마에 고정 위치 지정을 활성화할 수 있습니다. 모양 도구를 보다 세부적으로 제어하려면 settings.position.sticky 소품을 true 로 설정할 수도 있습니다.

Inspector 컨트롤 사이드바의 위치 패널에서 고정 위치 지정을 활성화할 수 있습니다.

고정 위치 지정이 켜져 있으면 HTML 태그는 is-position-sticky 클래스를 가져오고 일부 CSS 규칙이 해당 요소에 적용됩니다.

 .wp-container-6 { top: calc(0px + var(--wp-admin--admin-bar--position-offset, 0px)); position: sticky; z-index: 10; }

고정 위치 지정은 문서의 루트에 있는 그룹 블록 에 대해서만 작동합니다. 이렇게 하면 사용자의 혼란과 오류를 방지할 수 있지만 현재 내장 고정 위치 지정이 약간 까다롭다는 것을 알 수 있습니다(WordPress 웹사이트에 고정 헤더를 추가하는 다른 방법을 확인하고 싶을 수 있습니다). 그러나 개발자 노트에 따르면

... 수동 테스트에서 피드백에 따르면 추가 UI 또는 UX 작업 없이 실수로 루트가 아닌 블록을 고정으로 설정하거나 예를 들어 헤더 템플릿 부분 내의 블록을 어려운. 결정은 중첩 블록에 적합한 솔루션을 탐색하는 데 더 많은 시간을 허용하기 위해 기능을 6.2의 루트 블록으로 다시 축소하는 것이었습니다.

위치 지정 기능은 개별 블록에서만 사용할 수 있으므로 전체 스타일에서는 찾을 수 없습니다.

블록 편집 경험에 대한 추가 개선 사항

블록 편집에 대한 다른 주목할만한 업그레이드는 다음과 같습니다.

• 이제 빈 단락에 이미지를 끌어다 놓아 이미지 블록으로 바꿀 수 있습니다.
• 타이포그래피 컨트롤이 패널로 그룹화되었습니다. 이렇게 하면 스타일 인터페이스가 설정 인터페이스와 더 일관되고 유용성이 향상되어 이제 블록 설정 인터페이스에서와 같이 컨트롤을 표시하거나 숨길 수 있습니다.

  

• 이제 전역 스타일 인터페이스에서 직접 제목 블록의 문자 간격을 수정할 수 있습니다.
• 이제 캘린더 블록의 배경, 링크 및 텍스트 색상을 설정할 수 있습니다.
• 웹 페이지의 구조를 더 잘 반영하기 위해 두 개의 새로운 배너 및 바닥글 블록 패턴 범주가 도입되었습니다.
• 이제 [[ 단축키를 사용하여 모든 블록의 링크를 자동 완성할 수 있습니다. 이 변경 전에 블록은 __experimentalSlashInserter 사용하여 링크 자동 완성에 대한 지원을 명시적으로 선언해야 했습니다.
• 새로운 control + option + 1 – 6 키보드 단축키를 사용하면 단락을 제목으로 변환할 수 있습니다.
• 페이지 목록 블록은 이제 글꼴 패밀리, 글꼴 크기, 모양, 줄 높이, 문자 간격, 장식 및 대소문자를 포함한 모든 타이포그래피 옵션을 지원합니다.

  

  

향상된 설계 도구

WordPress 6.2에 도입된 많은 새로운 기능과 개선 사항은 CMS의 스타일 및 디자인 기능을 향상시킵니다. 다음은 6.2와 함께 제공되는 가장 흥미로운 디자인 관련 기능 목록입니다. 아래에서 각각 자세히 설명하겠습니다.

스타일북

WordPress 6.2에는 사용자가 템플릿/템플릿 부분에 해당 블록을 추가하지 않고도 자신의 웹 사이트에서 사용할 수 있는 모든 블록을 미리 볼 수 있는 새로운 스타일 북 기능이 도입되었습니다. 이제 전체 스타일 내의 스타일 헤더에 표시되는 스타일 책 열기 버튼(눈 아이콘)을 클릭하여 스타일 책을 시작할 수 있습니다.

이렇게 하면 카테고리별로 모든 코어 및 타사 블록의 미리보기를 보여주는 인터페이스가 열립니다.

새로운 Style Book 인터페이스는 단일 중앙 위치에서 모든 블록 스타일의 미리보기를 제공하여 디자인 프로세스를 단순화합니다.

기술적인 관점에서 새로운 인터페이스는 iframe에 등록된 모든 블록의 미리 보기를 표시하기 위해 @wordpress/edit-site 에 추가된 새로운 StyleBook 구성 요소에 의해 생성됩니다(PR #45960 참조).

동일한 인터페이스는 개별 블록의 미리보기도 제공합니다. 예를 들어, 다음 이미지는 사용자 지정된 캘린더 위젯의 미리보기를 보여줍니다.

개발자는 두 가지 방법으로 삽입 및 미리보기에서 블록을 숨길 수 있습니다. 먼저, block.json 에서 supports.inserter false 로 설정할 수 있습니다.

 { "supports": { "inserter": false } }

블록 미리보기를 숨기는 또 다른 방법은 Inspector 도움말 패널에서 블록 미리보기를 생성하는 데 사용되는 example 속성을 피하는 것입니다(자세한 내용은 여기 참조).

전역 스타일의 그림자

WordPress 6.2에서는 이제 전역 스타일 또는 theme.json을 사용하여 일부 블록에 그림자를 추가하고 사용자 지정할 수 있습니다(이 글을 쓰는 시점에서 그림자 기능은 버튼 블록에서만 사용할 수 있음).

첫째, 이 기능을 지원하는 테마에서 전역 스타일 인터페이스에서 그림자를 추가할 수 있습니다.

실제 작동을 보려면 Twenty Twenty-Three 테마를 활성화하고 Styles > Blocks > Button 으로 이동한 다음 Shadow 버튼을 클릭합니다.

그림자 팝업을 사용하면 테마 사전 설정에서 그림자를 선택할 수 있습니다.

테마 개발자와 고급 사용자는 theme.json을 사용하여 블록에 그림자를 추가할 수도 있습니다. 다음 정의는 버튼 블록에 4px 검은색 그림자를 추가합니다.

 "styles": { "blocks": { "core/button": { "shadow": "4px 4px #000000" } } },

테마 사용자가 스타일 인터페이스에서 하나를 선택할 수 있도록 사전 설정을 정의할 수도 있습니다.

 "settings": { "shadow": { "presets": [ { "shadow": "4px 4px #FF0000", "name": "Red", "slug": "red" }, { "shadow": "4px 4px #00FF00", "name": "Green", "slug": "green" }, { "shadow": "4px 4px #0000FF", "name": "Blue", "slug": "blue" } ] }, }

일단 정의되면 사전 설정이 블록 스타일의 그림자 패널에 나타납니다.

사전 설정 값을 선택하고 블록 기본값으로 사용할 수도 있습니다.

 "styles": { "blocks": { "core/button": { "shadow": "var(--wp--preset--shadow--blue)" } } }

새로운 최소 높이 치수 제어

WordPress 6.2부터 그룹 및 게시물 콘텐츠 블록에 대한 블록 설정 사이드바의 크기 패널은 이제 appearanceTools 기능을 사용하여 테마에서 기본적으로 활성화되는 새로운 최소 높이 컨트롤을 제공합니다.

이 새로운 컨트롤을 통해 사용자는 그룹 및 게시물 콘텐츠 블록의 최소 높이를 설정할 수 있으며 콘텐츠가 적은 경우에도 페이지 하단에 바닥글을 렌더링하는 데 사용할 수 있습니다.

새로운 수직 정렬 도구와 결합하여 페이지 상단/중앙/하단에서 내부 요소를 수직 정렬할 수도 있습니다.

개발자는 theme.json 에 minHeight 설정을 추가하여 테마에 대한 최소 높이 지원을 추가할 수 있습니다.

 { "settings": { dimensions: "minHeight": true } }

appearanceTools 속성을 사용할 수도 있습니다.

 { "settings": { "appearanceTools": true } }

새로운 minHeight 속성을 사용하여 theme.json 에서 직접 특정 값을 설정할 수도 있습니다.

 { "styles": { "blocks": { "core/post-content": { "dimensions": { "minHeight": "80vh" } } } } }

블록 개발자는 supports.dimensions.minHeight 속성을 block.json 파일에 추가하고 해당 값을 true 로 설정할 수 있습니다. 정적 블록의 경우 CSS min-height 규칙은 인라인 스타일로 저장되는 반면 동적 블록의 경우 get_block_wrapper_attributes 에서 반환된 스타일 속성에 포함됩니다.

스타일 패널의 사용자 정의 CSS

테마 사용자 정의 프로그램과 비교하여 사이트 편집기에서 누락된 기능 중 하나는 사용자 정의 CSS 스타일을 추가하는 기능이었습니다. WordPress 6.2는 격차를 메우고 이제 전역 스타일 인터페이스에는 테마를 업데이트할 때 덮어쓰지 않는 사용자 지정 CSS 규칙을 추가하는 텍스트 필드가 포함됩니다.

블록 스타일 패널에서 또는 스타일 도구 모음에서 추가 스타일 작업 버튼을 클릭하여 블록별로 사용자 정의 스타일을 추가할 수 있습니다. 그러면 추가 CSS 요소를 보여주는 팝업 메뉴가 표시됩니다.

사용자 지정 CSS를 지원하기 위해 새로운 styles.css 속성이 theme.json 에 추가되었습니다.

사용자 정의 CSS 규칙은 theme.json 에 설정된 모든 사용자 정의 스타일을 완전히 재정의할 수 있습니다. 이런 일이 발생하지 않도록 하려면 기존 대기열에 넣기 방법을 사용하여 스타일 시트를 포함하는 것을 고려할 수 있습니다.

styles.blocks.block.css 속성을 사용하여 theme.json 에 블록별 사용자 지정 CSS를 추가할 수도 있습니다.

 "styles": { "blocks": { "core/button": { "css": "background: #FF0000" } } }

중첩 요소 및 의사 선택자에 & 사용할 수도 있습니다.

새로운 사용자 정의 CSS 기능에 대한 자세한 내용은 전역 스타일 및 블록별 사용자 정의 CSS를 참조하십시오.

블록 간에 스타일 복사 및 붙여넣기

이제 블록 도구 모음의 옵션 메뉴에 있는 새 그룹에 스타일 복사 및 스타일 붙여넣기 에 대한 두 개의 버튼이 표시됩니다. 이 추가 전에는 스타일 복사만 가능했고 스타일을 붙여넣는 방법이 명확하지 않았습니다.

이 새로운 기능을 사용하려면 제목과 같은 새 블록을 추가하십시오. 스타일을 변경하고 블록 옵션 메뉴에서 스타일 복사를 선택합니다.

그런 다음 다른 블록을 선택하고 스타일 붙여넣기를 선택합니다. 복사된 스타일은 두 번째 블록에 자동으로 적용됩니다.

이 기능은 지원 브라우저의 보안(https) 사이트에서만 사용할 수 있습니다. 자세한 내용은 풀 요청을 참조하세요.

블록 변경 사항을 전체적으로 적용

워드프레스 6.2는 또한 블록 스타일 변경 사항을 전역 스타일로 푸시하고 이러한 변경 사항을 전체 웹 사이트에 적용할 수 있는 개별 블록에 대한 고급 패널 아래에 전체적으로 적용 버튼을 도입했습니다.

이 새로운 기능 덕분에 해당 유형의 모든 블록에 블록 타이포그래피, 간격, 치수 및 색상 스타일을 적용하는 것이 이제 버튼을 누르는 것만큼 쉽습니다(이 끌어오기 요청 참조).

Spacing Visualizer로 디자인 경험 개선

간격 시각화 도우미를 사용하면 블록에 적용되는 여백 또는 패딩의 양을 미리 볼 수 있습니다. WordPress 6.2에서는 편집 경험을 개선하는 몇 가지 추가 기능으로 이 기능이 향상되었습니다.

첫째, 마진 또는 패딩 컨트롤 위로 마우스를 가져가면 바로 간격 시각화 도우미가 표시됩니다.

둘째, 이제 간격 시각화 도우미는 간격 설정 위로 마우스를 이동하는 즉시 자동으로 블록 도구 모음을 숨겨서 블록 도구 모음이 복잡하지 않은 상태에서 새 여백 및 안쪽 여백 설정을 미리 볼 수 있습니다.

이는 적지 않은 수의 코어 블록에 영향을 미치는 작지만 중요한 변경 사항입니다.

개발자를 위한 변경 사항

WordPress 6.2는 또한 새로운 API, 버그 수정, 성능 개선 등 개발자를 위한 많은 새로운 기능을 제공합니다. 가장 매력적인 추가 기능에 대해 알아보겠습니다.

새로운 HTML API

WordPress 6.2에는 특정 HTML 태그를 찾고 PHP를 통해 속성을 추가, 제거 또는 업데이트하는 안전한 방법을 제공하는 HTML5 사양 호환 파서인 HTML 태그 프로세서가 도입되었습니다. HTML 태그 프로세서는 새로운 HTML 처리 API의 첫 번째 구성 요소입니다.

새 API를 사용하면 종종 정규식을 사용해야 했던 이전의 복잡한 작업을 쉽게 수행할 수 있습니다.

다음 예제에서는 단순히 alt 속성을 img 태그에 추가합니다.

 $html = '<img src="/my-image.jpg" />'; $p = new WP_HTML_Tag_Processor( $html ); if ( $p->next_tag() ) { $p->set_attribute( 'alt', 'Hello WordPress 6.2' ); } echo $p->get_updated_html();

이 코드는 다음 img 태그를 생성합니다.

 <img alt="Hello WordPress 6.2" src="/my-image.jpg">

$p->next_tag() 메서드는 HTML에서 사용 가능한 다음 태그로 이동합니다. 또한 위의 예와 같이 특정 태그를 찾기 위해 태그 이름, CSS 클래스 또는 둘 다 허용합니다.

HTML 태그를 편집하려면 먼저 대상 태그를 선택해야 합니다.

 $p->next_tag();

대상 태그를 선택한 후에는 API 메서드를 사용하여 여러 작업을 수행할 수 있습니다.

• $p->get_tag()
• $p->set_attribute()
• $p->get_attribute()
• $p->remove_attribute()
• $p->add_class()
• $p->remove_class()

스타일 속성을 설정할 수 있습니다.

 $html = '<a href="https://example.com">example.com</a>'; $p = new WP_HTML_Tag_Processor( $html ); if ( $p->next_tag( 'a' ) ) { $p->set_attribute( 'style', 'text-decoration: wavy underline purple;' ); } echo $p->get_updated_html();

클래스나 특성을 추가하거나 제거할 수도 있습니다. 다음 코드에서는 h1 태그에 사용자 정의 클래스를 추가합니다.

 $html = '<div><h1>Page Title</h1></div>'; $p = new WP_HTML_Tag_Processor( $html ); if( $p->next_tag( 'h1' ) ) { $p->add_class( 'title' ); } echo $p->get_updated_html();

그런 다음 $p->get_updated_html() 메서드를 사용하여 업데이트된 태그를 에코하거나 반환할 수 있습니다.

새로운 HTML API에 대해 자세히 알아보려면 WordPress Core 커미터인 Adam Zielinski의 이 대화형 PHP 자습서를 확인하세요.

Patterns API 및 새로운 template_types 속성

Patterns API를 사용하면 WordPress 개발자는 "게시물, 페이지, 사용자 지정 게시물 유형 및 템플릿에 쉽게 삽입할 수 있는 미리 디자인된 콘텐츠 블록을 생성"할 수 있습니다.

워드프레스 6.2에서 Patterns API는 이제 특정 블록 패턴을 사용할 수 있는 템플릿을 지정할 수 있는 새로운 template_types 속성을 포함합니다.

Jorge Costa는 이것이 백엔드 전용 업데이트 이며 현재 해당 UX 기능이 없다고 강조합니다. 그러나 WordPress 6.3에서 이 기능의 진화된 구현을 기대할 수 있습니다.

워드프레스 6.3을 생각할 때 첫 번째 사용법은 사용자가 템플릿 생성을 시작할 때 템플릿에서 의미가 있는 몇 가지 패턴을 사용자에게 보여주는 것입니다. 사용자는 "공백" 또는 대체 템플릿 대신 패턴에서 시작할 수 있습니다.

기술적인 측면에서, register_block_pattern() 함수는 새로운 template_types 매개변수를 포함하도록 수정되었습니다. 이 매개변수는 블록 패턴이 의도된 템플릿의 이름을 포함하는 문자열 배열입니다.

또한 REST API는 하나 이상이 정의된 경우 블록 패턴의 템플릿 유형을 반환하도록 수정되었습니다.

React v18.0 및 동시성 모드

WordPress 6.2는 이제 버전 18.0으로 업데이트된 새 버전의 React 라이브러리도 제공합니다. 새 버전에는 새로운 API, 기능, 개선 사항 및 버그 수정이 포함되어 있습니다. React v18.0과 함께 제공되는 주요 기능 중 하나는 "React가 동시에 여러 버전의 UI를 준비할 수 있도록 하는 새로운 배후 메커니즘"인 동시성 모드의 도입입니다.

React에서 Concurrent 모드의 주요 특징 중 하나는 인터럽트가 가능하다는 것입니다.

React는 렌더링이 중단되더라도 UI가 일관되게 표시되도록 보장합니다. 이를 위해 전체 트리가 평가되면 끝날 때까지 DOM 변형을 수행하기 위해 기다립니다. 이 기능을 통해 React는 메인 스레드를 차단하지 않고 백그라운드에서 새 화면을 준비할 수 있습니다. 이는 UI가 대규모 렌더링 작업 중에 있더라도 사용자 입력에 즉시 응답하여 유동적인 사용자 경험을 생성할 수 있음을 의미합니다.

주요 이점은 UI가 백그라운드에서 실행 중인 작업과 동시에 사용자 입력에 즉시 응답한다는 것입니다.

그러나 동시성은 또한 개발자가 알아야 할 잠재적인 함정을 도입합니다. WordPress 6.2에서 React의 동시 모드에 대한 자세한 개요는 개발자 노트에 제공된 예제를 확인하십시오.

개발자를 위한 추가 변경 사항

개발자가 주목해야 할 기타 주목할만한 변경 사항은 다음과 같습니다.

• WordPress 6.2에는 편집기가 화면에 렌더링되기 전에 블록 설정을 필터링하는 데 사용할 수 있는 새로운 JavaScript 필터가 도입되었습니다. 새로운 blockEditor.useSetting.before 필터를 사용하면 개발자가 블록 위치, 현재 사용자 역할, 인접 블록 등을 기반으로 설정을 수정할 수 있습니다. 추가 정보 및 사용 예는 WordPress 6.2의 모든 블록에 대한 설정 사용자 지정을 참조하세요.
• ServerSideRender 구성 요소에서 블록 지원과 관련된 속성 및 스타일을 제외하기 위해 새로운 skipBlockSupportAttributes 소품이 도입되었습니다.
• 이제 새로운 theme.json API를 사용하여 theme.json 에서 기존 코어 블록 변형의 스타일을 지정할 수 있습니다.
• 이제 Google 글꼴이 로컬에 포함되며 Twenty Twelve에서 Twenty Seventeen까지 번들 테마의 Google 주소에서 가져오지 않습니다.

하지만 그게 다가 아닙니다. WordPress 6.2에는 간결함을 위해 여기서 언급하지 않은 많은 기능, 개선 사항 및 버그 수정이 도입되었습니다. 보다 포괄적인 개요는 WordPress 6.2 필드 가이드를 확인하십시오.

요약

WordPress 6.2는 Customization이라는 Gutenberg 프로젝트의 2단계 끝에 가까워졌습니다. 그러나 Matias Ventura가 지적한 것처럼 이것이 사용자 지정 작업이 완료되고 향후 버전에 포함된다는 의미는 아닙니다. 언제나 그렇듯이 커뮤니티의 피드백을 기반으로 편집기에 대한 추가 개선 사항을 기대할 수 있습니다.

이 게시물에서는 WordPress 6.2와 함께 제공되는 몇 가지 주요 기능, 개선 사항 및 버그 수정 사항을 살펴보았습니다. 그러나 6.2에는 훨씬 더 많은 것이 있습니다. 구텐베르크 플러그인의 10개 버전(14.2에서 15.1까지)을 코어에 포함하면 새로운 찾아보기 모드, 탭 블록 검사기, 위젯에서 블록 테마로의 마이그레이션, 새로운 API, 수많은 개선 사항 및 버그 수정을 보게 될 것입니다. 접근성과 국제화도 개선될 것입니다.

그리고 WordPress를 좋아하고 새로운 WordPress 개발 기술을 습득하거나 CMS를 테스트하고 기여하고 싶다면 Kinsta의 완전 무료 로컬 WordPress 개발 제품군인 DevKinsta를 사용해 보십시오.

이제 여러분에게 질문합니다. 개발 환경에서 새 버전을 이미 테스트했습니까? WordPress 6.2에서 어떤 기능이 가장 마음에 드십니까? 아래 의견 섹션에서 의견을 공유하십시오.