Divi 5 진행 업데이트: Divi 5의 확장성 탐색

게시 됨: 2023-07-07

다른 Divi 5 진행 업데이트로 돌아왔습니다. Divi 5에 익숙하지 않은 경우 원본 발표 게시물을 확인하십시오. 간단히 말해서 성능, 안정성, 확장성 및 확장성에 중점을 두고 처음부터 Divi 5의 빌더를 다시 만들고 있습니다. 많은 새로운 기능이 제공되지는 않지만 훨씬 더 빠르고 기능이 향상될 것이며 환상적인 새 모듈과 기능으로 시작하는 데 필요한 도구를 팀과 커뮤니티에 제공할 것입니다.

지난 달에 저는 Divi 5 Visual Builder의 번개처럼 빠른 속도를 보여주기 위해 시연을 했으므로 해당 비디오를 놓친 경우 꼭 확인하십시오.

Divi 5의 확장성에 대해 논의하고 이번 달 업데이트에서 간단한 데모를 제공하겠습니다. 그러나 먼저 지난 한 달 동안 우리 팀이 무엇을 했는지에 대해 이야기해 봅시다.

이번 달에 우리가 성취한 것

우리는 지난 달에 많은 진전을 이루었습니다. Divi 5 베타 프로그램의 다음 단계인 Divi 5 Dev Beta의 출시가 가까워지고 있으며 다음 업데이트에서 출시를 발표하고 싶습니다.

집에 있는 동안 커뮤니티와 우리 팀의 제작자가 Divi 5 모듈을 더 빨리 만들 수 있도록 모듈 생성 프로세스를 단순화하는 데 계속 집중하고 있습니다. 이 단계에서 투입한 작업은 진행 단계에서 배당금을 지불할 것이며 궁극적인 목표는 Divi 5를 더 빨리 사용하는 것입니다.

