WordPress 블록 편집기에 대해 내가 좋아하고 싫어하는 12가지

게시 됨: 2020-05-20

2017년 구텐베르크의 첫 번째 버전이 출시되었고 재미와 테스트가 시작되었습니다. Gutenberg는 편집, 사용자 정의, 협업 및 다국어(출처)와 같은 WordPress의 모든 부분을 다루는 4단계 프로세스를 위해 선택한 프로젝트 이름입니다. 그리고 첫 번째 단계의 일부는 이전 클래식 편집기에서 벗어나 새로운 블록 기반 편집기를 채택하는 것이었습니다.

WordPress 5.0부터 블록 편집기는 코어에 병합되었으며 WordPress를 새로 설치할 때 기본 편집기입니다. 이거 정식 명칭이 있나요? 일종의. 나는 구텐베르크가 미래의 변화를 둘러싼 전체 프로젝트로 되어 있기 때문에 그것을 "블록 편집기"라고 부르기로 선택했습니다. 그러나 이름이 #4681 및 #20407이어야 하는지에 대한 몇 가지 흥미로운 논의가 있습니다.

3년 넘게 계속해서 사용하고 있는 블록 편집기에 대한 생각을 공유하는 것이 재미있을 것 같다는 생각이 들었습니다. 몇 달 전에 마침내 클래식 편집기를 완전히 버렸습니다. 그리고 여기에 이유가 있습니다.

  • WordPress 블록 편집기에 대해 내가 좋아하는 것들
  • WordPress 블록 편집기에 대해 내가 싫어하는 것

WordPress 블록 편집기에 대해 내가 좋아하는 8가지

클래식 편집기 블록 편집기 간의 모든 차이점을 나열하는 것은 불가능합니다. 이것들은 작가이자 사이트 빌더로서 제 작업 흐름에 개인적으로 영향을 미친 것들입니다. 그리고 이제 나는 그들 없이 살고 싶지 않습니다!

마크다운 지원이 더 좋습니다.

마지막으로 WordPress 편집기는 Markdown에 붙여넣는 기능을 지원합니다 . 작가이자 일반 개발자로서 내가 매일 사용하는 다른 모든 도구는 수년 동안 Markdown을 지원했습니다. 여기에는 Bear 앱, Trello, Github 등이 포함됩니다. 그래서 Markdown을 다른 곳에서 사용하고 나서 다시 포맷하지 않고 WordPress에 복사/붙여넣기를 할 수 없다는 것이 정말 실망스러웠습니다.

이제 WordPress 블록 편집기를 사용하여 전반적으로 동일한 구문을 많이 사용할 수 있습니다. 이것은 솔직히 말해서 거의 인생을 변화시켰습니다. 편집자는 몇 년 전에 그랬어야 했습니다.

편집기는 기본적으로 Markdown으로만 작성하는 기능을 여전히 지원하지 않지만 거기에 도달하고 있습니다. 적어도 더 이상 속도를 늦추지 않을 정도입니다. Iceberg와 같은 플러그인을 사용하여 즐겨찾는 Markdown 단축키를 모두 추가할 수도 있습니다. 또한 내가 좋아하는 Ayu Mirage Bear 테마를 몇 초 만에 맞출 수 있었습니다. 사실, 나는 Iceberg를 사용하여 이 전체 블로그 게시물을 작성했습니다.

WordPress 블록 편집기에서 더 나은 마크다운 지원
WordPress 블록 편집기에서 더 나은 마크다운 지원

EditorsKit 및 JetPack과 같은 다른 WordPress 플러그인에도 Markdown 지원을 추가하는 기능이 있습니다.

더 이상 재장전하지 않음

나는 흐름과 그것이 어떻게 보이는지 느끼기 위해 내 게시물의 미리보기를 꽤 자주 보는 유형의 사람입니다. 아마 정직하기에는 너무 많은 시간일 것입니다. 클래식 편집기에서는 초안을 저장해야 했고 전체 페이지가 다시 로드되었습니다. 이것은 단지 짜증나고 방해가 될 뿐이었다.

WordPress 블록 편집기에서는 더 이상 초안을 저장하거나 게시물을 업데이트할 때 전체를 다시 로드 할 필요가 없습니다. AJAX의 경우 그렇습니다. 그리고 21세기에 오신 것을 환영합니다.

더 이상 WordPress 편집기를 새로 고칠 필요가 없습니다.
더 이상 WordPress 편집기를 새로 고칠 필요가 없습니다.

블록이 놀랍다

나는 지금 블록을 사랑한다. 나는 이것이 어디로 향하고 있는지에 대한 비전을 완전히 볼 수 있습니다. 처음에는 블록을 좋아하지 않았기 때문에 시간이 좀 걸렸지만 마침내 거기에 도달했습니다.

최근에 저는 Perfmatters 웹사이트를 완전히 새로 구축했으며 83줄의 사용자 지정 코드를 제거할 수 있었습니다. 이것은 모두 GeneratePress, GenerateBlocks, 그리고 물론 WordPress Block Editor 덕분이었습니다.

WordPress 블록 편집기의 블록
WordPress 블록 편집기의 블록

