页面目录
array_filter() 剔除非数组内容 #
// Create the schema parts array.
$schema_parts_array = array_filter(
[
[
'name' => esc_html__( 'Home', 'abc' ),
'item' => site_url(),
],
$author_page ? [
'name' => $author_page->post_title,
'item' => site_url( self::$author_page_slug ),
] : null,
[
'name' => $author_name,
'item' => $author_url,
],
]
);
Prefers Reduced Motion #
原文:https://www.a11yproject.com/posts/understanding-vestibular-disorders/
@media (prefers-reduced-motion: reduce) {
*,
::before,
::after {
animation-duration: 0.001s !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001s !important;
}
}
WordPress文章修改日期和发布日期的特殊情况 #
post_date | post_date_gmt | post_modified | post_modified_gmt |
---|---|---|---|
2024-09-26 21:09:00 | 2024-09-26 13:09:00 | 2024-09-26 21:06:00 | 2024-09-26 13:06:00 |
我于9:26 21:00:00创建一篇新文章,然后设置在9:26 22:00:00定时发布,查看数据库时,修改时间<发布时间,造成的一个bug,有这种特殊情况,那么就需要对比两个时间,选择大者作为文章最终体现在前端的时间。
visually-hidden样式 #
.visually-hidden {
position: absolute !important;
width: 1px !important;
height: 1px !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
clip: rect(0 0 0 0) !important;
-webkit-clip-path: inset(50%) !important;
clip-path: inset(50%) !important;
border: 0 !important;
white-space: nowrap !important;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
}
加载动画 #
<div class="spinner loading"></div>
<style>
.spinner {
--spinner-color: purple;
}
.spinner.loading {
content: "";
display: block;
width: 3rem;
height: 3rem;
border-radius: 50%;
border-width: 2px;
border-style: solid;
border-color: var(--spinner-color) var(--spinner-color) var(--spinner-color) transparent;
animation: spin 1s linear infinite;
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
</style>
UK政府网站link #
<code-demo>
<template shadowrootmode="open">
<a href="#">Buy tickeet</a>
<style>
a {
text-decoration: underline;
text-decoration-thickness: max(1px, .0625rem);
text-underline-offset: .1578em;
}
a:hover {
text-decoration-thickness: max(3px, .1875rem, .12em);
text-decoration-skip-ink: none;
}
a:active, a:focus {
outline: 3px solid rgba(0, 0, 0, 0);
background-color: #fd0;
box-shadow: 0 -2px #fd0, 0 4px #0b0c0c;
text-decoration: none;
}
</style>
</template>
</code-demo>
Instagram故事模块 #
今天开发一个类似Instagram故事的一个图片+链接的功能,当用户添加这个模块到编辑器中时,会默认添加一个初始故事。
需求要点:
- 拖拽功能
- 选择page或者post链接
- 如果是标准的page或者post链接,则自动提取featured image。
- 同时支持自定义链接,当添加的是自定义链接时,需要有一个新选项来上传链接图片。
编写过程遇到的难点:
- 拖拽组件中添加单独故事链接,使用到WordPress React ServerSideRendering,但是这个是将整个php组件渲染到当前位于items.map()子组件中,不是想要的效果。
- 自动提取featured image,用户添加页面链接我们给的是WordPress标准组件
URLInput
,但是当选中链接时,这个组件仅提供链接url和id,所以需要发一个新的服务器请求,拿到当前post id所对应的post type,然后再通过useSelect勾子拿到featured image的链接,这中间需要用到两个useEffect
, 以及追踪一个isFetchingImage
的变量。
原生组件Variation #
有时候可以通过添加标准组件的一个variation来实现需求,比如将标准table组件的`haxFixedLayout`默认值从true修改成false。Variations文档。
render_block() #
突然发现如果写成php组件,则无法在Gutenberg中使用,如果写成block,则可以同时在Gutenberg和php模版中使用。
get_template_part(
'partials/author-box',
null,
[
'author_id' => $_author_id,
'render_location' => 'author-page',
]
);
// 在php模版中重复使用author组件。
echo wp_kses_post( render_block(
[
'blockName' => 'heybran/author',
'attrs' => [
'authorId' => $_author_id,
'renderLocation' => 'author-page',
],
]
) );
Grid组件Variation #
今天尝试给标准grid组件增加一个block variation:https://github.com/heybran/gutenberg-blocks/blob/main/block-variations/block-variations.js#L21
/**
* @see https://developer.wordpress.org/block-editor/reference-guides/core-blocks/#group
* @see https://github.com/WordPress/gutenberg/blob/trunk/packages/block-library/src/group/variations.js
*/
registerBlockVariation('core/group', {
name: 'product-hero-grid',
title: __('Product Hero Grid'),
attributes: {
// tagName: 'div', // Default to `div`
layout: {
type: 'grid',
columnCount: 2,
},
// Use this custom class to override the default layout.
className: 'product-hero-grid',
},
// TODO: how to remove transform option at the toolbar level and sidebar level?
// TODO: how to remove the align option, as we're using custom css class?
// TODO: how to hide the Layout option at the sidebar?
});
有待解决的是:
- 如何隐藏Transform功能,因为这个是通过CSS实现一个特定的排版,并不需要提供Transform功能给用户。
- 如何隐藏位于sidebar区域的layout和transform功能,因为这些也没必要给到用户。
- 如果隐藏align功能,这个也没有必要支持。
使用heading来描述一个nav组件 #
我在阅读英国政府网站html代码时学习到,我们可以使用nav元素里面的heading元素来描述这个nav组件。网站的源代码如下:
<nav
role="navigation"
class="gem-c-related-navigation__nav-section"
aria-labelledby="related-nav-topics-8663b31f"
>
<h2 id="related-nav-topics-8663b31f" class="gem-c-related-navigation__sub-heading gem-c-related-navigation__sub-heading--footer">
Explore the topic
</h2>
<ul class="gem-c-related-navigation__link-list">
<li class="gem-c-related-navigation__link">
<a class="govuk-link gem-c-related-navigation__section-link--footer" href="/government/content-publishing">
Government content and publishing
</a>
</li>
<li class="gem-c-related-navigation__link">
<a class="govuk-link govuk-link gem-c-related-navigation__section-link--footer" href="/government/digital-accessibility">
Digital accessibility
</a>
</li>
</ul>
</nav>
我之前的直觉一直都是将heading放在nav元素之前,即使这样,应该也需要在nav上面增加一个aria-label属性来描述这个nav,但是语义并没有uk政府网站这样来的好。
当我们使用firefox浏览检查uk政府网站这个nav元素会看到这样的accessibility dom tree。
navigation: "Explore the topic"
heading: "Explore the topic"
text leaf: "Explore the topic"
list:
listitem: "Government content and publishing"
link: "Government content and publishing"
text leaf: "Government content and publishing"
listitem: "Digital accessibility"
link: "Digital accessibility"
text leaf: "Digital accessibility"
我们现在可以去掉他们的class,简化成我们未来可以在项目中直接复制粘贴使用的html结构。
<nav role="navigation" aria-labelledby="unique-id">
<h2 id="unique-id">Explore the topic</h2>
<ul>
<li>
<a href="/">Link text</a>
</li>
<li>
<a href="/">Link text</a>
</li>
</ul>
</nav>
TODO: 看看voice over是怎么朗读这样的html markup。
发表回复