변경 로그 항목:

  • 새롭고 개선된 요소 기반 속성 시스템을 통합하기 위해 현재 빌드된 모든 모듈을 리팩토링했습니다.
  • 인라인 텍스트 편집기에서 값을 저장하기 위해 packages/module-utils에 saveInlineEditorValue Util 함수 추가
  • 모듈 속성을 인라인으로 편집할 수 있는지 확인하기 위해 packages/module-utils에 canEditInline Util 함수를 추가했습니다.
  • 클립보드 데이터를 처리하기 위해 인라인 텍스트 편집기에 onPaste 핸들러 이벤트를 추가했습니다.
  • 인라인 텍스트 편집기 이벤트 기반 클래스 이름을 빌더에서 data-* 선택기(예: et-vb-editable-element–empty, et-vb-editable-element–html)로 대체했습니다.
  • data-* 선택기(예: [data-et-vb-editable-element])가 있는 인라인 텍스트 편집기의 CSS를 업데이트했습니다.
  • 모듈이 편집 가능한지 여부와 사용자가 편집할 수 있는 적절한 권한을 가지고 있는지 확인하도록 업데이트된 인라인 텍스트 편집기
  • 인라인 텍스트 편집기가 편집 모드에 있을 때 바로 가기를 비활성화하도록 리팩터링된 키보드 바로 가기 저장소
  • 제목용 오디오 모듈에 인라인 텍스트 편집기 기능 추가
  • 제목용 Blurb 모듈에 인라인 텍스트 편집기 기능 추가
  • 제목용 바 카운터 모듈에 인라인 텍스트 편집기 기능 추가
  • 제목용 원형 카운터 모듈에 인라인 텍스트 편집기 기능 추가
  • 코드(HTML) 콘텐츠용 코드 모듈에 인라인 텍스트 편집기 기능 추가
  • 제목용 카운트다운 타이머 모듈에 인라인 텍스트 편집기 기능 추가
  • 제목 및 부제목에 대한 전체 너비 헤더 모듈에 인라인 텍스트 편집기 기능 추가
  • 코드(HTML) 콘텐츠용 전폭 코드 모듈에 인라인 텍스트 편집기 기능 추가
  • 타이틀용 로그인 모듈에 인라인 텍스트 편집기 기능 추가
  • 제목의 숫자 카운터 모듈에 인라인 텍스트 편집기 기능 추가
  • 인라인 텍스트 편집기 기능을 이름 및 직책에 대한 사람(팀 구성원) 모듈에 추가했습니다.
  • 제목, 부제, 통화, 합계 및 빈도에 대한 가격표 모듈에 인라인 텍스트 편집기 기능 추가
  • 슬라이드 제목용 슬라이더 모듈에 인라인 텍스트 편집기 기능 추가
  • 탭 제목용 탭 모듈에 인라인 텍스트 편집기 기능 추가
  • 저자, 직책 및 회사 이름에 대한 추천 모듈에 인라인 텍스트 편집기 기능 추가
  • 제목에 대한 모듈을 전환하기 위해 인라인 텍스트 편집기 기능을 추가했습니다.
  • 모듈 관리 레이블에 대한 와이어프레임 보기에 인라인 텍스트 편집기 기능 추가
  • 모듈 속성이 빈 값으로 편집될 때 기본 텍스트를 설정하도록 업데이트된 인라인 텍스트 편집기 기능(예: 와이어프레임 보기 모드의 관리 레이블)
  • 잠긴 모듈에 대해 인라인 텍스트 편집기의 편집 모드가 활성화되지 않도록 테스트 케이스를 추가했습니다.
  • 예상대로 작동하는지 확인하기 위해 인라인 텍스트 편집기를 사용하는 모든 모듈에 대한 테스트를 추가했습니다.
  • 서식 있는 텍스트의 인라인 편집을 위해 빌더에 기본 InlineRichTextEditorContainer 및 InlineRichTextEditor 구성 요소를 추가했습니다.
  • MultiViewElement 클래스의 간소화된 버전인 ElementInnerContent 클래스를 도입했습니다.
  • 향상된 MultiViewScriptData 클래스.
  • 반응형 콘텐츠 FE 스크립트에 사용자 지정 필터 및 후크를 추가했습니다.
  • MultiViewElement 클래스를 도입했습니다.
  • 동적 콘텐츠: 새로운 동적 콘텐츠 값 형식: `$variable(JSON_VALUE)$`.
  • 동적 콘텐츠: 동적 콘텐츠 속성에 대한 새로운 속성 변환 기능을 도입했습니다.
  • 동적 콘텐츠: 프런트엔드 부분에 초기 동적 콘텐츠 렌더링을 도입했습니다.
  • 동적 콘텐츠 값 처리에 대한 새로운 접근 방식입니다. 동적 콘텐츠 값은 문서가 블록 구조 목록으로 구문 분석되기 전에 블록 구문 분석기에서 처리됩니다.
  • 필드 이름 및 설정을 기반으로 동적 콘텐츠 기본 제공 및 사용자 정의 필드 값을 해결하기 위해 코드를 백포팅했습니다.
  • 서로 다른 조건에 따라 동적 콘텐츠 기본 제공 및 사용자 정의 필드를 생성하는 코드를 백포팅했습니다.
  • 동적 콘텐츠: VB에서 초기 동적 콘텐츠 렌더링을 도입했습니다.
  • 동적 콘텐츠: 동적 콘텐츠 기능을 `ModuleElements` 클래스에 통합했습니다.
  • 동적 콘텐츠: VB에서 동적 배경 이미지 기능을 구현했습니다.
  • 동적 콘텐츠: VB의 모듈 설정에 초기 동적 콘텐츠 UI를 도입했습니다. 현재 이것은 `site_title` 동적 콘텐츠 옵션에서만 지원되는 평가 모듈의 입력 텍스트에서 프로토타입으로 사용할 수 있습니다.
  • 인라인 리치 텍스트 편집기: 리치 텍스트 인라인 편집기 구성 요소에 핵심 TinyMCE 편집 기능을 추가했습니다.
  • 인라인 리치 텍스트 편집기: 편집 가능한 콘텐츠를 검색하고 편집된 콘텐츠를 저장하도록 리치 텍스트 인라인 편집기를 업데이트했습니다.
  • 모듈 속성 리팩터링: 아이콘 모듈의 속성을 리팩터링합니다.
  • 모듈 속성 리팩터링: 소셜 미디어 모듈의 속성을 리팩터링합니다.
  • 모듈 속성 리팩터링: 비디오 모듈의 속성을 리팩터링합니다.
  • Module Attribute Refactor: 검색 모듈의 속성을 리팩터링합니다.
  • 모듈 속성 리팩터링: 전체 너비 코드 모듈의 속성을 리팩터링합니다.
  • 모듈 속성 리팩터링: 가격표 모듈 속성을 리팩터링합니다.
  • 모듈 속성 리팩터링: 아코디언 모듈의 속성을 리팩터링합니다.
  • Module Attribute Refactor: Full Width Map 모듈의 속성을 리팩터링합니다.
  • 모듈 속성 리팩터링: 전체 너비 슬라이더 모듈의 속성을 리팩터링합니다.
  • 모듈 속성 리팩터링: 맵 모듈의 속성을 리팩터링합니다.
  • 커뮤니티에서 보고된 버그: 모듈 크레딧 메커니즘 구현. 모듈 크레딧을 표시하려면 module.json에 크레딧을 추가하세요.
  • 커뮤니티에서 보고된 버그: 필드 설명에서 선택한 태그 활성화
  • 전환 옵션: ElementStyle을 사용하는 모든 모듈에 대해 전환 스타일 구성 요소를 추가했습니다.
  • Module Elements: Audio, Blurb, CTA 및 Testimonial 모듈에서 요소 생성을 단순화하는 ModuleElements 클래스를 소개합니다.