우리는 새로운 소셜 공유 플러그인인 Novashare에서 트윗을 차단하는 편리한 클릭 기능도 만들었습니다. /nova... 를 입력하기만 하면 트윗 차단이 됩니다.

이봐, 나는 회색 트윗 상자입니다. 트윗해주세요. 트윗하려면 클릭

/image 또는 /code 또는 /quote 를 입력할 수 있는 것과 같은 다른 작은 기능은 매우 편리합니다!

강조 표시는 항상 있어야 하는 방식입니다.

WordPress 블록 편집기의 강조 표시는 이제 항상 있어야 하는 방식입니다. 예를 들어 굵게 표시된 단어가 몇 개 있다고 가정해 보겠습니다. 클래식 편집기에서 굵게 표시를 풀려면 모든 단어를 강조 표시해야 했습니다.

이제 WordPress 블록 편집기 에서 굵은 영역의 아무 곳이나 클릭 하고 단어의 굵게를 해제할 수 있습니다. 밑줄을 긋는 것과 같은 동작을 합니다. 이와 같은 작은 것들은 시간이 지남에 따라 실제로 추가되기 시작합니다.

WordPress 블록 편집기에서 강조 표시
WordPress 블록 편집기에서 강조 표시

문서 개요는 똑똑하고 유용합니다.

WordPress 블록 편집기의 문서 개요 기능은 실제로 매우 훌륭합니다! 제목을 쉽게 클릭하면 게시물의 해당 섹션으로 즉시 이동할 수 있습니다. 뿐만 아니라 그 뒤에는 몇 가지 논리가 있습니다 . 아래 예에서 잘못된 제목 수준(H2 헤더에서 H4로 건너뛰기)에 대해 알려주는 것을 볼 수 있습니다. 구조적으로는 H3를 먼저 사용해야 합니다.

블록 편집기 문서 개요
블록 편집기 문서 개요

이미지에 캡션을 추가하는 것은 매우 쉽습니다.

나는 이미지 캡션에 관해서는 고집이 세다. SEO 목적일 뿐만 아니라 외부 이미지가 소싱될 때 속성을 지정하는 편리하고 미묘한 방법이기도 합니다.

이전에는 클래식 편집기에서 이미지를 업로드한 다음 이미지를 클릭하면 새 창이 표시되고 캡션을 입력해야 했습니다. 이제 WordPress 블록 편집기에서 이미지를 업로드하고 바로 아래에 캡션을 입력할 수 있습니다. 몇 년 동안 WordPress 사이트에 얼마나 많은 이미지를 업로드했는지 짐작조차 할 수 없습니다. 수만 명이어야 합니다. 그래서 다시, 작은 것들이 추가됩니다!

더 잘 쓰기
더 나은 글쓰기 (이미지 출처: Pinterest)

더 나은 보기 선택

WordPress 블록 편집기를 사용하면 쓰기와 관련하여 선택할 수 있는 몇 가지 보기가 더 있습니다. 결국, 새로운 편집자의 큰 초점은 전반적인 글쓰기 경험을 향상시키는 것이었습니다.

제 생각에는 이전 Classic Editor의 양말을 벗어 던지는 Medium과 같은 경쟁자가 있습니다. 고맙게도 이제 WordPress 블록 편집기는 다른 타사 작성 플랫폼과 훨씬 더 유사하게 작동합니다.

세 가지 다른 보기는 다음과 같습니다.

  • 상단 도구 모음: 한 곳에서 모든 블록 및 문서 도구에 액세스합니다.
  • 스포트라이트 모드: 한 번에 한 블록에 초점을 맞춥니다.
  • 전체 화면 모드: 방해 없이 작업합니다.

아래는 세 가지를 모두 선택했을 때의 모습입니다.

세 가지 WordPress 블록 편집기 보기
세 가지 WordPress 블록 편집기 보기

저는 사실 상단 도구 모음이 없는 스포트라이트 모드와 전체 화면 모드의 열렬한 팬입니다.

내가 가장 좋아하는 WordPress 블록 편집기 보기
내가 가장 좋아하는 WordPress 블록 편집기 보기

드디어 아이디 생각난 사람

Classic Editor에 HTML 앵커 링크를 추가하는 것은 ID를 추가하기 위해 코드 보기로 전환해야 했기 때문에 완전히 성가셨습니다. 그리고 이것을 HTML로 해야 했습니다. 이것은 그것을 매우 번거롭게 만들었고 앵커 링크를 추가하려는 사람들이 이것을 더 쉽게 만들기 위해 단순히 WordPress 플러그인을 설치하려는 큰 이유입니다.

WordPress 블록 편집기에서 마침내 동일한 보기에서 ID를 추가 할 수 있습니다! 플러그인이 필요하지 않습니다. 만세.

HTML 앵커 ID 추가
HTML 앵커 ID 추가

WordPress 블록 편집기에 대해 내가 싫어하는 4가지

분명히, 당신은 내가 이제 WordPress Block Editor 팬이라는 것을 이미 알 수 있습니다. 그러나 몇 가지 마음에 들지 않는 것이 있습니다. 블록 편집기의 차기 버전에서 이러한 문제가 수정되기를 바랍니다.

