米拉德网站教程网
Sign in / up

WordPress可视化编辑教程全站编辑教程

Published
2022-09-15
浏览次数 :  463

WordPress全站编辑自从6.0版本开始提出以来，正逐渐改变来全世界网站的生态布局。对于开发者来讲，怎样来适应这个趋势，是未来是否成功的关键所在。下面我们就来讲讲wordpress全站编辑教程可视化编辑教程的一些注意点：

WordPress可视化编辑教程

  • 现在的theme.json的version依然是”version”:2
  • JSON文件里，名字一定是双引号，不能是单引号，也不能有大写
  • settings属性选项是设置全局的样式变量，是设置预设默认值，初始化全局变量让全局调用。也是设置默认变量的地方。所以引入字体、设置颜色属性、设置每个block的属性等，styles属性是调用这些预设值，应用预设值
  • color属性关闭默认色盘的属性是defaultPalette，要设置这个属性为false的话，就要后面添加一个空的色盘，”palette”:[]，不然永远无法关闭(跟教程里的有区别)— 以上是错误的，因为我在defaultPalette:false 后面还加了个逗号，然后后面又没内容了，所以json不识别。
  • wp自带默认的block的话名字是以core开头的。
  • 参考文档：https://developer.wordpress.org/block-editor/how-to-guides/themes/theme-json/
  • theme.json的contentSize: 针对post的编辑的内容，不是针对页面模板。
  • them.json 里面如果下面没有了的话最后一个千万不要写逗号。这个问题困扰了我好久。像这样：

{
“version”:2,
“settings”:{
“color”: {
“defaultPalette”: false,
“palette”:[],
}
}
}

palette:[] 后面千万不要有逗号！

  • theme.json的custom 选项是禁止掉面板的colorpicker.
  • theme.json color的 duotone选项针对图片上传后的滤镜。 可以先在settings里的 color的duotone里添加 自己的 滤镜颜色，

