Melonpan Block – Container – WordPress plugin 外掛推薦下載

點擊下載

Melonpan Block–容器

插件描述

此塊是可以嵌套其他塊的容器。它具有以下設置:

背景圖像,固定,顏色和opacityContent align,max-width,text colorBorder width,color&不透明度陰影寬度,顏色和opacityPadding top,bottom,left,right,responsive paddings

開發人員:該插件附帶一個過濾器,用於根據此過程註冊您自己的塊。檢查如何使用過濾器創建自己的塊? 部分了解更多信息。

用法

可以在 Melonpan Blocks 類別下的塊插入器菜單中找到該塊。
在帖子中添加後,您可以編輯其設置並在其中添加塊(您甚至可以添加容器)。

Credits

屏幕截圖背景圖片屬於 Sander Wehkamp

其他插件

如果您發現此插件很有用,您可能也喜歡我為新Gutenberg編輯器創建的其他插件:

排版:添加排版使用Google字體訪問您的網站。選擇Blocks或輸入CSS選擇器。 發布元控件:使用控件在Gutenberg編輯器中註冊,保存,修改和獲取元數據。 塊的演示內容:一鍵添加包含演示/虛擬內容的塊到您的帖子。

謝謝!

屏幕截圖

塊編輯面板。

安裝

從WordPress管理員安裝。

登錄WordPress管理員並導航至插件>添加新 .Type Melonpan Block–搜索字段中的容器。在結果列表 Melonpan Block – 容器插件應該出現,單擊立即安裝按鈕。完成安裝後,單擊激活按鈕。就是這樣,現在你可以去了任何啟用Gutenberg的帖子並開始使用該塊。

FAQ

如何使用過濾器註冊我自己的塊類型?

該插件附帶一個過濾器,用於註冊擴展此塊的塊類型。這樣您的塊就可以使用插件設置。

註釋
您可以從下面列出的可用設置中進行選擇,並指定塊的InnerBlocks屬性以對其進行自定義。
您也可以在自定義屬性中傳遞自己的屬性。有關詳細信息,請查看如何添加自定義屬性?

步驟
首先,您需要在編輯器中將您的腳本排入隊列。
腳本需要‘wp-hooks’作為依賴項。