내 커서가 여기 있고 이제 거기에 있습니다.

이것은 설명하기 어렵지만 한동안 WordPress Block Editor로 작업해 온 사람이라면 내가 무슨 말을 하는지 알 수 있을 것입니다.

다른 블록을 클릭할 때 커서가 항상 올바르게 따라오는 것은 아닙니다 . 때로는 앞뒤로 점프하며 커서 위치에 매우 주의하면서 두세 번 다시 시도해야 합니다. 그렇지 않으면 잘못된 블록에 쉽게 입력할 수 있습니다. 또는 더 나쁘게는 때때로 사용자를 즉시 ​​맨 위로 스크롤합니다.

나는 이 이상한 행동을 수십 명의 사람들과 함께 확인했기 때문에 이것이 나만이 아니라는 것을 압니다.

좌절
좌절 (이미지 출처: Memedroid)

테마가 편집기를 재정의하게 하면 모든 사람에게 적합하지 않을 수 있습니다.

테마가 편집기 스타일을 재정의하도록 하면 모양이나 느낌이 항상 같지 않을 수 있습니다. 선호하는 작업은 블록 편집기를 사용하여 수행하는 작업과 여러 사이트 사이를 이동하는 경우에 따라 달라질 수 있습니다.

나는 많은 다른 WordPress 사이트를 관리하고 테마 스타일을 제거하고 기본 블록 편집기 스타일로 돌아가는 것을 훨씬 선호합니다. 이렇게 하면 블록을 사용하여 만들고 디자인할 때에도 모든 사이트에서 비슷한 느낌을 받을 수 있습니다.

예를 들어 내 모든 사이트에서 GeneratePress 테마를 사용합니다. 그래서 기본적으로 원래 블록 편집기 스타일로 돌아가도록 다음 필터를 추가했습니다.

 add_filter( 'generate_show_block_editor_styles', '__return_false' );

아래는 어떻게 생겼는지 전후입니다.

블록 편집기 이전(테마 재정의 스타일)

WordPress 테마 재정의 편집기 스타일
WordPress 테마 재정의 편집기 스타일

블록 편집기 이후(테마 스타일 제거)

블록 편집기 기본 스타일
블록 편집기 기본 스타일

Grammarly는 제대로 작동하지 않습니다. 아마 앞으로도 없을 것입니다.

저는 Grammarly의 열렬한 사용자입니다. 그러나 새로운 WordPress 블록 편집기가 나온 이후로 Grammarly는 제대로 작동하지 않았습니다 . 때로는 물건을 찾을 때도 있고 그렇지 않을 때도 있습니다.

트위터에서도 비슷한 불만을 본 적이 있습니다. 내가 말할 수있는 것은 각 블록이 완전히 분리 된 방식과 관련이 있다고 생각합니다. 따라서 Grammarly는 항상 전체 컨텍스트를 볼 수 없습니다. 또한 React.js 기반 편집기를 스캔하는 데 문제가 있다고 생각합니다.

솔직히 말해서 이 문제를 해결하기 위해 많은 희망을 갖고 있지는 않습니다. 나는 그들의 지원과 트위터에서도 이 문제를 제기하려고 시도했습니다. WordPress 팀은 이것이 Grammarly의 끝판왕이라고 말합니다.

이 게시물에 댓글을 단 Jakab으로부터 ProWritingAid의 확장과 같은 다른 솔루션이 블록 편집기에서 제대로 작동한다는 사실을 알고 놀랐습니다.

개별 게시물에 대한 댓글을 더 이상 볼 수 없습니다.

이것은 편집기 자체의 변경 사항이 아니라 WordPress 5.0 및 WordPress 블록 편집기 롤아웃에서 발생한 변경 사항일 수 있습니다. 이전에는 작업 중인 게시물의 맨 아래로 스크롤하여 대기 중인 댓글을 볼 수 있었습니다. 이것은 당면한 주제에 집중하면서 댓글을 따라잡을 수 있는 좋은 방법이었습니다. 이것은 더 이상 존재하지 않습니다.

이제 메인 대시보드 창에서 댓글에 답글을 달거나 "모든 게시물" 화면에서 댓글 아이콘을 클릭해야 합니다. 이것의 문제는 기사의 내용도 읽을 수 있다는 것입니다. 그래서 댓글에 답하는 동안 참조하기 위해 다른 창에서 게시물을 열기 시작했습니다.

WordPress 블록 편집기에서 보류 중인 댓글
WordPress 블록 편집기에서 보류 중인 댓글

이 포스트에서 이것을 거론하는 이유는 댓글의 피드백을 바탕으로 에디터에서 수정하거나 업데이트하는 경우가 많기 때문입니다. 라인에 있는 누군가가 이 워크플로를 변경해야 하고 더 이상 같은 창에 있지 않아야 한다고 결정 했습니다.

요약

여러분 모두의 피드백을 듣고 싶습니다. 새로운 WordPress Block Editor의 방향이 마음에 드십니까? 당신이 그것에 대해 좋아하고 싫어하는 것은 무엇입니까? 아래에 의견을 남겨주세요.