Thêm bóng hộp vào các khối và phần tử WordPress

Tôi tình cờ gặp tweet này từ Ana Segota đang tìm cách thêm CSS box-shadow đến trạng thái di chuột của một nút trong WordPress trong theme.json tập tin.

Cô ấy hỏi vì theme.json là nơi mà WordPress muốn chúng ta bắt đầu di chuyển các kiểu cơ bản cho các chủ đề khối. Theo truyền thống, chúng tôi sẽ thực hiện bất kỳ và tất cả các kiểu dáng trong style.css khi làm việc trong một chủ đề “cổ điển”. Nhưng với chủ đề Twenty Twenty-Three (TT3) mặc định gần đây đã xuất hiện cùng với WordPress 6.1, chuyển tất cả các kiểu của nó sang theme.json, chúng tôi đang ngày càng tiến gần hơn đến việc có thể làm điều tương tự với các chủ đề của riêng mình. Tôi đã đề cập đến điều này rất chi tiết trong một bài báo gần đây.

Tôi nói “càng ngày càng gần” vì vẫn còn nhiều thuộc tính CSS và bộ chọn không được hỗ trợ trong theme.json. Ví dụ: nếu bạn đang hy vọng tạo kiểu cho thứ gì đó như perspective-origin in theme.json, điều đó sẽ không xảy ra — ít nhất là khi tôi viết bài này hôm nay.

Ana đang nhìn box-shadow và thật may mắn cho cô ấy, thuộc tính CSS đó được hỗ trợ bởi theme.json kể từ WordPress 6.1. Dòng tweet của cô ấy đề ngày 1 tháng XNUMX, cùng ngày mà 6.1 được phát hành. Nó không giống như hỗ trợ cho tài sản là một tính năng tiêu đề trong bản phát hành. Các tiêu đề lớn hơn có liên quan nhiều hơn đến khoảng cách và kỹ thuật bố cục cho các khối và chủ đề khối.

Đây là cách chúng ta có thể áp dụng một box-shadow đến một khối cụ thể — chẳng hạn như khối Hình ảnh nổi bật — trong theme.json:

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

Tự hỏi nếu cú pháp màu mới làm? Tôi cũng thế! Nhưng khi tôi thử — rgb(0 0 0 / 0.66) - Tôi không có gì cả. Có lẽ điều đó đã có sẵn hoặc có thể sử dụng yêu cầu kéo.

Dễ dàng, phải không? Chắc chắn rồi, nó khác nhiều so với việc viết vanilla CSS trong style.css và mất một số làm quen với. Nhưng nó thực sự có thể kể từ bản phát hành WordPress gần đây nhất.

Và, này, chúng ta có thể làm điều tương tự với các “yếu tố” riêng lẻ, chẳng hạn như một cái nút. Bản thân nút là một khối, nhưng nó cũng có thể là một khối lồng trong một khối khác. Vì vậy, để áp dụng một box-shadow trên toàn cầu cho tất cả các nút, chúng tôi sẽ làm điều gì đó như thế này trong theme.json:

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

Nhưng Ana muốn thêm bóng vào nút :hover tiểu bang. Rất may, hỗ trợ tạo kiểu trạng thái tương tác đối với các phần tử nhất định, như các nút và liên kết, sử dụng các lớp giả - bao gồm :hover, :focus, :activevà :visited - cũng đạt được theme.json hỗ trợ trong WordPress 6.1.

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

Nếu bạn đang sử dụng chủ đề gốc, chắc chắn bạn có thể ghi đè kiểu của chủ đề trong chủ đề con. Ở đây, tôi hoàn toàn ghi đè các kiểu nút của 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)"
          }
        }
      }
    }
  }
}

Đây là cách biểu hiện:

Một cách khác để làm điều đó: phong cách tùy chỉnh

Các phát hành gần đây Pixl chủ đề khối cung cấp một ví dụ khác về cách sử dụng trong thế giới thực của box-shadow tài sản trong theme.json sử dụng một phương pháp thay thế mà định nghĩa các giá trị tùy chỉnh. Trong chủ đề, một tùy chỉnh box-shadow tài sản được định nghĩa là .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.
  }
}

Sau đó, sau đó trong tệp, tùy chỉnh shadow thuộc tính được gọi trên một phần tử nút:

{
  "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.
  }
}

Tôi không hoàn toàn chắc chắn về việc sử dụng !important trong ngữ cảnh này. Tôi linh cảm rằng đó là một nỗ lực nhằm ngăn chặn việc ghi đè các kiểu đó bằng cách sử dụng Giao diện người dùng kiểu toàn cầu trong Trình chỉnh sửa trang, giao diện này có tính đặc hiệu cao hơn các kiểu được xác định trong theme.json. Đây là một liên kết neo để biết thêm thông tin từ bài viết trước của tôi về quản lý kiểu chủ đề khối.

Cập nhật: Hóa ra có cả một cuộc thảo luận về điều này trong Yêu cầu kéo # 34689, lưu ý rằng nó đã được giải quyết trong WordPress 5.9.

Và còn nữa…

Ngoài bóng đổ, CSS outline tài sản cũng đạt được theme.json hỗ trợ trong WordPress 6.1 và có thể được áp dụng cho các nút và trạng thái tương tác của chúng. Cái này PR GitHub cho thấy một ví dụ tốt.

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

Bạn cũng có thể tìm thấy các ví dụ thực tế về cách outline tài sản hoạt động trong các chủ đề khác, bao gồm Sự ồn ào, khối vảivà Cơ sở khối.

Kết thúc

Ai biết rằng có quá nhiều điều để nói với một thuộc tính CSS duy nhất khi nói đến việc chặn theo chủ đề trong WordPress 6.1? Chúng tôi đã thấy các phương pháp được hỗ trợ chính thức để thiết lập box-shadow trên các khối và các phần tử riêng lẻ, bao gồm các trạng thái tương tác của phần tử nút. Chúng tôi cũng đã kiểm tra cách chúng tôi có thể ghi đè bóng trong chủ đề con. Và cuối cùng, chúng tôi đã mở ra một ví dụ trong thế giới thực xác định và đặt bóng đổ trong một thuộc tính tùy chỉnh.

Bạn có thể tìm thấy các cuộc thảo luận chuyên sâu chi tiết hơn về WordPress và đó là box-shadow thực hiện trong này PR GitHub. Ngoài ra còn có một Đề xuất GitHub để thêm giao diện người dùng trực tiếp vào WordPress để đặt giá trị bóng trên các khối — bạn có thể chuyển trực tiếp đến một GIF động cho thấy nó sẽ hoạt động như thế nào.

Nói về mà, Justin Tadlock gần đây đã phát triển một khối hiển thị thanh tiến trình và điều khiển bóng hộp tích hợp vào nó. Anh ấy thể hiện điều đó trong video này:

Thông tin thêm

Nếu bạn muốn tìm hiểu sâu hơn về box-shadow và các thuộc tính CSS khác được hỗ trợ bởi theme.json tệp trong một chủ đề khối, đây là một số tài nguyên bạn có thể sử dụng: