学些wp全站编辑主题走过的坑

Published
September 15, 2022
浏览次数 :  60

  • 现在的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 里面添加 : 在style里面的block , 因为Border属于style 。都是根据css来的: 在里面设置border的每个属性就好: 

开启了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


Top