JavaScript 없이 블록 구축: ACF, Block Lab 및 Lazy 블록 테스트

게시 됨: 2019-05-17

모든 사람이 아직 JavaScript로 블록을 만들 수 있거나 만들 의향이 있는 것은 아니며 때로는 원하는 블록을 찾을 때까지 3~4개의 블록 컬렉션을 설치해야 합니다.

세 번째 방법이 있습니다. 특정 사용자 정의 필드 세트에서 블록을 생성하는 플러그인과 블록의 프론트엔드 표시를 제어하는 템플릿이 있습니다. 이를 수행하는 데 가장 많이 사용되는 세 가지 옵션은 Block Lab, ACF(Advanced Custom Fields) 및 Lazy Blocks입니다.

이 테스트의 사용 사례는 이름, 성, 얼굴 사진, 약력, 전화번호, 및 이메일 주소를 입력하고 두 팀 구성원이 있는 2열 디스플레이에서 페이지의 블록을 사용합니다.

각 플러그인에 대해 설명하겠습니다.

Fieldgroup을 만드는 방법,
프론트엔드용 템플릿을 만드는 방법 및
블록을 사용하여 팀 페이지를 만드는 방법.

로컬 개발 도구로 Local by Flywheel을 사용했습니다. 테스트 사이트는 WordPress.1.1, Gutenberg 5.4 및 WordPress.com의 비즈니스 테마에서 실행되었습니다.

이 게시물을 읽은 후 필요에 맞는 플러그인을 선택할 수 있습니다.

Block Lab으로 팀 블록 만들기

XWP 팀 구성원이 Block Lab을 구축했으며 상용 버전과 함께 무료 플러그인으로 제공됩니다. 먼저 Block Lab을 사용하고 플러그인을 설치한 다음 새 블록을 시작했습니다.

다음은 필드를 설정하는 방법에 대한 비디오입니다.

다음 단계는 블록 템플릿을 설정하는 것입니다.

예상 위치를 보았을 때 템플릿은 /blocks/라는 하위 폴더에 있는 테마 디렉토리의 일부가 될 것입니다. 테마를 전환할 때 일부 콘텐츠 잠금이 있기 때문에 개발자가 기억해야 하는 사항입니다.

템플릿을 만들기 위해 코드 편집기를 열고 block-team-member.php 파일을 만들고 필드를 참조하기 위해 HTML +와 최소 PHP를 추가했습니다.

 <h2>
<?php block_field( '이름' );?> 
<?php block_field( '성' );?>
</h2>
<p><img class="teamphoto" src="<?php block_field( '그림' ); ?>"
 alt="<?php block_field( '이름' );?> 
<?php block_field( '성' );?> " 너비="150"/>
<?php block_field( 'short-bio' ); ?></p>

<p><em><?php block_field( 'first-name' );?></em> 
<br/>이메일을 통해 <span><a href="mailto:<?php block_field( 'email-address' ); ?>">
<?php block_field( '이메일 주소' ); ?></a></span>
 또는 <br/>
전화를 통해: <span><?php block_field( 'extension' ); ?></span></p>

마지막 단계에서 블록 속성을 사용하여 이 블록의 구성을 완료했습니다.

아이콘을 사람으로 설정하고,
범주로 "레이아웃 요소"를 선택하고
키워드로 "팀원, 팀" 추가

이 모든 것은 편집기의 블록 삽입기에 필요합니다.

어떻게 작동하는지 봅시다.

나는 우리의 Block Lab 팀을 만나라 라는 새로운 페이지를 추가했고 Block "Team Member"를 사용하여 팀 구성원을 추가했습니다.

지금은 블록 편집기 경계 내에서 모든 정보를 채우기로 결정했습니다. 필드 그룹을 설정하는 동안 사이드바의 차단 옵션 탭에 양식 컨트롤을 표시하도록 선택할 수도 있었습니다. 당분간은 개인 취향일 뿐이라고 판단했습니다. 블록 외부를 클릭하면 양식이 사라지고 블록이 프런트엔드 표현과 유사하게 렌더링됩니다.

이제 블록이 완료되었으므로 페이지에 팀 구성원을 더 추가할 수 있습니다. 두 개의 열이 있는 열 블록에 저장하기로 결정했습니다.

여태까지는 그런대로 잘됐다. 템플릿의 위치가 테마 폴더를 가리키고 있다는 사실이 놀랍지 않았습니다.

