자바스크립트를 사용하여 워드프레스 편집기의 기본 클래스를 업데이트할 수 있습니까?

자바스크립트를 사용하여 워드프레스 편집기의 기본 클래스를 업데이트할 수 있습니까?

WordPress Gutenberg Editor에서 사용자가 '추가 CSS' 필드를 통해 수동으로 추가하지 않고 적용되는 이미지 블록에 기본 클래스를 프로그래밍 방식으로 설정하려고 합니다.

이미지 블록에 기본 스타일을 적용해 봤는데, 처음에는 작동합니다.

wp.blocks.registerBlockStyle( 'core/image', {
  name: 'retailResidential',
  label: 'Retail & Residential',
  isDefault: true
});

그러나 사용자가 사용자 지정 드롭다운에서 필드를 변경한 후 이 기본 클래스를 업데이트해야 합니다.이 드롭다운이 변경되면 블록 스타일의 등록을 취소한 다음 새 기본 블록 스타일을 등록하지만 추가로 생성된 이미지에는 영향을 주지 않습니다(업데이트된 기본 스타일로 이미지를 만들지 않고 이전 이미지를 계속 사용함).

wp.blocks.unregisterBlockStyle(
  'core/image',
  [ 'retailResidential', 'weddingsEvents', 'advertisingEditorial']
);

기본 이미지 블록 스타일을 업데이트한 후 편집기를 새로 고쳐야 합니까?아니면 더 나은 방법이 있을까요?

블록 스타일 업데이트를 위한 참조

귀하의 요구 사항에 대해 다음과 같은 작업을 수행했습니다.저는 22개의 주제를 연구하고 있습니다.

Javascript 파일의 editor-script-block.js

wp.domReady( function() {
  wp.blocks.unregisterBlockStyle( 'core/image', 'circle-mask' );
} );

wp.domReady( function() {
  wp.blocks.unregisterBlockStyle( 'core/image', 'default' );
} );

wp.domReady(function(){
     wp.blocks.registerBlockStyle( 'core/image', {
        name: 'retailResidential',
        label: 'Retail & Residential',

      });

      wp.blocks.registerBlockStyle( 'core/image', {
        name: 'weddingsEvents',
        label: 'Wedding & Events',
      });

      wp.blocks.registerBlockStyle( 'core/image', {
        name: 'advertisingEditorial',
        label: 'Advertising & Editorial'

      });
});

이제 저는 이미지에 상단 삼각형 오버 이미지를 "소매 거주" 스타일에 추가하고 싶은 것과 같은 스타일의 CSS를 주고 있습니다. 여기에서 이미지를 참조하십시오(https://prnt.sc/q6esxq) 에서는 백엔드와 프론트엔드에도 적용하는 클래스가 다르기 때문에 CSS를 적용해야 합니다.

관리자측

<style>
.is-style-retailResidential >div > div.components-resizable-box__container:after {
    content: '';
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 50px solid #170606;
    position: absolute;
    left: 50%;
    top: 0;
    transform: translatex(-50%);
}
</style>

프론트 엔드 측면

<style>
.is-style-retailResidential{
    position: relative;
}
.is-style-retailResidential:after {
    content: '';
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 50px solid #170606;
    position: absolute;
    left: 50%;
    top: 0;
    transform: translatex(-50%);
}

</style>

스타일을 기본으로 설정하려면 사용자 지정 필드 플러그인을 사용했지만 워드프레스 이미 제공 옵션은 여기를 참조하십시오(https://prnt.sc/q6ew4k) 기본 스타일을 "소매 및 주거"로 설정했으며 원하는 대로 작동합니다.

여전히 동영상을 업로드하고 있습니다. 여기를 확인해 주세요.

제가 오해한 것이 있으면 알려주세요!

언급URL : https://stackoverflow.com/questions/59077728/can-i-use-javascript-to-update-a-default-class-in-the-wordpress-editor