구텐베르크 블록에 개요 추가

Gutenberg를 사용하여 복잡한 레이아웃을 구축할 때 가장 답답한 문제는 블록 또는 해당 부모를 선택하는 것입니다. 편집기 맨 아래에 있는 이동 경로의 도움 없이 첫 번째 클릭으로 블록을 선택할 수 있는 경우는 거의 없습니다(적어도 제 경험으로는).

이 문제를 해결하기 위해 각 블록에 윤곽선을 추가하여 중첩된 블록을 명확하게 표시하고 적절한 블록을 클릭할 수 있습니다.

먼저 스타일 파일을 큐에 넣어야 합니다.
테마의 functions.php 또는 플러그인의 기본 파일에 이 코드를 추가합니다.

add_action('enqueue_block_editor_assets', function () {
    wp_enqueue_style('outline-style', plugin_dir_url(__FILE__) . "/outline-style.css", false, '1.0', 'all');
});

그런 다음 oytline.style.css 안에 이 스타일을 추가합니다(코드는 SCSS에 표시되어 있으므로 사용하기 전에 CSS로 변환해야 합니다).

.wp-block {
    outline: 1px solid transparent;
    outline-offset: 7px;
    transition: all 0.2s;
    &:hover {
        outline-color: lightgray;
    }
    .wp-block {
        outline-offset: 2px;
    }
}

코드는 각 블록 주위에 윤곽선을 추가하지만 특히 사용자 정의 블록을 사용할 때 블록 이름을 식별하는 문제가 여전히 있습니다.

스타일을 약간 수정하여 오른쪽 상단 모서리에 블록의 제목을 추가할 수 있습니다(SCSS의 코드).

.wp-block {
    outline: 1px solid transparent;
    outline-offset: 7px;
    transition: all 0.2s;
    &:hover {
        outline-color: lightgray;

        &::before {
            content: attr(data-type);
            padding: 0.3em 0.6em;
            font-size: 0.8rem;
            position: absolute;
            color: black;
            font-family: 'Trebuchet MS', 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', Tahoma, sans-serif;
            top: 0;
            right: 0;
            left: initial !important;
            background-color: lightgray;
            transition: all 0.2s;
            pointer-events: none;
            z-index: 5;
            font-weight: normal;
        }
    }

    .wp-block {
        outline-offset: 2px;
    }
}

이것이 잘 작동하는 동안 얼굴을 사용하는 추가 문제가 있을 수 있습니다. 예를 들어 일부 사용자는 항상 윤곽선을 표시하거나(호버에만 표시되지 않음) 색상, 불투명도를 변경하거나 전혀 표시하지 않기를 원합니다.

이러한 문제를 해결하기 위해 사용자가 윤곽선 설정(색상, 불투명도 및 스타일 등)을 변경하고 윤곽선을 표시하거나 숨길 수 있는 WordPress 플러그인을 개발했습니다.

여기에서 플러그인을 찾을 수 있습니다.

kalimah 앱 / Editor-Block-Outline

WordPress Gutenberg 편집기 블록 개요 플러그인

또는 WordPress 플러그인 디렉토리에서 설치하십시오.
https://wordpress.org/plugins/editor-block-outline/