테마를 전환하고 싶을 때 여전히 내 사이트의 블록과 블록 레이아웃을 유지하고 싶기 때문에 블록 폴더를 새 테마의 디렉토리에 복사해야 합니다. 또 다른 방법은 Github의 Blocklab 설명서에 설명되어 있습니다. 템플릿의 기본 위치를 변경하는 두 가지 필터를 제공합니다.

“테마 내에서 다른 템플릿을 사용하려면 block_lab_override_theme_template( $theme_template ) 필터를 사용하세요. 테마 외부의 다른 템플릿(예: 플러그인)을 사용하려면 block_lab_template_path( $template_path ) 필터를 사용하세요."

이것은 설정하기가 매우 쉬웠습니다. PHP 개발자가 아니더라도 아마도 하나의 PHP 함수인 block-field()를 사용하고 올바른 필드 이름을 참조해야 할 것입니다.

본질적으로 Block Lab은 한 화면에서 필드를 생성하고 블록 속성을 구성한 다음 해당 블록 템플릿을 테마 디렉토리의 /blocks/ 폴더에 추가해야 하는 방법을 제공합니다. 상당히 직관적입니다.

ACF 5.8로 팀 블록 만들기

ACF(Advanced Custom Fields) 버전 5.8에는 블록 빌더가 포함되어 있습니다(Pro 버전에서만 사용 가능). 테스트를 위해 ACF 5.8 RC 1을 사용했습니다. 현재 최종 릴리스를 사용할 수 있습니다. Elliot Condon은 플러그인의 작성자이며 첫 번째 버전은 2011년에 출시되었습니다. 플러그인은 프리랜서와 에이전시 모두에게 매우 인기 있는 개발자 도구로 성장했으며 100만 회 이상 설치되었습니다.

그것의 성공과 다재다능함은 다른 두 플러그인에 비해 필드 그룹 생성을 더 복잡한 프로세스로 만듭니다. Pro 버전 5.8에는 블록 작성 도구의 첫 번째 릴리스가 포함되어 있습니다.

Field 그룹 "Team Member"의 관리자 보기입니다.

이제 이것을 블록으로 만들려면 어떻게 해야 합니까? 문서는 충분히 포괄적입니다. 참고: 이 테스트에서는 약간 다른 순서로 진행했습니다...

저는 Field Group으로 시작했고 블록을 등록한 후 해당 관리자 화면으로 돌아가야 했습니다(아래 참조).

두 개의 파일을 사용했습니다. 먼저 내 테마의 functions.php 에 블록을 등록해야 했습니다. 템플릿/블록 렌더링 코드의 경우 content-block-team-member.php 를 사용하여 활성 테마의 폴더에도 저장했습니다.

당신은 그 두 가지가 어떻게 1초 안에 함께 맞는지 보게 될 것입니다. 나머지 작업은 백엔드의 플러그인에 의해 수행됩니다.

PHP로 블록 코드를 작성해 봅시다.

첫 번째 스니펫은 블록 등록입니다. 이름, 제목, 설명을 지정하고 렌더링 템플릿을 가리키고 범주, 아이콘 및 일부 키워드를 지정하여 콘텐츠 생산자가 블록 삽입기에서 블록을 찾을 수 있도록 했습니다. 내 테마의 functions.php 끝까지 스크롤하고 다음 스니펫을 추가했습니다.

 함수 register_acf_blocks() {
   // 팀원 블록을 등록합니다.
   acf_register_block(배열(
       '이름' => 'acf-team-member',
       '제목' => __('ACF 팀원'),
       'description' => __('ACF 5.8을 통해 생성된 사용자 지정 팀 구성원 블록'),
       'render_template' => 'content-block-team-member.php',
       '카테고리' => '서식',
       '아이콘' => '관리자 댓글',
       '키워드' => array( '팀원', '팀' ),
   ));
}
// 함수가 존재하는지 확인하고 설정에 연결합니다.
if( function_exists('acf_register_block') ) {
   add_action('acf/초기화', 'register_acf_blocks');
}

이 코드는 설명서에서 가져온 것이며 몇 가지 값만 변경했습니다.

다음 섹션에서는 블록 렌더링 템플릿을 만들었습니다. 파일 이름은 " content-block-team-member.php "인 위 텍스트의 "render_template" 속성과 일치해야 합니다.

