Beaver Builder와 Gutenberg 모두에서 작동하는 사용자 정의 모듈이나 블록을 만들고 싶었던 적이 있습니까? 이제 가능합니다!

Beaver Builder 2.7부터는 ACF(Advanced Custom Fields Pro)로 생성된 블록을 Beaver Builder와 Gutenberg 모두에서 사용할 수 있습니다.

이 게시물에서는 유용한 이유, 작동 방식 및 첫 번째 블록을 생성하는 방법을 포함하여 Beaver Builder에서 ACF 블록 사용과 관련된 모든 내용을 다룰 것입니다.

Beaver Builder에서 ACF 블록이 필요한 이유는 무엇입니까?

WordPress 편집기로 Gutenberg가 도입되면서 게시물에 풍부한 콘텐츠를 추가하는 것이 그 어느 때보다 쉬워졌습니다. 단축번호는 안녕! 이제는 버튼처럼 간단한 것을 추가하는 것조차 더 좋습니다. 그러나 편집기의 블록은 Beaver Builder에서 작동하지 않으며 그 반대의 경우도 마찬가지입니다.

WordPress 편집기를 사용하여 콘텐츠를 게시하는 동안 사이트 구축 및 페이지 레이아웃에 Beaver Builder를 사용하는 경우 ACF 블록이 유용합니다. 이를 통해 두 위치 모두에서 사용할 수 있는 한 가지 유형의 구성 가능한 콘텐츠를 만들 수 있습니다.

또한 ACF를 사용하면 양식을 생성할 수 있는 GUI와 블록을 신속하게 회전시킬 수 있는 프레임워크를 제공하여 블록을 더 쉽게 만들 수 있습니다. 우리가 찾은 바에 따르면 Beaver Builder 모듈을 코딩하는 방법과 매우 유사합니다.

사용자 정의 갤러리 레이아웃을 표시하는 Beaver Builder 모듈을 생성한다고 상상해 보십시오. 그것이 바로 제가 마지막으로 구축한 사이트에서 했던 일입니다. 이제 블로그 게시물에 동일한 갤러리 모듈을 사용하고 싶다고 상상해 보세요. Beaver Builder 2.7 이전에는 이것이 불가능했습니다. 하지만 이제 ACF 블록을 사용하면 이 작업을 수행할 수 있습니다.

Beaver Builder에서 ACF 블록은 어떻게 작동합니까?

위 이미지에서 볼 수 있듯이 ACF 블록은 모듈과 동일한 방식으로 Beaver Builder에서 작동합니다. 콘텐츠 패널의 레이아웃에 항목을 놓고 로드할 때 설정을 편집할 수 있습니다.

주목할만한 차이점 중 하나는 모든 ACF 필드가 Beaver Builder 설정 양식의 설정 탭 아래에 표시된다는 것입니다. 더 많은 탭이 필요한 경우 위의 예와 같이 ACF의 탭을 사용할 수 있습니다.

Beaver Builder에서 ACF 블록에 액세스하려면 아래와 같이 콘텐츠 패널을 엽니다. 블록은 표준 모듈 아래에 표시되거나 정의한 경우 사용자 정의 그룹에 표시됩니다. WordPress 편집기에서 블록을 구성하고 표시하는 데 사용되는 모든 블록 카테고리 또는 아이콘도 여기에 표시됩니다.

그 외에도 ACF 블록은 모듈과 동일한 방식으로 Beaver Builder에서 작동해야 합니다. 여기에는 고급 탭에서 무료로 제공되는 모든 간격 및 디스플레이 설정을 활용하는 것이 포함됩니다.

Beaver Builder용 ACF 블록 생성

ACF 문서와 WordPress 핸드북에서 배울 수 없는 Beaver Builder용 ACF 블록 생성에 대해 알아야 할 사항은 많지 않습니다. ACF로 생성된 블록은 제대로 작동해야 합니다.

도움을 드리기 위해 참조용으로 다운로드할 수 있는 ACF 블록 플러그인 예시를 만들었습니다. 그러나 알아야 할 몇 가지 문제가 있습니다…

• JSX 지원 – JSX 지원을 선언하는 블록은 현재 Beaver Builder에서 지원되지 않으며 사용할 수 없습니다. block.json을 사용하는 경우 아래 예와 같이 명시적으로 false로 설정해야 합니다.
• 블록 기능 – Beaver Builder는 현재 정렬, 색상, 변형 등을 포함하여 block.json에서 구성할 수 있는 추가 블록 기능을 지원하지 않습니다. 예제에 표시된 기본 사항만 지원됩니다.

ACF 블록을 생성하는 데 필요한 최소한의 파일은 block.json 및 template.php 두 파일입니다. 보시다시피 block.json에서 정의하여 블록에 특정한 스타일 및 스크립트 파일을 로드하는 것도 가능합니다.