Divi 5의 확장성 설명

Divi 5의 가장 중요한 측면 중 하나는 확장성입니다. 확장성에 대해 이야기할 때 Divi 5는 API 관점에서 민첩하고 유능하며 이러한 개선 덕분에 우리가 만들 수 있는 많은 고유한 기능에 대해 이야기하고 있습니다. 나는 또한 Divi 5를 WordPress의 미래와 일치시키고, 단축 코드를 제거하고 , 많은 WordPress 블록 패키지를 Divi 5에 통합하는 것에 대해 이야기했습니다.

이 모든 것이 Divi의 미래에 의미하는 바는 무엇입니까?

나는 Divi 5의 확장성을 시각적으로 나타내는 이 업데이트에서 재미있는 것을 공유할 수 있도록 이러한 측면을 보여주는 빠른 데모를 만들 수 있는 약간의 여유 시간을 개발 팀 관리자에게 요청했습니다. 그는 자동 블록 모듈을 생각해 냈습니다. 모든 구텐베르그 블록을 Divi 모듈로 전환하는 모듈, Divi의 광범위한 디자인 설정으로 이를 강화하고 동일한 페이지에서 모듈과 블록을 혼합할 수 있습니다!

블록 모듈은 블록에서 HTML 요소를 가져와 디자인을 완벽하게 제어할 수 있는 옵션 그룹을 동적으로 생성합니다. 또한 새 옵션 그룹을 즉석에서 생성하여 모든 요소를 ​​대상으로 지정하고 사용자 정의할 수 있습니다.

우리가 이 블록 모듈을 재미로 만들었지만 완성되거나 다듬어지지는 않았지만 Divi 5로 무엇을 할 수 있는지, 그리고 우리가 만들고 있는 새로운 기반 덕분에 상대적으로 쉽게 할 수 있다는 훌륭한 데모입니다.

API의 개방성 덕분에 우리뿐 아니라 여러분과 개발 커뮤니티에게도 쉽습니다. 우리는 이 블록 모듈을 마무리하고 공식 기능으로 Divi 5에 추가할 수도 있습니다. 그러나 지금은 베타 단계를 진행하는 데 집중하고 있습니다.

Divi AI가 거의 완성되었습니다!

이것으로 이번 달의 Divi 5 업데이트를 마칩니다. 다른 소식으로, Divi AI의 첫 번째 버전이 거의 완성되어 Visual Builder에서 작업하는 동안 허공에서 놀라운 이미지를 생성하고 AI로 콘텐츠를 작성하고 개선할 수 있습니다. 나는 미완성 버전으로 많은 재미를 가지고 있었고 나는 그것을 포장하고 곧 배송하기를 고대하고 있습니다!

더 많은 업데이트를 기대해 주세요

매월 Divi 5 진행 상황 업데이트를 제공하기로 약속했고 그렇게 할 계획입니다! 모든 업데이트가 흥미진진할 것이라고 약속할 수는 없지만 이 거대한 프로젝트를 완료하기 위해 최선을 다하고 있으니 안심하세요. 매일 우리는 조금 더 가까워지고 Divi 5 기반은 조금 더 강해집니다. 우리는 곧 Divi 5 Dev Beta를 출시할 예정이며 이는 기반이 완성된다는 것을 의미합니다. 거기에서 올해 후반에 공개 알파에서 테스트하게 될 사용자 대면 기능이 본격적으로 시작됩니다.

질문이 있으면 의견을 남겨주세요. 다음 업데이트에서 만나요!