나는 또한 ACF의 문서를 따랐고 몇 가지 값만 변경하고 표시 코드를 업데이트했습니다.

 <?php
// 특정 스타일에 대한 id 속성 생성
$id = '팀원' . $block['아이디'];

// 블록 설정("wide")에서 정렬 클래스("alignwide") 생성
$align_class = $block['정렬'] ? '맞추다' . $block['정렬'] : '';

// 블록 필드에 값을 로드하고 기본값을 할당합니다.
$short_bio = get_field('short_bio') ?: '짧은 약력은 여기로... ';
$first_name = get_field('first_name') ?: '이름';
$last_name = get_field('last_name') ?: '성';
$이미지 = get_field('사진');
$email_address = get_field('이메일 주소');
$extension = get_field('확장');
?>

" 클래스="팀원 ">
       
   
   " alt="" alt=" " 너비="150"/>

Fieldgroup을 시작할 때 뒤로 돌아가서 그룹이 방금 등록한 블록과 연결되어 있는지 확인해야 했습니다. Fieldgroup 화면 아래에서 Location에 대한 규칙을 만들었습니다. 다음과 같이 읽어야 합니다. “ Block 이 ACF Team Member와 같으면 이 필드 그룹을 표시합니다.

이제 두 멤버를 추가할 때 블록 편집기에서 이것이 어떻게 작동하는지 봅시다.

흥미로운 경험이었습니다. 편집기 섹션의 양식을 사용하여 데이터를 입력할 수 있습니다. 또 다른 옵션은 사이드바에서 사용할 수 있는 양식 필드에 데이터를 입력하고 실시간으로 블록 업데이트를 보는 것입니다. 두 가지 방법 사이를 전환할 수 있지만 현재 사용 중인 방법에 따라 "편집으로 전환" 또는 "미리 보기로 전환" 버튼을 클릭합니다.

블록 편집기 UI가 잘 작동합니다. 더 정교한 설정과 필요한 코드를 살펴보는 것이 좋습니다.

지연 블록으로 팀 블록 만들기

이 테스트의 세 번째 플러그인은 GhostKit 블록 컬렉션을 게시한 동일한 팀인 nkdev.info의 Nikita가 만든 "Lazy Blocks"입니다.

post_content에 정보를 저장할 수 있을 뿐만 아니라 post_meta 테이블에 저장할 수도 있습니다.

다음은 인터페이스를 사용하여 필드를 만드는 동영상입니다.

이 관리 화면은 블록을 생성하기 위한 모든 정보를 얻는 데 중점을 두고 있으므로 왼쪽에는 내 필드를 만들고 사이드바에는 사이드바를 만들었습니다. 에디터에 블록을 등록하는 데 필요한 정보를 입력했습니다.

그 아래에 프론트엔드와 백엔드용 HTML을 추가할 수 있었습니다. 구문은 Block Lab보다 훨씬 쉽고 물론 ACF의 템플릿보다 훨씬 쉽습니다.

테마의 functions.php에 코드를 추가할 필요도 없었고 템플릿 코드로 추가 파일을 만들 필요도 없었습니다.

함수 호출이 아닌 구문 강조 표시 및 병합 태그의 도움으로 여기에 모두 추가할 수 있습니다. 설명서는 템플릿 코드를 작성하는 여러 방법을 보여줍니다. 나는 핸들바(의미론적 템플릿)가 다른 시스템의 병합 태그에 훨씬 더 가깝기 때문에 확실히 핸들바(의미론적 템플릿)의 팬입니다.

동일한 코드를 "Editor HTML" 탭에 복사/붙여넣기하여 양식 필드 아래에서 프런트엔드 디스플레이를 볼 수 있습니다.

사용합시다.

이것은 효과가 있는 것 같습니다. 블록을 선택 해제해도 폼이 사라지지 않는 것이 조금 어색했습니다. 편집기에서 많은 공간을 차지합니다. 팀 구성원을 2열 블록으로 만들고 싶었지만 2열 블록을 Column Block으로 끌어다 놓는 데 성공하지 못했습니다. 내 지원 주제에서 이것을 언급했고 nK는 다음과 같이 대답했습니다. "...블록이 선택되지 않았을 때 컨트롤을 숨기는 것은 좋은 기능입니다. 이미 ACF 블록에 추가되었으며 곧 Lazy Blocks에 추가될 것입니다." 모든 것이 적시에 있습니다.

