WordPress 블록 및 요소에 상자 그림자 추가

플라톤에 의해 재발행

팔로워 : 0

나는 비틀 거렸다. Ana Segota의 이 트윗 CSS를 추가하는 방법을 찾고 있습니다. box-shadow 워드프레스에서 버튼의 호버 상태로 theme.json 파일.

theme.json에서 호버 상태의 버튼에 대한 상자 그림자를 추가할 수 있습니까? #WordPress

— 아나 세고타(@Ana_Segota) 2022 년 11 월 1 일

그녀가 묻는 이유는 theme.json WordPress에서 블록 테마의 기본 스타일 이동을 시작하기를 원하는 곳입니다. 전통적으로 우리는 style.css "클래식" 테마에서 작업할 때. 하지만 최근 워드프레스 3에 포함된 기본 TT6.1(Twenty Twenty-Three) 테마를 사용하여 모든 스타일을 theme.json, 우리는 우리 자신의 테마로 똑같이 할 수 있는 것에 점점 더 가까워지고 있습니다. 최근 기사에서 이에 대해 자세히 다루었습니다.

"더 가까이"라고 말하는 이유는 아직 지원되지 않는 많은 CSS 속성과 선택자가 있기 때문입니다. theme.json. 예를 들어 다음과 같은 스타일을 지정하려는 경우 perspective-origin in theme.json, 그것은 일어나지 않을 것입니다 — 적어도 오늘 이것을 쓰고 있습니다.

아나가 보고있다 box-shadow 다행히 그녀에게는 CSS 속성이 다음에서 지원됩니다. theme.json 워드프레스 6.1부터. 그녀의 트윗 날짜는 1월 XNUMX일이며, 6.1이 출시된 바로 그 날. 속성에 대한 지원이 릴리스의 헤드라인 기능이었던 것과는 다릅니다. 더 큰 헤드라인은 블록 및 블록 테마의 간격 및 레이아웃 기술과 더 관련이 있습니다.

적용 방법은 다음과 같습니다. box-shadow 특정 블록(특징 이미지 블록)에 theme.json:

{
  "version": 2,
  "settings": {},
  // etc.
  "styles": {
    "blocks" :{
      "core/post-featured-image": {
        "shadow": "10px 10px 5px 0px rgba(0, 0, 0, 0.66)"
      }
    }
  }
}

궁금하다면 새로운 색상 구문 공장? 저도요! 하지만 내가 시도했을 때 — rgb(0 0 0 / 0.66) — 나는 아무것도 얻지 못했습니다. 이미 작업 중이거나 풀 요청을 사용할 수 있습니다.

쉽죠? 물론 바닐라 CSS를 작성하는 것과는 다릅니다. style.css 익숙해지는 데 약간의 시간이 걸립니다. 그러나 가장 최근의 WordPress 릴리스에서 실제로 가능합니다.

그리고 버튼과 같은 개별 "요소"에 동일한 작업을 수행할 수 있습니다. 버튼은 그 자체로 하나의 블록이지만 다른 블록 내에 중첩된 블록이 될 수도 있습니다. 그래서, 적용하려면 box-shadow 모든 버튼에 전역적으로 다음과 같은 작업을 수행합니다. theme.json:

{
  "version": 2,
  "settings": {},
  // etc.
  "styles": {
    "elements": {
      "button": {
        "shadow": "10px 10px 5px 0px rgba(0,0,0,0.66)"
      }
    }
  }
}

