Develop Reference

Register same custom styles to multiple block types in gutenberg

I want to add some styles to more than one block type.
At the moment I'm doing this for every block type like this and change only the part 'core/paragraph' to 'core/heading' for example.
Is there any way to do this for more than one block at the same time?
wp.blocks.registerBlockStyle(
'core/paragraph',
[
{
name: 'default',
label: 'Default',
isDefault: true,
},
{
name: 'lead',
label: 'Lead',
},
{
name: 'subline',
label: 'Subline',
},
]
);

If you know names of the blocks you want to add your styles to, you can use registerBlockStyle() in a forEach() loop to mass register multiple styles to multiple blocks, eg:
const blocks = ["core/quote", "core/heading", "core/paragraph"]; //etc..
const styles = [
{
name: 'default',
label: 'Default',
isDefault: true,
},
{
name: 'lead',
label: 'Lead',
},
{
name: 'subline',
label: 'Subline',
}
];
// Loop through each block and register all custom styles in one go..
blocks.forEach(function(blocks) {
wp.blocks.registerBlockStyle(blocks, [...styles]);
});
To find the names of all currently registered blocks, use:
wp.blocks.getBlockTypes().map(block => block.name);
Even though you could apply your styles to every block, please use it sparingly only on required blocks - not every block all at once..

Where to save single time use data for vuejs in webpack setup

This is the current setup that I have with my vuejs & webpack.
I have a Vue file: gallery.vue
<template>
<div id="gallery">
<figure style="background-color:#1a1c23;">
<img
src="./assets/img/someimage1.png"
alt="Alt text for image 1"
title="title text for image 1"
data-src="./assets/link-additional-image1.png"
data-color="#1a1c23">
</figure>
<figure style......
</figure>
// A large number of these figure elements
</div>
</template>
<script>
import GalleryItem from './component/galleryItem.vue'
export default {
name: 'Gallery',
components: {
GalleryItem
}
}
</script>
And this is the component file galleryItem.vue
<template>
<figure v-bind:style="{backgroundColor:backgroundColor}">
<img
v-bind:src="src"
v-bind:alt="alt"
v-bind:title="title"
v-bind:data-src="dataSrc"
v-bind:data-color="dataColor">
</figure>
</template>
<script>
export default {
name: 'GalleryItem',
props: {
backgroundColor: String,
src: String,
alt: String,
title: String,
dataSrc: String,
dataColor: String
}
}
</script>
What I want to do instead is have an array of object, something like below, and recursively create galleryItem components in gallery component using that array.
How can I achieve this? I don't know where to save the array and how to pass it to the vue components, I was thinking to have the array in a seprate javascript file.
Or if this is a wrong approach ?
var a = [
{
backgroundColor: "#480572",
src: "./assets/img/someimage1.png",
alt: "Alt text for image 1",
title: "title text for image 1",
dataSrc: "./assets/link-additional-image1.png",
dataColor: "#ebebf7"
},
{
backgroundColor: "#2A3132",
src: "./assets/img/someimage2.png",
alt: "Alt text for image 2",
title: "title text for image 1",
dataSrc: "./assets/link-additional-image2.png",
dataColor: "#FFFFFF"
},
....
// A large number of these items
]

Yes, you can save it to a separate js file and import from there.
//../assets/gallery.js or where ever you want to save the file
export const gallery = [
{
backgroundColor: "#480572",
src: "./assets/img/someimage1.png",
alt: "Alt text for image 1",
title: "title text for image 1",
dataSrc: "./assets/link-additional-image1.png",
dataColor: "#ebebf7"
},
{
backgroundColor: "#2A3132",
src: "./assets/img/someimage2.png",
alt: "Alt text for image 2",
title: "title text for image 1",
dataSrc: "./assets/link-additional-image2.png",
dataColor: "#FFFFFF"
},
....
// A large number of these items
]
In gallery component
<script>
import GalleryItem from './component/galleryItem.vue'
import { gallery } from '../assets/gallery.js'
export default {
name: 'Gallery',
data() {
return {
gallery
}
},
components: {
GalleryItem
}
}
</script>

