<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>translation &#8211; IT Crafter</title>
	<atom:link href="https://blog.itcrafter.net/archives/category/translation/feed" rel="self" type="application/rss+xml" />
	<link>https://blog.itcrafter.net</link>
	<description></description>
	<lastBuildDate>Wed, 27 Mar 2024 16:52:56 +0000</lastBuildDate>
	<language>zh-Hans</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=6.9.1</generator>
	<item>
		<title>WordPress Block 编辑器基本操作</title>
		<link>https://blog.itcrafter.net/archives/5</link>
					<comments>https://blog.itcrafter.net/archives/5#respond</comments>
		
		<dc:creator><![CDATA[IT Crafter]]></dc:creator>
		<pubDate>Wed, 06 Sep 2023 15:43:45 +0000</pubDate>
				<category><![CDATA[translation]]></category>
		<guid isPermaLink="false">https://blog.itcrafter.net/?p=5</guid>

					<description><![CDATA[对于 WordPress Block Editor（WordPress Block 编辑器）而言，block（ ... <a title="WordPress Block 编辑器基本操作" class="read-more" href="https://blog.itcrafter.net/archives/5" aria-label="Read more about WordPress Block 编辑器基本操作">阅读更多</a>]]></description>
										<content:encoded><![CDATA[
<hr class="wp-block-separator has-alpha-channel-opacity"/>



<p>对于 <strong>WordPress Block Editor</strong>（WordPress Block 编辑器）而言，<strong>block</strong>（区块）是所有内容的载体。WordPress 中的<strong>文章 (Post)</strong> 和<strong>页面 (Page)</strong> 均由各种 block 所组成。</p>



<p>WordPress Block 编辑器提供了各种类型的 <strong>block</strong>，让用户能够轻易在<strong>文章</strong>和<strong>页面</strong>中添加各种多媒体内容。用户通过简单的 block 布局调整即可打造出漂亮的页面。</p>



<p>WordPress Block 编辑器支持段落、图片、标题、图片墙等等多种 block 类型，几乎涵盖了全部常见的内容元素。而 WordPress 插件还能提供更多类型的 block。</p>



<h2 class="wp-block-heading">Block 解构</h2>



<p>举个简单的例子 &#8211; <strong>Heading block</strong>，如下图所示：</p>



<figure class="wp-block-image size-large is-resized has-custom-border is-style-default"><img decoding="async" src="https://pic2.helpfully.top:9522/uploads/2023/09/64f35284aef78.png" alt="" class="has-border-color has-cyan-bluish-gray-border-color" style="border-width:1px;width:555px;height:421px"/></figure>



<p>block 大致上包含三个部分：<strong>工具栏</strong>、<strong>内容</strong>和<strong>侧边栏</strong>。每个 block 都可以独立编辑或移动，不会影响<strong>文章</strong>/<strong>页面</strong>上的其它 block。</p>



<p>对于不同的 block，其工具栏的选项也有所不同。</p>



<p>block 的侧边栏面板主要用于格式配置，这些配置会影响 block 的布局和观感。</p>



<h2 class="wp-block-heading">如何添加 Block</h2>



<p>至少有 2 种添加 block 的方法：</p>



<ul class="wp-block-list">
<li>点击左上角的 &#8216;<strong>+</strong>&#8216; 号，如下图所示：</li>
</ul>



<figure class="wp-block-image size-large is-resized has-custom-border"><img decoding="async" src="https://pic2.helpfully.top:9522/uploads/2023/09/64f356f5a9382.png" alt="" class="has-border-color has-cyan-bluish-gray-border-color" style="border-width:1px;width:289px;height:52px"/></figure>



<ul class="wp-block-list">
<li>或者在正文区域，点击光标所在行最右侧的 &#8216;<strong>+</strong>&#8216; 号：</li>
</ul>



<figure class="wp-block-image size-large is-resized has-custom-border"><img decoding="async" src="https://pic2.helpfully.top:9522/uploads/2023/09/64f3577e312f9.png" alt="" class="has-border-color has-cyan-bluish-gray-border-color" style="border-width:1px;width:362px;height:111px"/></figure>



<p>这两种添加方式都支持 search 功能，可快速找到所需添加的 block 类型。</p>



<h2 class="wp-block-heading">如何配置 Block</h2>



<p>每种类型的 block 都具备特定的工具集，用于设置其布局和外观。</p>



<h3 class="wp-block-heading">Block 工具栏</h3>



<p>选中一个 Block 即可激活相应的 <strong>block 工具栏</strong>。</p>



<p><strong>Block 工具栏</strong>包含了所选 block 的格式选项。如上文提及，不同类型的 block 所支持的格式选项有所不同。</p>



<p>以下是常用的选项介绍：</p>



<figure class="wp-block-image size-large is-resized has-custom-border"><img decoding="async" src="https://pic2.helpfully.top:9522/uploads/2023/09/64f3e86d193cc.png" alt="" class="has-border-color has-cyan-bluish-gray-border-color" style="border-width:1px;width:439px;height:181px"/></figure>



<h4 class="wp-block-heading">Transform 选项</h4>



<p>一般来说，Block 工具栏上的第一个按钮即是 Transform 选项。</p>



<p>该选项可将当前选中的 block 转换为其它 block 类型。</p>



<p>比如，在添加了 Paragraph block （段落区块）之后，可通过 Transform 选项将其转换为 Quote block（引用区块）、Heading block、List block（列表区块）或 Pullquote block（引用摘要区块）等等。</p>



<p>点击 Transform 选项即可在下拉菜单中选择所需的转换类型。</p>



<figure class="wp-block-image size-large is-resized"><img decoding="async" src="https://pic2.helpfully.top:9522/uploads/2023/09/64f3ebcc86889.png" alt="" style="width:295px;height:319px"/></figure>



<p>（下拉菜单仅列出 block 本身所支持的转换类型）</p>



<p>执行 transform 操作时，<strong>原先的 block style （比如字体大小、字体颜色、背景颜色等等）会保留到新的 block 类型中</strong>。</p>



<p>除了 block style 之外，block 侧边栏的 Advanced 选项中的 Additional CSS class(es) 也会保留到新的 block 类型中。</p>



<figure class="wp-block-image size-large is-resized has-custom-border"><img decoding="async" src="https://pic2.helpfully.top:9522/uploads/2023/09/64f3efa6e469a.png" alt="" class="has-border-color has-cyan-bluish-gray-border-color" style="border-width:1px;width:292px;height:334px"/></figure>



<h4 class="wp-block-heading">Drag 选项</h4>



<p>按住 drag 按钮并移动鼠标，即可将 block 移动到页面的其它位置。</p>



<h4 class="wp-block-heading">Move up/down 选项</h4>



<p>每点击一下这个箭头按钮，即可将 block 上移/下移一个位置。</p>



<h4 class="wp-block-heading">More Options 选项</h4>



<p>点击 More Options 按钮即弹出下拉菜单，将显示出更多选项可供配置。</p>



<h5 class="wp-block-heading">注意：</h5>



<p>如果在右上角设置中勾选了 [View &#8211; Top toolbar] ：</p>



<figure class="wp-block-image size-large is-resized has-custom-border"><img decoding="async" src="https://pic2.helpfully.top:9522/uploads/2023/09/64f3fa1bbbce6.png" alt="" class="has-border-color has-cyan-bluish-gray-border-color" style="border-width:1px;width:372px;height:220px"/></figure>



<p>block 工具栏即固定到编辑器的顶部，如下图所示：</p>



<figure class="wp-block-image size-large is-resized has-custom-border"><img decoding="async" src="https://pic2.helpfully.top:9522/uploads/2023/09/64f3fad3317df.png" alt="" class="has-border-color has-cyan-bluish-gray-border-color" style="border-width:1px;width:618px;height:46px"/></figure>



<h3 class="wp-block-heading">Block 设置</h3>



<p>选中一个 block 时，编辑器右侧的侧边栏上会显示更多的设置选项。</p>



<p>侧边栏既提供针对 block 的设置项，也提供针对<strong>文章</strong>/<strong>页面</strong>的设置项，可通过下图所示的选项卡进行切换：</p>



<figure class="wp-block-image size-large is-resized has-custom-border"><img decoding="async" src="https://pic2.helpfully.top:9522/uploads/2023/09/64f3fc00b3d30.png" alt="" class="has-border-color has-cyan-bluish-gray-border-color" style="border-width:1px;width:268px;height:224px"/></figure>



<p>点击编辑器右上角的侧边栏按钮，可以切换显示/隐藏侧边栏。</p>



<p><strong>Post</strong> 设置页面提供了添加 tag、categories 等等设置项。这些设置往往会影响到整个<strong>文章</strong>页面。</p>



<p>而 Block 设置页面中的选项仅适用于当前选中的 block，每种 block 类型都有其各自适用的选项。</p>



<ul class="wp-block-list">
<li>诸如字体大小、字体颜色、背景颜色、边框、缩进等等，均在侧边栏的 block 设置页面中进行配置。</li>



<li>对于 图片、引用、社交图标等等 block，侧边栏还提供了 Styles 面板用于调整显示样式。把鼠标移到 style 配置项上即显示相应的简短说明。</li>



<li>每个配置面板均支持<strong>重置</strong>：</li>
</ul>



<figure class="wp-block-image size-large is-resized has-custom-border"><img decoding="async" src="https://pic2.helpfully.top:9522/uploads/2023/09/64f3fefacaf59.png" alt="" class="has-border-color has-cyan-bluish-gray-border-color" style="border-width:1px;width:243px;height:283px"/></figure>



<h2 class="wp-block-heading">如何锁定/解锁 Block</h2>



<p>锁定功能可以防止 block 被删除或被移动位置。通过 Block 工具栏的 Lock 选项进行配置：</p>



<figure class="wp-block-image size-large is-resized has-custom-border"><img decoding="async" src="https://pic2.helpfully.top:9522/uploads/2023/09/64f401e2f1a2b.png" alt="" class="has-border-color has-cyan-bluish-gray-border-color" style="border-width:1px;width:531px;height:439px"/></figure>



<p>Lock 选项提供了两个配置：</p>



<figure class="wp-block-image size-large is-resized has-custom-border"><img decoding="async" src="https://pic2.helpfully.top:9522/uploads/2023/09/64f4027415120.png" alt="" class="has-border-color has-cyan-bluish-gray-border-color" style="border-width:1px;width:405px;height:337px"/></figure>



<ul class="wp-block-list">
<li>Disable movement：禁止 block 移动位置；</li>



<li>Prevent removal：禁止删除这个 block；</li>
</ul>



<p>锁定之后，相应的 Block 工具栏会显示“上锁”的图标：</p>



<figure class="wp-block-image size-large is-resized has-custom-border"><img decoding="async" src="https://pic2.helpfully.top:9522/uploads/2023/09/64f402f2c9008.png" alt="image-20230903115218584" class="has-border-color has-cyan-bluish-gray-border-color" style="border-width:1px;width:475px;height:46px"/></figure>



<p>重复上述步骤，在 More Options 下拉菜单里选择 <strong>Unlock</strong> 即可配置解锁。</p>



<h2 class="wp-block-heading">如何删除 Block</h2>



<p>选中需要删除的 block，在 More Options 下拉菜单中点击 <strong>Delete</strong> 或 <strong>Remove&#8230;</strong> 即可删除 block。</p>



<figure class="wp-block-image size-large is-resized"><img decoding="async" src="https://pic2.helpfully.top:9522/uploads/2023/09/64f40445a7284.png" alt="image-20230903115757438" style="width:303px;height:513px"/></figure>



<h2 class="wp-block-heading">怎样找到所需的 Block 类型或 Block Pattern</h2>



<p>WordPress Block editor 所提供的 Block 类型几乎支持网站上的所有页面元素。点击编辑器左上角的加号即可浏览这些 block 类型。</p>



<p>下拉菜单按照类别列出了可选的 Block 类型，或者可以直接在搜素栏里输入 Block 名称来快速搜寻。</p>



<p>一些主题还提供了 Block Pattern 可供直接使用。所谓 Block Pattern，即是将多种 Block 类型组合起来使用。</p>



<figure class="wp-block-image size-large is-resized has-custom-border"><img decoding="async" src="https://pic2.helpfully.top:9522/uploads/2023/09/64f405b93df8a.png" alt="image-20230903120409007" class="has-border-color has-cyan-bluish-gray-border-color" style="border-width:1px;width:374px;height:757px"/></figure>



<h2 class="wp-block-heading">Block 使用 tips </h2>



<h3 class="wp-block-heading">选中多个 block</h3>



<p>以下方式可以同时选中多个 block：</p>



<ul class="wp-block-list">
<li>Shift + 鼠标拖拽</li>



<li>Shift + 鼠标点击</li>



<li>Shift + 键盘方向键</li>
</ul>



<p>同时选中多个 block 之后，可以合并进行配置或者 Transform 等操作</p>



<h3 class="wp-block-heading">创建<strong>文章</strong>/<strong>页面</strong>链接</h3>



<p>编辑器支持创建链接指向已有的<strong>文章</strong>/<strong>页面</strong>，只须在 block 内容中输入 &#8216;[[&#8216; ，即可从弹出的菜单中选择可供链接的<strong>文章</strong>/<strong>页面</strong>。</p>



<figure class="wp-block-image size-large is-resized has-custom-border"><img decoding="async" src="https://pic2.helpfully.top:9522/uploads/2023/09/64f407f16c79d.png" alt="image-20230903121337201" class="has-border-color has-cyan-bluish-gray-border-color" style="border-width:1px;width:235px;height:159px"/></figure>



<p></p>



<p></p>



<p></p>



<p></p>



<p></p>


]]></content:encoded>
					
					<wfw:commentRss>https://blog.itcrafter.net/archives/5/feed</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
	</channel>
</rss>
