gutenberging

WordPress의 새로운 편집자 인 Gutenberg는 1 년 이상 출시되었습니다. 이제 주변의 논쟁은 가라 앉은 것 같습니다. 사용자 경험과 사용 편의성을 향상시킬 시간이 충분하면 사람들은 잠재력을 더 명확하게보고 있습니다. 우리는 뒤돌아 볼 수 없습니다.

Haris Zulfiqar와 같은 저자들은 그것에 대해 낙관론을 표명했으며, Nick Hamze는 블록이 차세대 편집자의 방향이라고 믿었습니다.

여전히 몇 가지 단점이 있다고 생각하지만 (예 : 블록 참조에 목록을 추가 할 수없는 이유는 무엇입니까? 링크에 클래스를 추가 할 수없는 이유는 무엇입니까? 왜 화살표 키로 블록 선택기를 탐색 할 수 없습니까?), 나는 일반적으로 매우 좋아합니다. 그리고 그것은 단지 개념적 좋아하는 것이 아닙니다. 나는 Gutenberg 로의 CSS- 트릭 마이그레이션을 2020 년 목표 중 하나로 나열하여 1 월에 즉시 구현하기 시작했습니다.

처음으로 단맛을 맛 보았습니다

보도 자료 제작 경험을 새로운 편집자로 전환 했으므로 Gutenberg를 사용한 경험을 축적했습니다. 우리의 보도 자료는 CSS- 트릭에 대한 사용자 정의 기사 유형이며, 공개 URL에 게시되었으며, 맞춤형 RSS 피드가 있으며 MailChimp가 크롤링하고 읽습니다.

Gutenberg Ramp 플러그인을 통해 보도 자료를 위해 Gutenberg를 쉽게 활성화 할 수 있습니다. 이것은 단일 ID가있는 사용자 정의 게시물 유형 및 게시물에 매우 효과적이지만 새 컨텐츠에 대해서만 Gutenberg를 활성화하고 싶습니다. 마지막으로 플러그인을 수정했습니다. 이것이 좋은 생각이라고 생각되면 내 풀 요청을 확인하십시오.

이것은 구식 편집자들과 함께 생성 된 수만 개의 오래된 기사를 가지고 있기 때문에 나에게 중요하며, Gutenberg는 편집을 위해 열 때 부패하지 않더라도 이러한 기사에 대한 편집 경험과 "클래식"편집기 (예 : 특수 코드 블록 등을위한 특수 버튼이 있습니다).

오래된 콘텐츠를 처리합니다

Gutenberg가 열릴 때 오래된 게시물을 적절한 블록으로 변환 할 수 있다면 좋을 것입니다. 그러나 지금은 꿈처럼 보입니다. 즉, HTML을 구문 분석하고 블록과 같은 블록을 식별하고 가장 중요한 커스텀 블록을 포함하여 가장 중요한 블록을 식별하고 잘못되지 않는 방식으로 정확하게 수행해야합니다.

현재 이전 콘텐츠는 여전히 이전 편집기를 사용합니다. 편집자의 단일 기사를 위해 Gutenberg를 가능하게하는 쉬운 방법도 있습니다. (Gutenberg Ramp의 사용에 대한 값을 하드 코딩 할 수는 있지만 이것은 약간 지루합니다.)

나는 오래된 편집자가 악화 될 것이라고 조금 걱정한다. 예를 들어, 제가이 작업을 시작한 주된 이유 중 하나는이 사이트에서 이전 편집기가 페이지 하단으로 무작위로 스크롤되기 때문입니다. 왜 그런지 모르겠지만, 만들기가 매우 고통스럽게 느껴집니다. 그것은 적극적으로 개발중인 편집자와 함께 경험하고 싶어하는 사소한 버그 일뿐입니다.

그러나 구식 편집자들이 실제로 나빠지더라도 Gutenberg가 모든 것을 가능하게하는 것은 그렇게 나쁘지 않습니다. 모든 오래된 콘텐츠는 큰 "클래식"블록에 있으며 모든 것이 괜찮을 것입니다.

어쨌든 - 잘 작동합니다!

새 기사를 위해 Gutenberg를 활성화하는 것은 그 자체로 큰 도전이지만, 우리는 그것을 활성화했으며 그것을 사용하여 모든 새로운 컨텐츠를 만들고 있습니다. 나는 단지 여기서 내 자신을 말하고 있지만 너무 좋아합니다 . 그것은 콘텐츠 제작을위한 큰 업그레이드이며 나는 그것에 약간 집착하고 있습니다. 팀도 매우 행복합니다.

맞춤형 블록을 만듭니다

멋진 텍스트 블록을 확인하십시오.