결론: 복잡하거나, 진화하거나, 쉽습니다.

ACF 5.8 에는 매우 강력한 블록 작성 기능이 있으며 플러그인을 사용하여 사이트를 구축한 모든 사람은 고객을 위해 동적 블록을 생성할 수 있게 되어 매우 기쁠 것입니다. 그것은 잘 고려되었으며 모든 기술 세트의 개발자가 신속하게 시작하여 실행할 수 있습니다.

PHP에 정통하지 않은 사람은 모든 것을 진행하기 위해 시행착오를 겪을 것입니다. 블록에 대한 요구 사항이 더 복잡해지고 이 테스트의 사용 사례를 넘어서면 훨씬 더 복잡해집니다. 이것은 스스로 많은 코드를 작성하지 않는 워드프레스 초보자나 DIY 사이트 구현자를 위한 도구가 아닙니다.

현재로서는 ACF 5.8 Pro 버전에만 블록 빌더 기능이 제공됩니다. Condon은 그것을 독립형 플러그인으로 만드는 것을 고려하고 있습니다. (Twitteratti가 아이디어에 대해 어떻게 생각하는지 확인하십시오… )

블록랩 은 초기 개발 단계에 있습니다. 대부분의 블록 아키텍처를 추상화하는 데 성공하고 작성해야 하는 코드의 양을 줄입니다. 문서는 매우 도움이 됩니다. 템플릿은 별도의 파일에 저장되며 나머지 테마 파일과 함께 유지 관리해야 합니다. 우리 회사에서 우리 프로젝트에 그것을 사용한다면 헬퍼 플러그인 중 하나를 사용하여 템플릿 파일을 저장할 것이므로 고객은 Block Lab으로 구축한 블록의 콘텐츠와 표시를 잃지 않고 테마를 전환할 수 있습니다.

Pro 버전은 리피터 필드, 블록 가져오기/내보내기, 사용자 개체 필드, 맵 필드 및 더 많은 블록 기능과 같은 추가 기능을 자랑합니다.

XWP는 워드프레스닷컴 VIP 호스팅 및 기타 기업에서 엔터프라이즈 클라이언트와 협력하는 에이전시입니다. 팀 구성원은 Customizer, AMP 및 Tide를 포함하여 WordPress 공간의 다른 큰 아이디어에 기여하고 있습니다. 플러그인이 Gutenberg Phase 2와 함께 사이트 구현자, 대행사 및 테마 개발자를 위한 강력한 시스템으로 계속 성장할 것으로 기대합니다.

Lazy Blocks 는 설정하는 것이 즐겁습니다. 언급했듯이 저는 Handelbars 템플릿 구문의 팬입니다. 초보자도 배우기 쉽고 약간의 연습만 거치면 사이트 소유자는 사이트에 대한 특정 구텐베르크 블록을 만들 수 있습니다. 에디터에서 블록 처리는 작동하지만 현재로서는 블록 선택 상태와 선택 해제 상태 사이에서 디스플레이가 전환되지 않기 때문에 약간 투박합니다.

페이지 또는 게시물 섹션에 추가 필드가 있어야 하는 경우 Lazy Blocks는 프로토타입을 만들고 아이디어에서 개념 증명으로 빠르게 이동할 수 있는 훌륭한 도구입니다.

유일한 주의 사항: nkdev.info 와 Nikita라는 이름 뒤에 있는 사람들이 누구인지 알 수 없었습니다. 웹사이트는 단지 그것이 젊은 회사라고 밝힐 뿐 그 이상은 아닙니다. 플러그인을 사용하는 경우 개발자가 플러그인이 실행되기 전에 포기하는 경우를 대비하여 플랜 B를 준비해야 합니다.

ACF 5.8은 상당히 복잡합니다. Block Lab은 매우 유연하고 반복합적입니다. Lazy Blocks의 이름은 적절하고 사용하기 쉽습니다. 각 블록에는 HTML의 일부 디스플레이 출력이 필요하기 때문에 이들 중 어느 것도 코드를 작성하지 않고 벗어날 수 없습니다.

이 세 가지 블록 생성 플러그인에 대해 어떻게 생각하는지 알려주세요. 또한, 자바스크립트에 들어가지 않고도 블록을 만들 수 있는 다른 플러그인을 발견했다면 그것에 대해 알고 싶습니다! 댓글로 여러분의 생각과 발견을 공유해주세요!