block.json 구성

이는 템플릿 위치를 정의하기 위한 acf 매개변수가 추가된 표준 WordPress block.json 파일입니다. 그렇지 않으면 양식을 작성할 때 ACF에서 선택할 수 없습니다.

또한 여기에서 JSX 지원을 false로 설정해야 합니다. 그렇지 않으면 블록이 Beaver Builder에 로드되지 않습니다.

여기에서 Beaver Builder 그룹 지원을 구성할 수도 있습니다. 이는 아래와 같이 beaverBuilder 매개변수를 사용하여 수행됩니다. 기본적으로 블록은 표준 모듈 그룹 아래에 표시되지만 이 방법을 사용하면 이를 사용자 정의할 수 있습니다.

템플릿 파일(및 스타일 또는 스크립트 파일)의 경로는 block.json 파일에 상대적이며 동일한 위치에 저장되어야 합니다.

 { "name": "acf/bb-example-acf-block", "title": "ACF Example Block", "description": "An example ACF block that can be used in Beaver Builder.", "category": "bb-example-acf-blocks", "icon": "admin-appearance", "script": "file:./js/scripts.js", "style": "file:./css/styles.css", "supports": { "jsx": false }, "acf": { "mode": "preview", "renderTemplate": "template.php" }, "beaverBuilder": { "group": "ACF Blocks" } }

template.php 구성

이 PHP 파일은 블록의 내용을 출력하는 곳입니다. 여기서는 get_field를 사용하여 정상적으로 ACF 필드를 쿼리하고 결과를 출력에 사용할 수 있습니다. ACF 작업에 익숙하다면 이는 매우 친숙해 보일 것입니다.

 <?php $heading = get_field( 'heading' ); $content = get_field( 'content' ); ?> <div> <h3><?php echo $heading; ?></h3> <p><?php echo $content; ?></p> </div>

블록 로드

블록에 대한 코드를 생성한 후에는 핵심 함수인 register_block_type 사용하여 코드를 로드해야 합니다. 이 작업을 수행할 때까지는 양식을 작성할 때 ACF에서 블록을 선택할 수 없습니다.

 add_action( 'init', function() { register_block_type( 'path/to/block.json' ); } );

블록 양식 만들기

마지막으로 해야 할 일은 블록에 대한 양식을 만드는 것입니다. 블록을 코딩하기 전에 이 작업을 수행할 수도 있고 동시에 수행할 수도 있습니다. 전적으로 귀하에게 달려 있습니다. 블록이 아직 존재하지 않으면 필드 그룹 규칙에서 블록을 사용할 수 없다는 점만 알아두세요.

모든 ACF 필드 유형은 Beaver Builder와 Gutenberg의 블록에 대해 작동하는 것으로 나타났습니다. 이전에 ACF 양식을 작성한 경우 이는 모두 매우 표준적입니다. 간단히 양식을 만들고 블록 위치를 설정하면 완료됩니다!

블록 양식 내보내기

이 단계는 선택 사항이지만 블록을 플러그인으로 배송하려는 경우 유용할 수 있습니다. ACF 도구 아래에는 필드를 JSON으로 내보내거나 가져올 수 있는 옵션이 있습니다. 이를 통해 블록의 양식을 플러그인에 저장하고 버전 제어를 통해 관리할 수도 있습니다.

블록 양식을 내보낸 후 나중에 변경해야 할 경우 언제든지 다시 가져올 수 있습니다. 완료되면 다시 내보내고 해당 변경 사항을 git 저장소에 푸시하세요.

ACF는 JSON 파일을 자동으로 처리하는 방법을 제공하지만 안타깝게도 단일 위치에서만 작동합니다. 플러그인에서 그렇게 하면 ACF의 로컬 JSON을 사용하여 사이트의 다른 항목이 손상될 수 있습니다.

이러한 방식으로 필드 작업에 관심이 있다면 예제 플러그인에서 해당 필드를 로드하는 방법은 다음과 같습니다.

 add_action( 'acf/init', function() { $fields = json_decode( file_get_contents( 'path/to/fields.json' ), 1 ); /** * Only load if no fields exist in the database with this key. * This allows you to work on the fields if they have been imported. */ if ( empty( acf_get_fields( $fields[0]['key'] ) ) ) { acf_add_local_field_group( $fields[0] ); } } );

마무리

우리는 Beaver Builder가 존재하기 전부터 ACF의 열렬한 팬이었습니다. 이는 항상 복잡한 사용자 정의 솔루션을 쉽게 만들 수 있는 기능을 제공하는 강력한 도구입니다. 이번 통합을 통해 우리는 그 어느 때보다 기대가 크며 귀하의 프로젝트에도 유용하게 사용될 수 있기를 바랍니다!