워드프레스 구텐베르크: 블록에서 HTML 수정하기

워드프레스 5.0 버전부터 블록 에디터(Block Editor)라고도 하는 구텐베르크가 코어에 탑재되어 기본 편집기가 되었습니다. 기존 편집기를 사용하려면 고전 편집기 플러그인을 설치해야 하는 어색한 상황이 되었습니다.

고전 편집기(Classic Editor) 플러그인은 현재 300만 개 이상 사이트에 설치되어 사용되고 있습니다. 저는 워드프레스 5.0이 릴리즈될 때부터 고전 편집기 플러그인을 설치하여 사용하다가 얼마 전에 고전 편집기를 비활성화하고 구텐베르크 편집기를 사용하고 있습니다. 기존 글을 편집할 때에만 고전 편집기를 사용하고 있습니다.

구텐베르크 편집기가 초기에 불안했지만 최근 들어 많이 개선된 것 같습니다. 구텐베르크에 대한 거부감이 있었지만 조금 사용해보니 나름 괜찮게 느껴지네요. 다만, 일부 테마나 플러그인과 충돌을 일으킬 수 있습니다. 그런 경우에는 고전 편집기를 설치하여 사용하는 것이 좋습니다.

구텐베르크 블록에서 HTML 수정하기

구텐베르크 편집기에서는 블록(Block) 요소로 콘텐츠를 추가할 수 있습니다.

워드프레스 구텐베르크 편집기

블록 추가 아이콘을 클릭하면 위의 그림과 같이 자주 사용하는 블록이 상단에 표시됩니다. HTML 스니핏을 추가하려는 사용자 정의 HTML 블록을 사용할 수 있습니다. 또, 단락이나 헤딩요소, 이미지 등 다른 요소를 이용하더라도 HTML 코드를 수정할 수 있습니다.

해당 블록을 선택하고 오른쪽 모서리의 세 점 아이콘을 클릭하면 몇 가지 메뉴가 표시됩니다.

워드프레스 구텐베르크 편집기 - HTML로 편집

메뉴 중에서 HTML로 편집을 클릭하면 해당 블록의 콘텐츠가 HTML로 표시됩니다.

워드프레스 구텐베르크 에디터

HTML로 수정할 사항이 있으면 수정한 후에 다시 세 개의 점으로 된 아이콘을 클릭하여 "비주얼로 편집"을 클릭하면 해당 블록이 본래의 모양대로 표시됩니다.

워드프레스 구텐베르크 편집기 - 비주얼로 편집

기존 고전 편집기에서 제공하던 비주얼 모드와 텍스트 모드를 구텐베르크에서는 각 블록 단위에 적용할 수 있도록 한 것 같습니다. 이렇게 구현할 경우 장단점이 있습니다. 원하는 부분만 HTML로 확인할 수 있지만, 한편으로 HTML에서 전체적으로 수정해야 할 경우(가령, HTML에서 찾기 및 바꾸기로 특정 단어나 코드를 일괄적으로 바꾸고 싶은 경우)에는 이 방법이 불편한 것 같습니다.

참고

댓글 남기기

프리미엄 테마 그래픽 동영상 템플릿 무료 다운로드