Divi 5 5월 진행 업데이트: Divi 5의 속도 미리 보기

우리는 대규모 프로젝트인 Divi 5를 진행 중이며 매달 진행 상황을 커뮤니티에 업데이트하는 것을 좋아합니다. 지난 달, 우리는 Divi 사용자에게 가장 유리한 방식으로 이러한 큰 프로젝트에 어떻게 접근하고 있는지 더 잘 이해하기 위해 Divi 5 베타 프로그램의 5단계를 깊이 파헤쳤습니다. 우리는 1단계, Dev Alpha에 있으며 Dev Beta 출시에 가까워지고 있으며 이 시점에서 새로운 Divi 5 API가 견고해집니다. 우리는 올해 후반에 첫 번째 공개 릴리스를 위해 노력하는 동안 더 많은 개발자를 프로그램에 초대할 것입니다.

이번 달 업데이트에서는 Divi 5의 업데이트에 대해 이야기하겠습니다. 또한 Divi 5가 얼마나 빠른지 보여드리고 곧 출시될 Divi AI 기능을 미리 보여드리겠습니다! 파헤쳐 보자.

이번 달에 우리가 성취한 것

이번 달에 우리는 많은 일을 했습니다! UI를 다듬어야 하고 견고한 Divi 기능 세트를 완성해야 하는 첫 번째 공개 릴리스에 가까워짐에 따라 하나씩 채우고 있는 작은 것들이 많이 있습니다. 섹션 구분선, 배경 비디오, 조건 옵션, 반응형 콘텐츠를 작업하고 몇 가지 버그를 수정했습니다.

대부분의 작업은 Dev Beta 버전에 관한 Divi 5 API를 강화하는 데 중점을 두었습니다. 여기서 일반적인 추세는 우리 팀과 개발 커뮤니티가 훌륭한 Divi 모듈과 기능을 더 쉽게 만들 수 있도록 기반을 구축하고 있다는 것입니다. 우리는 이 부분을 바로잡아야 다른 모든 것이 우리가 원하는 대로 제자리에 놓이게 됩니다.

Divi 5의 새로운 REST API를 통합하고 단순화하는 작업을 했습니다. 우리는 Divi 모듈을 만드는 데 걸리는 시간을 크게 줄이는 것을 목표로 몇 가지 새로운 기능과 그 구현을 완료했습니다. 다시 말하지만, Divi 5 프로젝트의 나머지 부분이 더 빠르게 진행되고 Divi 5 이후에 추가하는 모든 모듈과 기능이 더 빠르게 개발될 수 있도록 기초 수준에서 추가 작업을 수행하고 있습니다.

또한 이전 버전과의 호환성에 필수적인 역할을 할 Divi의 단축 코드 변환 방법을 리팩토링했습니다.

더 자세한 내용에 관심이 있는 경우 최신 변경 로그 항목은 다음과 같습니다.

디비 5.0.0-dev-alpha.4

• Shortcode 모듈 설정 모달의 배경 필드에 대한 렌더링 수정
• 정규식 패턴 조건으로 단축 코드 모듈 설정 필드 가시성을 수정합니다.
• 섹션 구분선 옵션의 프런트엔드 렌더링을 추가했습니다.
• 다중 선택기가 있는 모듈 옵션의 시각적 빌더 및 프런트 엔드에서 호버 옵션이 제대로 작동하지 않는 문제를 수정했습니다.
• 리팩터링된 @divi/scripts 패키지 및 테스트 추가
• 공개 릴리스를 준비하기 위해 npm에 게시된 유형 패키지

디비 5.0.0-dev-alpha.5