在腳本內部按以下方式調用過濾器(確保 Melonpan Block – Container 插件處於活動狀態):

  //使用自定義塊註冊示例filter.wp.hooks.addFilter(“melonpanBlockContainer.createBlock”,“my-plugin / my-block”,blocks => {return blocks.concat({//默認塊註冊屬性。有關更多可用屬性:// https://wordpress.org/gutenberg/handbook/designers-developers/developers/block-api/block-registration/ blocktype_props:{name:“my-plugin / my-block”,title:“My Block”,圖標: “carrot”,category:“common”},//這些屬性將傳遞給InnerBlocks組件。有關更多信息:// https://github.com/WordPress/gutenberg/blob/master/packages/editor/src /組件/inner-blocks / README.md innerblocks_props:{template:[[“core / quote”],[“core / image”]],templateLock:false,allowedBlocks:[“core / quote”,“core / image”]} ,//使用此屬性向容器,內容或背景div添加額外的道具。 extra_props:{container:{id:“my_id”,className:“my_container_class another_class”},content:{},background:{className:“my_bg_class”,style:{opacity:0.5}}},//這是清單所有可用屬性及其默認值。 //設置是選擇加入,因此只會使用傳遞的設置。 //如果傳遞了一個空對象(例如,background_color:{}),則將應用默認值。 //如果要使用默認值應用設置//但是從編輯器中隱藏控件,請將“show_control”屬性設置為false。設置:{//有關詳細信息,請查看“如何添加自定義屬性?”部分。 custom:{example_attribute_name:{default:“value_A”},another_example_attribute_name:{default:true}},align:{default:“”,options:[“left”,“center”,“right”,“wide”,“ full“]},content_align:{show_control:true,默認:”center“},content_maxwidth:{show_control:true,默認值:800,min:300,max:1300},content_color:{show_control:true,默認值:”“ ,顏色:[{name:“black”,color:“#000000”},{name:“white”,color:“#ffffff”}]},background_color:{show_control:true,默認:“”,顏色:[{name:“banana”,顏色:“#fce198”},{name:“sandia”,顏色:“#f68c78”},{name:“melocoton”,顏色:“#ffc5b4”},{name:“pistacho”,color:“#bdb76b”},{name:“ciruela”,color:“#bd8f8f”},{name:“naranja”,color:“#ff7f50” },{name:“endrina”,color:“#708090”},{name:“black”,color:“#000000”},{name:“white”,color:“#ffffff”}]},background_image :{},background_fixed:{show_control:true,默認值:false},background_color_opacity:{show_control:true,默認值:50,min:0,max:100},border_color:{show_control:true,默認值:“”,顏色:[{name:“black”,color:“#000000”},{name:“white”,color:“#ffffff”}]},border_color_opacity:{show_control:true,默認值:15 ,min:0,max:100},border_width:{show_control:true,默認值:0},shadow_color:{show_control:true,默認值:“”,顏色:[{name:“black”,顏色:“#000000” },{name:“white”,color:“#ffffff”}]},shadow_color_opacity:{show_control:true,默認值:15,min:0,max:100},shadow_width:{show_control:true,default:0},//可以組合多組填充設置。 //例如:padding_top,padding_bottom和padding_leftright。 padding:{show_control:true,默認值:20,min:0,max:100},padding_top:{show_control:true,默認值:20,min:0,max:200},padding_bottom:{show_control:true,默認值:20 ,min:0,max:200},padding_left:{show_control:true,默認值:20,min:0,max:100},padding_right:{show_control:true,默認值:20,min:0,max:100}, padding_topbottom:{show_control:true,默認值:20,min:0,max:200},padding_leftright:{show_control:true,默認值:20, min:0,max:100},//以下填充將應用於寬度小於600px的屏幕,覆蓋以前的填充。 padding_small_screen:{show_control:true,默認值:20,min:0,max:100},padding_top_small_screen:{show_control:true,默認值:20,min:0,max:200},padding_bottom_small_screen:{show_control:true,默認值:20 ,min:0,max:200},padding_left_small_screen:{show_control:true,默認值:20,min:0,max:100},padding_right_small_screen:{show_control:true,默認值:20,min:0,max:100},padding_topbottom_small_screen:{show_control:true,默認值:20,min:0,最大值:200},padding_leftright_small_screen:{show_control:true,默認值:20,min:0,max:100}},//實驗:如果需要將塊更新為新版本//因為“設置”或更改了“extra_props”對象,//在對象內部傳遞更改前的對象。 //然後將所有不同版本包裝在一個數組中。不推薦使用:[{//塊的舊版本。 extra_props:{// ...},settings:{// ...}},{//塊的另一個舊版本。 extra_props:{// ...},設置:{// ...}}]});});  

如何添加自定義屬性?

通過插件過濾器創建塊類型時,可以包含自定義屬性。
此設置旨在作為幫助程序,添加具有屬性名稱和值的類。
使用它而不是使用 blocks.registerBlockType 過濾器的一個優點是,如果您需要棄用該屬性,它應該可以工作。
請記住,它只會在 .mbc-container div中添加一個類,並且字符串,可以使用數字布爾值

字符串或數字
如果屬性是字符串數字,則該類將包含名稱和值(example_attribute_name = > .mbc-example_attribute_name-the_value )。

布爾值
如果屬性為布爾值,則類將包含名稱,啟用禁用 (example_attribute_name => .mbc-example_attribute_name-enabled )。

如何將控件添加到自定義屬性?

要為自定義屬性添加控件,請使用Gutenberg過濾器。如果您棄用該屬性,請記住刪除該控件。
以下是添加控件的示例:

  const {__} = wp.i18n; const {Fragment} = wp.element; const {InspectorControls} = wp.editor; const { PanelBody,RadioControl} = wp.components; const withMyAttributeControl = wp.compose.createHigherOrderComponent(BlockEdit => {return props => {if(props.name!==“my-plugin / my-block”){return&lt ; BlockEdit {... props} /&gt ;;} const {setAttributes,attributes} = props; return(< Fragment>< InspectorControls>< PanelBody title = {__(“我的面板”)}>< RadioControl label = {__(“我的屬性”)} selected = {attributes.custom.example_attribute_name} options = {[{value:“value_A”,label:“Value A” },{value:“value_B”,標籤:“Value B“}]} onChange = {value => setAttributes({custom:{//傳遞整個對像很重要。... attributes.custom,example_attribute_name:value}})} />< / PanelBody&gt ;< / InspectorControls>< BlockEdit {... props} />< / Fragment>);};},“withMyAttributeControl”); wp.hooks.addFilter(“editor.BlockEdit”,“my-plugin / my-filter“,withMyAttributeControl);  

評論

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

shares