헤드리스 워드프레스(headless wordPress) - 후방 및 전방의 Gutenberg 스타일

헤드리스 워드프레스(headless wordPress) - 후방 및 전방의 Gutenberg 스타일

헤드리스 워드프레스 + 리액트 웹사이트를 만들고 싶습니다.

나는 "비구텐베르그" 같은 것(헤더, 풋터 등)을 할 수 있었고 그것은 잘 작동합니다.

저의 문제는 게시물 내용입니다.저는 jSON에서 html 스타일을 받을 수 있습니다.제가 리액트로 스타일을 작성하면 앞 끝이 괜찮아 보입니다.

하지만 구텐베르크를 위한 CSS를 어디에 두어야 백엔드와 프론트엔드의 구텐베르크 편집기에서도 작동할 수 있을까요?

나의 json 예:

"content": {
"rendered": "\n<p class=\"has-text-color has-accent-color\">Some Random lorem ipsum in a paragraph</p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img src=\"http://bw.dev.local/wp-content/uploads/2020/05/Toronto.jpg\" alt=\"\" class=\"wp-image-13\" srcset=\"http://bw.dev.local/wp-content/uploads/2020/05/Toronto-1024x288.jpg 1024w, http://bw.dev.local/wp-content/uploads/2020/05/Toronto-300x84.jpg 300w, http://bw.dev.local/wp-content/uploads/2020/05/Toronto-768x216.jpg 768w, http://bw.dev.local/wp-content/uploads/2020/05/Toronto-1536x432.jpg 1536w, http://bw.dev.local/wp-content/uploads/2020/05/Toronto-1200x338.jpg 1200w, http://bw.dev.local/wp-content/uploads/2020/05/Toronto.jpg 1920w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" /></figure>\n",
"protected": false
},

그래서 보내드립니다.has-text-color,has-accent-color등 JSON과 수업을 하는데 앞과 뒤로 CSS를 두번 쓰고 싶지 않습니다.

하나의 CSS가 둘 다에게 효과가 있는 해결책이 있습니까?

워크플로우(또는 해결 방법?)지금 생각해 둔 것은 다음과 같습니다.

1. 블록의 프론트엔드 스타일시트를 생성하는 공식 사양에 따라 블록을 정상 흐름의 일부로 개발합니다.
2. 내 React 앱에서 해당 스타일시트 끌어오기*
3. 리액트 앱에서 REST API를 통해 WP 콘텐츠를 가져옵니다(단, 먼저 구텐베르크 블록을 노출하십시오, https://gist.github.com/brisa-pedronetto/15aa9c7a855eccf78c717a2491372074) 참조).
4. Gutenberg 블록을 React Components(반응 구성 요소)로 다시 만듭니다(이미 이 작업을 잘 수행하는 패키지가 있을 수도 있음).
5. Gutenberg 블록 이름을 classNames in React로 사용합니다(이 이름들은 애초에 Gutenberg에서 클래스로 사용되므로).

따라서 기본적으로 블록은 다음과 같은 형태로 저장될 수 있습니다.

<div class="wp-block-myblocks-foo">Foo</div>

React 측면에서는 다음과 유사합니다.

export default function Foo({ fooContent }) => (
  <div 
    className="wp-block-myblocks-foo"
    dangerouslySetInnerHTML={{__html: fooContent}}>
  </div>
)

스타일시트의 모양은 다음과 같습니다.

.wp-block-myblocks-foo {
  color: tomato;
}

* WP와 더 분리하기 위해 생성(또는 구축) 과정에서 프론트엔드 스타일시트를 CDN에 업로드할 수도 있습니까?

외부 스타일시트를 당겨야 하므로 SSR 앱에 이 솔루션이 더 적합할 수 있습니다.

어쨌든, 이것이 이 합의에 대한 해결책을 생각하는 더 많은 사람들에게 도달할 수 있기를 바랍니다!

언급URL : https://stackoverflow.com/questions/61887968/headless-wordpress-with-react-styles-in-back-and-front-end-gutenberg