“duotone”:[{
“slug”:”u-pink-sunset”,
“colors”:[“#11245e”,”#dc4379″],
“name”:”Udemy Pink Sunset”
}], 上面也是添加全局的duotone , 添加color和添加 gradients都一样。 然后在自己自定义的block里面设置duotone.

  • 要禁用duotone或者gradients的方法首先要设置duotone和gradients为空数组。duotone:[] 然后设置 “customDuotone”: false, gradients也是一样。 首先要清空duotone和graidents然后禁用掉自定义挑选。
  • styles属性选项可以设置默认的颜色，比方说设置Text的默认颜色是white , 设置background的默认颜色是red 这种。 styles选项跟settings是并列的，settings是设置global 的 值， styles是应用这些global的值 。organized way to set CSS propeties, styles in the top level will be added in the body selector. style 一级的属性应用在body标签里。 这里设置好之后是会自动勾选主题色盘那里的颜色。
  • 在settings里面color里面定义的色盘的名称会自动添加到wp里面的颜色色盘，前缀以–wp–preset–color–你的色盘定义的slug
  • 要设置gradient不能直接设置background : gradient , 要设置gradient 属性： gradient:”var(–wp–preset–gradient-u-summer-dog)”,

“blocks”:{
“core/button”:{
“color”:{
“gradient”:”var(–wp–preset–gradient–u-summer-dog)”
}
}
}

  • 官方styles介绍： Just like settings, styles that are applied to the website body are placed on the root level of the styles section. 在根部一级应用
  • theme.json还可以更改各个元素的名字。比方说可以更改h1、link等样式， 在styles下面用elements属性。 比方说设置:

“link”:{
“color”:{
“text”:”var(–wp–preset–color–u-info)”
}
} 这样就会 设置 超链接a的样式为 .editor-styles-wrapper a 的样式为自定义色盘颜色的预设颜色 –wp–preset–color–u-info

  • 如果要开启Borders 首先在 settings里设置全局的属性变量border 来初始化border ：

“border”:{
“color”:true,
“radius”:true,
“style”:true,
“width”:true
} 然后可以在自定义的block里面添加border, 比方在 pullquote block 里面添加 ：　在ｓｔｙｌｅ里面的ｂｌｏｃｋ　，　因为Ｂｏｒｄｅｒ属于ｓｔｙｌｅ　。都是根据ｃｓｓ来的：　在里面设置ｂｏｒｄｅｒ的每个属性就好：　

开启了border属性之后用户可以在block设置面板更改自定义的border样式，其他的样式都可以自主添加。也就是没开启border之前，无法在面板里修改border的样式。

TYPOGRAPHY

  • typography里面设置字体类型和大小。在settings下面，添加预设默认的typography:

“typography”:{
“fontFamilies”:[
{
“fontFamily”:”Rubik,sans-serif”,
“slug”:”u-rubik”,
“name”:”Udemy Rubik”
}
]
} 就添加了默认的typography ， 再指定的Block的默认的typography， 比方说设置site-title的typography ： 因为这里是预设的设置值，所以在settings里面的Block ，不是styles里面的block 。

“core/site-title”:{
“color”:{
“defaultPalette”:true,
“gradients”:[],
“customGradient”:false,
“custom”:false,
“link”:true,
“palette”:[
{
“slug”:”u-primary”,
“color”:”#ef4444″,
“name”:”udemy-primary”
}
]
},
“typography”:{
“fontFamilies”:[
{
“fontFamily”:”Pacifico,sans-serif”,
“slug”:”u-pacifico”,
“name”:”Udemy Pacifico”
}
]
}
}

这样设置的话 已经在block管理面板添加了字体选项。 首先打开全局的style . 在排版，文本或者链接，字体里面，就会预设我们预设的 字体的值， udemy rubik 。 然后我们去site-title那个block的编辑页面， 点击排版左边的三个点， 就会看到字体选项， 点击设置字体选项添加到面板， 我们就会看到我们设置的 pacifico的字体已经预设到了字体中。

但是现在这些font的设置还不起作用，因为我们还没加载这些font到我们主题里。 接下来就教如何加载字体和其他样式文件到主题里。

改变fontsize 属性

  • fontsize属性是heavily supported feature
  • fontsize可以设置全局级别和block自定义级别。 先设置全局fotsize属性，在settings级别下面的typography里面,fomtFamilies下面 设置fontsizes:

“fontSizes”:[
{“slug”:”small”,”size”:”0.75rem”,”name”:”Small”},
{“slug”:”medium”,”size”:”1.25rem”,”name”:”Medium”},
{“slug”:”large”,”size”:”2.25rem”,”name”:”Large”},
{“slug”:”x-large”,”size”:”3rem”,”name”:”X Large”},
{“slug”:”gigantic”,”size”:”3.75rem”,”name”:”Gigantic”},
]

  • fontSizes也跟fontFmilies一样可以预设很多种 。wp 本身有预设几种fontsieze : –wp–preset–font-size–small . –medium . –large . -x-large 等四种， 分别是 13,20，36,42px ， wp 预设的几种fontsize可以被重写。 详细教程在这里 ： https://richtabor.com/standardizing-theme-json-font-sizes/
  • settings里的spacing是margin和padding，在settings里设置margin和padding为true就可以开启
  • 在styles选项里可以重置网站的margin 等，
  • 在settings里开启”appearanceTools”:true, 就开启了全部的面板

Block主题的模板 — template/parts

block主题template下面的Index.html不能直接粘贴html代码，不然无法在全站编辑解析，要输入block格式的html 。 在全站编辑页面，输入html模块，然后点击三个点的复制， 将block模块的代码复制到你的index.html里面。 html模块的代码开头是 wp:html 。

新建组件的方式：

在主题根目录新建parts文件夹，输入Header.html 和footer的html . 然后将头部的Html文件复制到Html block里面然后粘贴block html 代码到模板。 然后在全站编辑模块里选择模板组件。挑选你的组件就可以。

点击全站编辑页面的三个横到侧边栏管理，点击Header和footer的block复制到Index.html就可以看到这两个提示的是 ： 模板组件的写法是：

<!-- wp:template-part {"slug":"header","theme":"new-block-theme"} /-->
<!-- wp:template-part {"slug":"footer","theme":"new-block-theme"} /-->

现在在index.html就有三个Block了。 block都有开启和技术的标签

header和footer 都是模板组件， 点击列表视图。点击header, 显示模板组件，可以选择Html元素。选择头部元素为Header , 可以设置头部block的html标签为header , 下面选择 addtional class 额外的class ， 可以设置Header的class. 可以看到block里面设置了 className 

<!-- wp:template-part {"slug":"header","theme":"new-block-theme","tagName":"header","className":"shadow"} /-->
  • theme.json里用

“customTemplates”:[
{
“name”:”full-width-page”,
“title”:”Full width Page”,
“postTypes”:[
“page”
]
}
] 属性来创建页面模板，上面填好之后就可以在templates里面创建full-width-page.html。 模板名字必须与name的名字符合。 在页面编辑那里选择页面模板就可以使用了。

创建自定义的block

  • 创建自定义的block用到react技术， 用到的脚本是 @wordpress/scripts ， 用npm命令安装。
  • 要通过php注册block , add_action( ‘init’, ‘up_register_blocks’ );

function up_register_blocks() {
register_block_type( UP_PLUGIN_DIR . ‘build/block.json’ );
}

  • 一定要创建src文件夹，在里面写进index.js, block.json文件，通过npm run start 命令(在package.json) 运行后会在build文件夹里写入。wordpress会直接应用build文件夹下面的文件
  • 然后在block.json里面导入必要信息：

{
“$schema”:”https://schemas.wp.org/trunk/block.json”,
“apiVersion”:2,
“name”:”udemy-plus/fancy-header”,
“title”:”Fancy Header”,
“category”:”text”,
“icon”:”star-filled”,
“description”:”Adds a header with a hover effect”,
“keywords”:[“header”,”underline”,”hover”],
“version”:1,
“textdomain”:”udemy-plus”,
“editorScript”:”file:./index.js”,
“attributes”:{
“content”:{
“type”:”string”
}
}

}

  • block的attribute储存的是block的数据信息。 Block attributes provide information about the data stored by a block. For example, rich content, a list of image URLs, a background colour, or a button title.

{
url: {
type: ‘string’,
source: ‘attribute’,
selector: ‘img’,
attribute: ‘src’,
},
title: {
type: ‘string’,
},
size: {
enum: [ ‘large’, ‘small’ ],
},
}

  • js 的spread operator，也就是三个点 … 是扩展运算符， 扩展或者合并MERGING数组对象和文本符, 
const apps = ['mi','taobao','jingdong']

const wensite = ['suning','guomei']
//...spread operator合并数组
const complete = [...apps,...wensite]

//或者merging合并对象
const ticket = {}

const ticket = {name:'Luis',price:10}

const updateTicket = {...ticket}

console.log(updateTicket)
VM714:1 {name: 'Luis', price: 10}

//可以改变name的值 可以合并新的值和原来的Object 
const updateTicket = {...ticket,name:'wayne'} 

console.log(complete)
VM412:1 (5) ['mi', 'taobao', 'jingdong', 'suning', 'guomei']

add block props

props就是自定义Block有一排编辑栏可以编辑，没有添加props时候就没有编辑栏

要用到blockprops 首先要加载进来， 用block editor的useBlockProps 的库

首先在edit 的函数里定义变量，通过js 的 spread 函数加载进来， 然后再save的函数里定义变量，加载save方法进来。 

registerBlockType(block.name,{

  //edit block,for the guterberg editor
  edit({attributes,setAttributes}) {
    const {content} = attributes
    const blockProps = useBlockProps()
    console.log(blockProps)
    return (<RichText {...blockProps} tagName="h2" placeholder={__("Enter Heading",'udemy-plus')} value={content} onChange = { newVal => setAttributes({content:newVal}) } />)
  },

  //save block , for the froontend , attributes 来自block.json 
  save({attributes}) {
    //destruct
    const {content} = attributes
    const blockProps = useBlockProps.save()

    //return the same component and can not be editable 
    return (<RichText.Content {...blockProps} tagName="h2" value={content} />)
  }
}

然后自定义的block也启用了编辑栏。

添加自定义的css ，直接可以在js里面import import ‘./main.css’

然后定义props的时候添加：

const blockProps = useBlockProps({
className:’fancy-header’
})

然后save函数的时候添加相同的

custom blocks的功能都是wordpress packages包里的一个又一个Package, 接下来要讲的是 wordpress/guternberg/components package . 在github官方的wordpress 仓库里可以找到所有的package

setAttribuet() will update the block attribuet

attributes 对象 包含从blockjson传递的当前Block的所有属性，setAttribute帮助我们更新当前属性

要使用attributes属性时候在edit函数里面传递， 首先要析构,desctructor.

const {bgColor,textColor} = attributes

这样我们就有了components和attributes

React的fragment都是以<></>开头和结束的

callback 函数最后以_cb结尾

js注册Block以及设置都是后台编辑的页面的功能性函数，

BLCOK的前端的返回内容在php里注册Block时候返回的函数里面，

['name' => 'search-form','options' => [
      'render_callback' => 'up_search_form_render_cb'
    ]]

function up_search_form_render_cb() {
  return 'Hello';
}

OUTPUT BUFFERS

By default , PHP sends the content directly to the browser as its written.

为什么要用Buffer , 因为 php 把代码直接发送到浏览器进行执行。

Output buffering 就是 php 代码要等到全部加载好才能执行，PHP代码存在内存中，不能一行一行的执行。 It’s a feature for storing content in memory to prevent it from being sent to the browser immediatly.

Buffer 只能包含当前的函数

当buffer关闭的标签执行时候就可以当作完整的string来执行整段代码。

function up_search_form_render_cb() {

  echo 'Hey'; 
  echo '<br>';
  ob_start();
  echo 'hello';
  return 'Hello';

}

上面的hey 首先会执行，然后等文档加载好之后才会执行hello.

Using attributes in a php render function

block 前端输出的函数的$atts会从钩子里传递过来block.json里面的attributes

阶段总结

注册block自定义block的流程：

先安装wpsctript脚本进行 web pack打包，

然后php注册block，在init钩子上通过register_block_type 注册 block。 函数介绍： 

register_block_type( string|WP_Block_Type $block_type, array $args = array() ): WP_Block_Type|false

官方推荐的是通过block.json来注册block type. Registers a block type. The recommended way is to register a block type using the metadata stored in the block.json file. (到目前我还没完全搞懂)

哦，我懂了。register_block_type 里面可以直接加载block文件或者文件夹，wordpress会自动搜索index.js文件然后根据index.js加载的block.json文件的属性进行创建block.

首先从@wordpress/blocks脚本里加载进来registerBlockType库，然后在registerBlockType库里执行edit和save函数，edit是执行的编辑页面的输入内容，save执行的是存储到数据库的内容。

接下来我们继续笔记

InspectorControls 元素可以加载 侧边栏的编辑内容 . PanelBody 元素可以 编辑侧边栏内容并且和其他区分

ToggleControl 组件就是侧边栏的一块编辑区域

Onchange方法在更新内容的时候执行

WordPress有一个单独的库来创建block , 要定位到plugin文件夹才可以创建。只要命令定位到plugin文件夹，然后输入 npx @wordpress/create-block example, 就会在插件文件夹创建一个模板插件，给你定制好了所有初始文件。

npx命令会远端下载并执行文件。npm 是执行命令

没有库的情况下纯js创建 代码

gutenberg-examples/block.js at trunk · WordPress/gutenberg-examples · GitHub

上面讲的都是第三方创建block插件

下面是验证

创建block的步骤，首先去创建block文件夹，创建index.js文件，文件里创建registerBlockType（）来创建block， block编辑页面输出的函数是edit() , 保存的函数是save() . 然后创建block.json文件，输入block的name和title等信息，便于调用，attributes等信息，便于传递block的样式属性。然后去functions.php里php注册block ，用register_block_type( UP_PLUGIN_DIR . ‘build/blocks/’ . $block[‘name’],isset($block[‘options’]) ? $block[‘options’] : [] ); 函数，直接引入的是文件夹里的Block.json文件。然后开始编辑index.js文件，各种引入库。

onchange是状态更改时候执行的动作，不是保存的动作。

&& 操作符允许我们检查两个条件，如果两个条件都符合，没有任何事发生，

标签：, , , , , ,
Top