Customizing the webix header

Is it possible to customize the webix UI header like the one in the image 1. I want to give an image, a title, a welcome user line with a logout button, and a menu bar to navigate to other pages? Please click on 1 you will get the image.

Yes, you can achieve that with a toolbar widget :
{
view:'toolbar',
css:'header',
elements: [
{ view: "label", label: "", width: 100, height: 38, css:'app-logo' },
{ view: "label", label: "My app" },
{},
{
view: "button",
type: "icon",
id: 'app:toolbar:current_user_menu',
icon: 'user',
borderless: true,
autowidth: true,
label: 'Jean bombeur'
}
]
}
Then customize app-logo css class to have a background image of your logo.
See demo snippet : http://webix.com/snippet/4f6131d3

You can format the header by providing your own html like below eg:
{id:"col1", header:"<input type='button' value='Do something' class='dummy_button'>"}
By adding styles (css), you can design it as per your requirement.

How to change background color select 2 using javascript?

Demo and my code is like this : http://jsfiddle.net/fc1qevem/10/
My javascript code is like this :
var select02 = $('#select02');
$(select02).select2({
data: [{
id: 0,
text: "test01"
}, {
id: 1,
text: "test02"
}, {
id: 2,
text: "test03"
}, {
id: 3,
text: "test04"
}, {
id: 4,
text: "test05"
}],
placeholder: "Branch name",
});
I want change the background color of select2 to blue color
I want change the background color using javascript
Whether it can be done?
Thank you

add this in your css
.select2-selection{
background-color:blue !important;
}
js solution
$(select02).select2({
data: [{
id: 0,
text: "test01"
}, {
id: 1,
text: "test02"
}, {
id: 2,
text: "test03"
}, {
id: 3,
text: "test04"
}, {
id: 4,
text: "test05"
}],
placeholder: "Branch name",
}).data("select2").$container.find(".select2-selection").css('background-color', 'blue');

When you will change the background-color using JavaScript try this:
$('.select2-selection').css('background-color', 'blue');

// Css code
.bg_color {
background-color: blue !important;
}
// Javascript code
// just put this code under the load function
$(select02).select2({ containerCssClass: "bg_color " });
This is how select2 adding class to the container or default css ".select2-container--default .select2-selection--single" of select2 where you can edit the background color of the container. Hope it helps you.

Try the code below:-
document.getElementById("select02").style.backgroundColor="blue";

Setting the icons of a node in TreePanel

ExtJS 4:
I've created a treepanel.
I wanted to set my own icons for its node so I used iconCls property for every node. Its working. But when I expand a node, it returns back to its normal 'Open Folder' icon.
var treeObject = {
text: "BANK OF AMERICA 1",
cls: "enterprise",
children: [
{
text: "core outputs",
cls: "businessUnit",
iconCls: 'abc'
}
],
iconCls: 'abc',
leaf: "false",
expanded: true,
type: "enterprise"
}
treePanel.setRootNode(treeObject);
Please suggest something to avoid this problem.

try to specify your css class like this to prevent override with the default classes of extjs
.x-grid-tree-node-expanded .x-tree-icon-parent.abc{
background: url(abc) x y no-repat !important;
}

Starting from Ext Js 4.0.6, you can use icon config on Ext.data.NodeInterface to set your node icons - just define a field named 'icon' on your model, use it for your treestore...
Ext.define('ModelForTreeNodes', {
extend: 'Ext.data.Model',
fields: [
{ name: 'icon', type: 'string', defaultValue: "Images/nodeicon.png" },
// other fields
],
// other config options
});
Then you can change the icon by simply setting the icon field on the node...and that's it.
var node = myTree.getStore().getNodeById(nodeId);
node.set('icon', 'Images/newIcon.png');