• 이전 요청이 자동으로 중단되면 Shortcode 모듈이 다른 요청을 보내도록 허용합니다.
• 현재 쇼트코드 모듈이 고정되어 있을 때 고정 옵션 버튼을 렌더링합니다.
• 현재 Shortcode 모듈이 고정 모듈 안에 있을 때 고정 옵션 버튼을 렌더링합니다.
• 사용하지 않는 기본값 Record<number, string | Shortcode 모듈에 레코드<문자열, 문자열>> 유형을 입력합니다.
• 단일 제품 페이지에 표시되는 잘못된 Woo Shortcode 모듈 요소를 수정했습니다. 영향을 받는 단축 코드 모듈: Woo 제품 알림, Woo 제품 이미지, Woo 장바구니에 추가, Woo 제품 재고, Woo 제품 가격, Woo 관련 제품, Woo 제품 상향 판매 및 Woo 제품.
• 모듈 슬러그, REST API 경로, 레이블, 테스트 사례 및 스토리북과 함께 지원되지 않는 모듈의 이름을 Shortcode 모듈로 바꿉니다.
• 모듈 배경 옵션에 배경 비디오 필드를 추가했습니다.
• REST API 호출 없이 Visual Builder에서 배경 비디오 렌더링을 리팩터링했습니다.
• 프런트엔드에 백그라운드 비디오 모듈 옵션의 렌더링이 추가되었습니다.
• 프런트엔드에서 배경 비디오를 초기화하기 위해 ScriptData를 추가했습니다.
• 고정 상태에서 백그라운드 비디오 모듈 옵션에 대한 지원이 추가되었습니다.
• 구분선 스타일이 선택되지 않은 경우 추가 옵션을 숨기도록 모듈 옵션에서 구분선 필드의 가시성을 업데이트했습니다.
• 명시적으로 반복을 거부하는 구분선 스타일 옵션에 대해 숨겨지도록 모듈 옵션에서 구분선 가로 반복 설정의 가시성을 업데이트했습니다.
• 전폭 섹션 설정(기본값 "아래"만 허용됨)에서 숨겨지도록 모듈 옵션의 구분선 배열 설정의 가시성을 업데이트했습니다.
• 현재 디바이더에 적용된 수평 및/또는 수직 플립을 반영하도록 모듈 옵션의 디바이더 스타일 필드 미리보기를 업데이트했습니다.
• 기본 픽셀("px") 단위 외에 퍼센트("%") 값을 저장할 수 있도록 모듈 옵션의 구분선 높이 필드를 업데이트했습니다.
• 양수 값("1x" 이상)만 허용하도록 모듈 옵션의 구분선 수평 반복 설정을 업데이트했습니다.
• 작성자, 로그인 및 사용자 역할에 대한 초기 조건을 포함하는 조건 옵션 기반이 추가되었으며, 나머지 조건은 향후 릴리스에서 점진적으로 추가될 것입니다.
• <ElementStyle />과 같지만 렌더링된 HTML 요소에 해당하는 ElementComponents 구성 요소를 추가했습니다.
• <ElementStyle />과 동일하지만 클래스 이름을 출력하는 함수에 해당하는 elementClassnames() 함수를 추가했습니다.
• 글꼴 제목 수준 오류를 수정했습니다.
• 포트폴리오 모듈에서 트리거되는 PHP 경고를 수정했습니다.
• 등록된 모든 REST 경로에 적절한 REST 권한 콜백이 추가되었습니다.
• D4에서 D5로 리팩터링된 기능에 대한 테스트를 포함하여 Divi 역할을 결정하기 위해 새로운 RoleEditor 클래스가 도입되었습니다.
• 자동 ET 및 WP nonce 추가 및 스트림 응답 지원과 같은 .sendRequest() 기능이 fetch()에 추가되었습니다.
• fetch()는 더 나은 유지 관리 및 확장성을 위해 완전히 리팩터링되어 새롭고 복잡한 조건 및 기능(예: .sendRequest()의 옵션)을 도입할 수 있습니다.
• 모든 REST API 호출인 fetch(), logFetch() 및 .sendRequest()가 통합되었으며 이제 logFetch()만 사용됩니다.
• 모듈에 대한 리팩터링된 변환 메커니즘.

디비 5.0.0-dev-alpha.6

