日常笔记

作者

远程前端brandon

｜标签

,

页面目录

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_datepost_date_gmtpost_modifiedpost_modified_gmt
2024-09-26 21:09:002024-09-26 13:09:002024-09-26 21:06:002024-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>
<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。

访客留言

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

更多阅读