그러나 Ana는 버튼에 그림자를 추가하고 싶어합니다. :hover 상태. 고맙게도, 스타일 지정 대화형 상태 지원 단추 및 링크와 같은 특정 요소에 대해 가상 클래스를 사용하는 경우(예: :hover, :focus, :active및 :visited — 또한 얻었습니다 theme.json 워드프레스 6.1에서 지원합니다.

{
  "version": 2,
  "settings": {},
  // etc.
  "styles": {
    "elements": {
      "button": {
        ":hover": {
          "shadow": "10px 10px 5px 0px rgba(0,0,0,0.66)"
        }
      }
    }
  }
}

부모 테마를 사용하는 경우 확실히 자식 테마에서 테마의 스타일을 재정의할 수 있습니다. 여기서는 TT3의 버튼 스타일을 완전히 재정의합니다.

전체 코드 보기

{
  "version": 2,
  "settings": {},
  // etc.
  "styles": {
    "elements": {
      "button": {
        "border": {
          "radius": "0"
        },
        "color": {
          "background": "var(--wp--preset--color--tertiary)",
          "text": "var(--wp--preset--color--contrast)"
        },
        "outline": {
          "offset": "3px",
          "width": "3px",
          "style": "dashed",
          "color": "red"
        },
        "typography": {
          "fontSize": "var(--wp--preset--font-size--medium)"
        },
        "shadow": "5px 5px 5px 0px rgba(9, 30, 66, 0.25), 5px 5px 5px 1px rgba(9, 30, 66, 0.08)",
        ":hover": {
          "color": {
            "background": "var(--wp--preset--color--contrast)",
            "text": "var(--wp--preset--color--base)"
          },
          "outline": {
            "offset": "3px",
            "width": "3px",
            "style": "solid",
            "color": "blue"
          }
        },
        ":focus": {
          "color": {
            "background": "var(--wp--preset--color--contrast)",
            "text": "var(--wp--preset--color--base)"
          }
        },
        ":active": {
          "color": {
            "background": "var(--wp--preset--color--secondary)",
            "text": "var(--wp--preset--color--base)"
          }
        }
      }
    }
  }
}

렌더링 방법은 다음과 같습니다.

버튼의 기본 상태(왼쪽)와 호버 상태(오른쪽)

다른 방법: 맞춤 스타일

최근 출시 된 Pixl 블록 테마는 실제 사용의 또 다른 예를 제공합니다. box-shadow 재산 theme.json 대체 방법을 사용하여 사용자 지정 값을 정의합니다. 테마에서는 커스텀 box-shadow 속성은 다음과 같이 정의됩니다. .settings.custom.shadow:

{
  "version": 2,
  "settings": {
    // etc. 
    "custom": {
      // etc.
      "shadow": "5px 5px 0px -2px var(--wp--preset--color--background), 5px 5px var(--wp--preset--color--foreground)"
    },
    // etc.
  }
}

그런 다음 나중에 파일에서 사용자 정의 shadow 버튼 요소에서 속성이 호출됩니다.

{
  "version": 2,
  "settings": {
    // etc.
  },
  "styles": {
    "elements": {
      "button": {
        // etc.
        "shadow": "var(--wp--custom--shadow) !important",
        // etc.
        ":active": {
          // etc.
          "shadow": "2px 2px var(--wp--preset--color--primary) !important"
        }
      },
    // etc.
  }
}

나는 사용에 대해 완전히 확신하지 못한다. !important 이 맥락에서. 내 직감은 Site Editor의 Global Styles UI를 사용하여 해당 스타일을 재정의하는 것을 방지하려는 시도라는 것입니다. theme.json. 자세한 정보에 대한 고정 링크는 다음과 같습니다. 블록 테마 스타일 관리에 대한 이전 기사에서.

업데이트 : 에서 이것에 대한 전체 토론이 있었던 것으로 밝혀졌습니다. 풀 리퀘스트 #34689, 이는 WordPress 5.9에서 해결되었음을 나타냅니다.

그리고 더 ...

그림자 외에도 CSS는 outline 재산도 얻었다 theme.json 워드프레스 6.1에서 지원되며 버튼과 버튼의 대화형 상태에 적용할 수 있습니다. 이것 GitHub 홍보 좋은 예를 보여줍니다.

"elements": {
  "button": {
    "outline": {
      "offset": "3px",
      "width": "3px",
      "style": "dashed",
      "color": "red"
    },
    ":hover": {
      "outline": {
        "offset": "3px",
        "width": "3px",
        "style": "solid",
        "color": "blue"
      }
    }
  }
}

실제 사례도 확인할 수 있습니다. outline 속성은 다음을 포함한 다른 테마에서 작동합니다. 라우드니스, 블록 캔버스및 블록베이스.

최대 포장

워드프레스 6.1에서 블록 테마와 관련하여 단일 CSS 속성에 대해 이야기할 것이 너무 많다는 것을 누가 알았습니까? 공식적으로 지원되는 설정 방법을 확인했습니다. box-shadow 버튼 요소의 대화형 상태를 포함하여 블록 및 개별 요소에 대해 또한 자식 테마에서 그림자를 재정의하는 방법도 확인했습니다. 마지막으로 사용자 지정 속성에서 그림자를 정의하고 설정하는 실제 예제를 열었습니다.

WordPress에 대한 더 자세한 토론을 찾을 수 있습니다. box-shadow 이것으로 구현 GitHub 홍보. 도 있습니다 GitHub 제안 블록에 그림자 값을 설정하기 위해 WordPress에 직접 UI를 추가하는 경우 — 다음을 수행할 수 있습니다. 애니메이션 GIF로 바로 이동 그것이 어떻게 작동하는지 보여줍니다.

말하자면, 저스틴 태드 록 최근에 진행률 표시줄을 렌더링하는 블록 개발 상자 그림자 컨트롤을 통합했습니다. 그는 이 비디오에서 그것을 보여줍니다:

[포함 된 콘텐츠]