• 개선되고 간소화된 REST API 등록, 논리, 스키마 및 테스트. divi/ajax 패키지의 이름을 divi/rest 패키지로 변경했습니다.
• 인라인 텍스트 편집기용 InlineTextEditorContainer 및 InlineTextEditor 구성 요소를 추가했습니다.
• 인라인 텍스트 편집기에 대한 onBlur, onClick, onDoubleClick, onKeyDown, onKeyUp, onMouseDown 및 onMouseUp 처리기가 추가되었습니다.
• 인라인 텍스트 편집기 필드에서 속성 값을 업데이트하는 저장 메커니즘을 추가했습니다.
• 인라인 텍스트 편집기의 편집 모드를 활성화 및 비활성화하는 이벤트 핸들러를 추가했습니다.
• 활성화/비활성화 및 __empty, __editing, __html과 같은 기타 상태를 기반으로 하는 ClassNames를 추가했습니다.
• 인라인 텍스트 편집기에 CSS/인라인 스타일을 추가했습니다.
• mousedown 이벤트 리스너를 추가하도록 WindowEventEmitterInstance를 리팩터링했습니다.
• 반응형 콘텐츠 PHP 도우미를 도입했습니다.
• 반응형 콘텐츠 JS 도우미를 도입했습니다.
• FE 스크립트에 반응형 콘텐츠 기능을 추가했습니다.
• Team Member 모듈의 Name, Position, Image 및 Content 요소에 반응형 콘텐츠 구현 추가
• 바 카운터 모듈의 백분율, 백분율 및 제목 요소 사용에 반응형 콘텐츠 구현을 추가했습니다.
• 버튼 모듈의 버튼 텍스트 요소에 반응형 콘텐츠 구현을 추가했습니다.
• Toggle 모듈의 Title 및 Content 요소에 반응형 콘텐츠 구현을 추가했습니다.
• Text 모듈의 Text Inner 요소에 반응형 콘텐츠 구현을 추가했습니다.
• 카운트다운 타이머 모듈의 제목 요소에 반응형 콘텐츠 구현을 추가했습니다.
• 오디오 모듈의 제목, 이미지, 아티스트 이름 및 앨범 이름 요소에 반응형 콘텐츠 구현을 추가했습니다.
• 코드 모듈의 콘텐츠 요소에 반응형 콘텐츠 구현을 추가했습니다.
• CTA 모듈의 제목, 콘텐츠 및 버튼 요소에 반응형 콘텐츠 구현을 추가했습니다.
• 이미지 모듈에 반응형 콘텐츠 구현을 추가했습니다.
• Circle Counter 모듈의 Title 요소에 반응형 콘텐츠 구현을 추가했습니다.
• Number Counter 모듈의 Title 요소에 반응형 콘텐츠 구현을 추가했습니다.
• 탭 모듈의 제목 및 콘텐츠 요소에 반응형 콘텐츠 구현을 추가했습니다.
• 로그인 모듈의 제목 및 콘텐츠 요소에 반응형 콘텐츠 구현을 추가했습니다.
• 구분선 모듈의 구분선 표시 옵션에 반응형 콘텐츠 구현을 추가했습니다.
• 전체 너비 헤더 모듈의 제목, 부제, 콘텐츠, 로고 이미지, 헤더 이미지, 버튼 1 텍스트 및 버튼 2 텍스트 요소에 반응형 콘텐츠 구현을 추가했습니다.
• Fullwidth Image 모듈에 반응형 콘텐츠 구현을 추가했습니다.
• 포트폴리오 모듈의 제목 및 콘텐츠 요소에 반응형 콘텐츠 구현을 추가했습니다.
• Shortcode 모듈 관련 코드를 Shortcode Module 패키지로 재배치합니다.
• ElementStyle 구성 요소에 글꼴 제목 스타일 렌더러를 추가합니다.

Divi 5의 속도

오늘의 게시물을 마무리하기 전에 속도에 대해 논의하고 싶습니다. 아시다시피, 우리는 Divi 5에 많은 새로운 기능을 추가할 계획이 없습니다. 그러나 이 새 버전과 함께 제공될 가장 중요한 변경 사항 중 하나는 특히 Visual Builder에서 속도가 크게 증가한다는 것입니다. , 우리 모두가 너무 많은 시간을 보내는 곳.

Divi 5 UI가 완성되지 않았고 빌더에 기능이 누락되었지만 계속 이야기하는 성능 차이를 살짝 보여드리고 싶었습니다. 따라서 이 비디오에서 사물이 어떻게 보이는지에 대한 판단을 보류하고 상호 작용 속도에만 집중하십시오!

페이지에서 요소를 가리키면 모든 것이 즉시 나타납니다. 디자인 설정을 조정하는 것과 마찬가지로 설정 팝업을 여는 것도 똑같이 빠릅니다. 전반적으로 밤낮의 차이입니다. 또한 페이지가 얼마나 크고 복잡해지는지는 중요하지 않습니다. Visual Builder는 이를 처리할 수 있으며 빠르게 유지됩니다.

이러한 수준의 속도를 달성하는 것은 Divi 4에서는 불가능했으며 Divi 5 재설계가 매우 중요한 이유 중 하나입니다.

출시 예정: Divi AI

이것이 이번 달 Divi 5 업데이트의 전부입니다. 그러나 티저가 하나 더 있습니다. 거의 모든 팀이 Divi 5에 집중하고 있지만 여전히 Divi 5 개발에 영향을 미치지 않는 Divi 4 기능을 작업하는 소규모 그룹이 있으며 현재 매우 흥미로운 작업을 진행하고 있습니다.

Divi AI라고 하는 이 제품은 대규모 언어 모델을 활용하여 빌더 내에서 바로 Divi 웹사이트용 텍스트 및 이미지와 같은 콘텐츠를 만들 수 있도록 도와줍니다! Divi에 통합되어 있기 때문에 빌더와 귀하의 웹사이트에 대한 정보를 가르쳐 이치에 맞고 믿을 수 없을 정도로 직관적인 방식으로 귀하의 콘텐츠를 만들거나 개선할 수 있습니다.

Divi AI를 살짝 엿보려면 오늘의 Youtube 비디오를 확인하십시오.

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

이것이 5월 진행 보고서의 전부입니다. 질문이 있으시면 반드시 댓글을 남겨주세요. 다음 달 업데이트도 기대해주시고, 다음 업데이트에서 뵙겠습니다!