당신은 오, 쿨, 커스텀 블록을 만들 수있는 기회를 생각하고있을 것입니다. 실제로, 우리는 심지어 큰 시리즈에서 Gutenberg 블록을 배우고 만들기위한 방법을 도입했습니다. 그러나 이것은 매우 관련성있는 질문을 제기합니다 : 블록을 만들지 않을 때 . 이 블록의 유일한 독특한 점은 CSS가 블록을 스타일링하는 데 사용하는 특별 클래스 이름을 가지고 있다는 것입니다. 그게 다야. 클래스 이름을 추가하는 것은 각 블록마다 내장 된 기능 이므로 여기에는 사용자 정의 블록이 필요하지 않습니다.

실제로, 우리는 한 걸음 더 나아가이 정확한 클래스의 "재사용 가능한 블록" 으로 텍스트 블록을 만들 수 있으므로 클래스 이름을 기억하거나 입력 할 필요조차 없습니다. 이 클래스로 텍스트 블록을 만든 후 케밥 메뉴에서 "재사용 가능한 블록으로 변환"을 선택했으며 이제 재사용 가능한 블록으로 영구적으로 저장됩니다.

우리는 이제 "기사 시리즈"블록과 같은 몇 가지 다른 것들에 그것을 사용했습니다 (특별한 것과 하나).<div> -클래스 래퍼와 함께<code><ul></ul> 그리고<ol></ol> ) 및 각주 블록 등. 그러나 우리는 몇 가지 커스텀 블록이 필요합니다.이를 위해 만들기 Guten-Block을 사용하여 특수 플러그인 ¹을 만들기 위해 만들었습니다. 우리에게 매우 중요한 하나의 블록은 코드 블록이라고 생각합니다. 코드 블록에 대한 기본 블록이 이미 있습니다. 기본적으로 코드를 하나로 넣습니다

<code>标签中，并且来自Gutenberg的内容默认情况下已经转义。</code> 우리의 멋진 코드 블록을 사용하면 언어를 선택하고 특정 줄을 강조 표시하며 사용자 정의 태그를 제공 할 수 있습니다. 이것은 HTML 속성을 통해 기존 편집기에서 가능 하므로이 블록은이 모든 것 외에도 멋진 UI를 제공합니다.



<p>블록은 CSS- 트릭에 매우 구체적이므로 오픈 소스는 그다지 의미가 없습니다. 그러나 내가 만든 다른 블록은 오픈 소스, 즉 Codepen Embed Blocks입니다. Codepen 블로그에 그것에 대해 썼습니다.</p>



<p>Codepen Embed로 변환되는 Codepen URL을 붙여 넣을 수 있습니다. OEMBED는 이미 기본적 으로이 작업을 수행하지만이 플러그인을 사용하면 높이, 테마 및 기본 탭과 같은 모든 것을 제어 할 수 있습니다.</p>



<p>생성하는 동안 실제로 내장 된 펜을 보는 것이 좋습니다!</p>



<h3 id="해결되지-않은-도전">해결되지 않은 도전</h3>



<p>현재 가장 큰 과제는 이미지 처리입니다. 오래된 편집기에서 우리는 매우 멋진 Cloudinary 설정을 통합했습니다. 이미지는 자동으로 Cloudinary에 업로드되며, 브레이크 포인트는 프로그래밍 방식으로 결정되며, 여러 크기가 생성되고, 반응 형 이미지 구문이 생성되며, HTML에서 끝나는 것은 Cloudinary-Hosted 이미지와 완벽한 반응 형 이미지 구문입니다. 이를 통해 CDN을 활용하고 최상의 형식으로 이미지를 전달할 수 있습니다.</p>



<p>이것은 Gutenberg와 함께 만든 기사에서는 일어나지 않습니다. ?</p>



<p>웹 사이트의 어느 곳에서나 이미지를 잘 처리하고 더 쉽게 유지 관리되지 않는 시스템을 사용하는 새로운 시스템을 찾거나 개발해야합니다. Cloudinary를 사용 하여이 문제를 해결할 수 있습니다. 다른 서비스를 시도 할 수 있으며 WordPress가 직접 처리 할 수 ​​있습니다. JetPack 사이트 가속기로 구동됩니다. 아직 확실하지 않습니다. 항상 할 일이 있습니다.</p>



<ol><li>WordPress 자체가 블록 스캐 폴딩 게임에도 참여하는 것을 봅니다. 그들의 "Wordpress-Block"개념은 Gutenberg 저장소 자체에 입력했으며`npm init @wordpress/block [옵션] [슬러그]`로 시작할 수 있습니다.</li></ol>