I created custom Gutenberg block for social links but I would need to add input fields where user can paste the url to that social profile. Here is where I would like to put the field (same as paragraph block has alignment settings there for example):
This is my code for the block:
const { registerBlockType } = window.wp.blocks;
const { __ } = window.wp.i18n;
const { BlockControls, AlignmentToolbar} = window.wp.editor;
registerBlockType('social-block/social', {
title: __('Social'),
icon: 'smiley',
category: 'common',
attributes: {
content: {type: 'string'},
color: {type: 'string'}
},
edit: function (props) {
return React.createElement(
"div",
{style: {
display: 'flex',
justifyContent: 'center'
}},
// facebook
React.createElement(
'a',
{
'href': '',
'rel': 'noopener noreferrer',
'target': '_blank'
},
React.createElement(
'svg',
{
'xmlns': "http://www.w3.org/2000/svg",
'xmlns:xlink': "http://www.w3.org/1999/xlink",
'viewBox': "0 0 24 24",
'fill': "currentColor",
'width': "48px",
'height':"48px"
},
React.createElement(
'path',
{
'fill-rule': "evenodd",
'd': "M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm3-11.762h-1.703V9.2c0-.39.278-.48.474-.48h1.202V7.005L13.318 7c-1.838 0-2.255 1.278-2.255 2.096v1.142H10v1.765h1.063V17h2.234v-4.997h1.508L15 10.238z"
}
)
),
),
}
});
I tried implementing https://developer.wordpress.org/block-editor/tutorials/block-tutorial/block-controls-toolbars-and-inspector/ but its not the behavior that I need, anyone has a suggestion where to look or what to do?
First of all I will recommend you to use the ES6 syntax as it will make your code a lot easier. For ES6 whenever you see any code in WordPress docs then you can choose ESNEXT tab from top of snippet that will then shows you ES6 code.
Now your answer. Gutenberg provides us two kind of controls BlockControl and InspectorControl both of these provides you the way to manipulate your block but the difference is that BlockControl is a toolbar that appears on top of block (its the same link that you shared) while InspectorControls serves as a sidebar setting option the thing that you wanted to do. Here is the actual documentation of Inspector Controls and here is one working example from Image block of Gutenberg core.
Related
I want to add custom styling to the slides and gallery control buttons in react-image-gallery But I am confused how to do this. I have searched the assets on google and tried to do it on my own but I am unable to apply custom styling on it.
This is the code which I have applied till now:
import 'react-image-gallery/styles/css/image-gallery.css';
import ImageGallery from 'react-image-gallery';
const GalleryComponent = (props)=>{
const properties = {
thumbnailPosition: 'left',
showFullscreenButton: false,
useBrowserFullscreen: false,
showPlayButton: false,
items: [
{
original: "https://placeimg.com/640/480/any/1",
thumbnail: "https://placeimg.com/250/150/any/1"
},
{
original: "https://placeimg.com/640/480/any/2",
thumbnail: "https://placeimg.com/250/150/any/2"
},
{
original: "https://placeimg.com/640/480/any/3",
thumbnail: "https://placeimg.com/250/150/any/3"
}
]
};
return (
<ImageGallery {...properties} />
)
}
Currently achived this :
Slider i wanted in actual:
So kindly tell me a way to target the required components in react-image-gallery to add styling to them.
Thanks!
When working with Embedded Zoom Component, the Zoom SDK return an element which you need to place it inside an html element
the problem is how to resize and position the returned component inside my code after rendering
const client = ZoomMtgEmbedded.createClient();
function getSignature(e) {
e.preventDefault();
// ... some code to get the signature
startMeetingZoomMtgEmbedded(response.signature);
}
function startMeetingZoomMtgEmbedded(signature) {
let meetingSDKElement = document.getElementById('meetingSDKElement');
client.init({
debug: true,
zoomAppRoot: meetingSDKElement,
language: 'en-US',
customize: {
meetingInfo: ['topic', 'host', 'mn', 'pwd', 'telPwd', 'invite', 'participant', 'dc', 'enctype'],
toolbar: {
buttons: [
{
text: 'Custom Button',
className: 'CustomButton',
onClick: () => {
console.log('custom button');
}
}
]
}
}
});
client.join({
apiKey: apiKey,
signature: signature,
meetingNumber: meetingNumber,
password: passWord,
userName: userName,
userEmail: userEmail,
tk: registrantToken,
success: (success) => {
console.log('success');
},
error: (error) => {
console.log(error);
}
});
}
return (
<div className="App">
<main>
<h1>Zoom Meeting SDK Sample React</h1>
{/* For Component View */}
<div id="meetingSDKElement"></div>
<button onClick={getSignature}>Join Meeting</button>
</main>
</div>
);
So my question is how to modify the style and the position of the component before or after the rendering of the code by the Zoom SDK.
For Resizing , You will find details in the following documentation link :
Zoom Documentation for resizing component view
For Positioning, You will find details in the following documentation link :
Zoom Documentation for positioning component view
The only way to resize camera view is editing #ZOOM_WEB_SDK_SELF_VIDEO id. So, you have to edit other classes also to make buttons, containers and etc resize like camera view does, but it is totally buggy and i don't think it is a good idea pay all this effort to a workaround, besides that, in next versions maybe they bring built in properties to do this job.
Just for example, this is the result when you change #ZOOM_WEB_SDK_SELF_VIDEO:
#ZOOM_WEB_SDK_SELF_VIDEO {
width: 720%;
height: 480%;
}
In general way, you can modify the style and position of your component by using reactive CSS styling.
In zoom way you can use (zoom web meeting SDK)
(a) "popper: {}" properties for positioning elements
(b) "viewSizes: {}" properties for default meeting canvas size
(c) for styling use "id" and "class" for reactive CSS styling
popper use:
client.init({
...
customize: {
video: {
popper: {
anchorElement: meetingSDKElement,
placement: 'top'
}
},
}
...
})
viewSizes use:
client.init({
...
customize: {
video: {
viewSizes: {
default: {
width: 1000,
height: 600,
}
}
},
}
...
})
I am using react native navigation version 1.1.486 by wix. I am using
topTabs and want different colors for navbar and tapbar, but the
properties I a passing is not working.
I am sharing my code here:-
import { Navigation } from 'react-native-navigation';
import Icon from 'react-native-vector-icons/Ionicons';
import SimpleIcon from 'react-native-vector-icons/SimpleLineIcons';
const startTabs = ()=>{
Promise.all([
Icon.getImageSource("md-map",30),
Icon.getImageSource("ios-share-alt",30),
SimpleIcon.getImageSource("menu",30,'red'),
SimpleIcon.getImageSource("question",30,'black')
]).then(sources =>{
Navigation.startSingleScreenApp({
screen: {
screen: 'prabhuji.CustomPack',
topTabs: [
{
screenId: 'prabhuji.FlowerTabOne',
title:'Tab 1',
icon: sources[1],
},
{
screenId: 'prabhuji.FlowerTabTwo',
icon: sources[0],
title:'Tab 2'
}
],
navigatorButtons: {
leftButtons:[
{
icon:sources[2],
title:"Menu",
id:"SideDrawerToggle"
}
],
rightButtons:[
{
icon:sources[3],
title:"Help",
id:"Help"
}
]
},
},
appStyle: {
tabBarBackgroundColor: '#0f2362',
selectedTabFontSize: 12,
}
});
});
}
export default startTabs;
The effect for this code is:-
Is there any way to use different colors for toptabs and navbar? May
be I am asking a silly question. Apology for that, I am new to react native.
Don't put the styles in navigatorStyle, just add all tab properties to appStyle , you should add BottomTabs styles to AppStyle.
Here's an example :
appStyle: {
tabBarBackgroundColor: '#0f2362',
tabBarButtonColor: '#ffffff',
tabBarHideShadow: true,
tabBarSelectedButtonColor: '#63d7cc',
tabBarTranslucent: false,
tabFontFamily: 'Avenir-Medium', // existing font family name or asset file without extension which can be '.ttf' or '.otf' (searched only if '.ttf' asset not found)
tabFontSize: 10,
selectedTabFontSize: 12,
},
Another way
1. Disabling persistent styling properties :
appStyle: {
keepStyleAcrossPush: false
}
2. Setting styles dynamically:
this.props.navigator.setStyle({
navBarBackgroundColor: 'blue'
});
I have the following fieldset in a form Panel in the Admin Dashboard template using ExtJS 6.2:
{
xtype: 'fieldset',
layout: 'anchor',
items: [{
xtype: 'combobox',
listeners : {
select : function() {
console.log(arguments)
console.log(arguments[1].data.birth_date)
console.log(arguments[1].data.first_name)
console.log(arguments[1].data.last_name)
console.log(arguments[1].data.sex)
}
},
bind: {
store: '{patients}'
},
reference: 'patientCombo',
publishes: 'id',
fieldLabel: 'Patient Search',
displayField: 'mrn',
//anchor: '-',
// We're forcing the query to run every time by setting minChars to 0
// (default is 4)
minChars: 2,
queryParam: '0',
queryMode: 'local',
typeAhead: true,
// https://www.sencha.com/forum/showthread.php?156505-Local-combobox-with-any-match-filter
doQuery: function(queryString, forceAll) {
this.expand();
this.store.clearFilter(!forceAll);
if (!forceAll) {
this.store.filter(this.displayField, new RegExp(Ext.String.escapeRegex(queryString), 'i'));
}
}
}, {
// https://www.sencha.com/forum/showthread.php?299301-Bind-combobox-displayField-value-to-displayfield
xtype: 'displayfield',
fieldLabel: 'Selected Patient',
bind: {
html: '<p>Name: <b>{patientCombo.selection.first_name}, ' +
'{patientCombo.selection.last_name} </b></p>' +
'<p>Sex: {patientCombo.selection.sex}</p>' +
'<p>Birthdate: {patientCombo.selection.birth_date}</p>'
}
}]
},
It is working fine, but it is rendering rather strangely, as seen in the following image (I had to mask the data being presented, but the numbers are what to be selected from the combobox):
I am assuming this is a CSS issue, but have not been able to figure out what. NB: I had to copy Admin-all.css Admin-all_1.css Admin-all_2.css and Admin-all_3.css from the build/examples/admin-dashboard/classic/resources folder to the app after I created the template in order to fix a major layout issue.
Yes, this is a CSS issue. The Admin Dashboard example and its CSS have been compiled using Sencha Cmd, so the CSS file contains only the styles required by the example. Since there is no combobox in the example, the combobox styles have not been added and the combobox you inserted does not render correctly.
The only solution would be to use Sencha Cmd to recompile from source and fix the layout issue along the way, which I guess is caused by a missing requires directive.
I'm using pdfmake. I want to format a document and they have good examples on github and in their playground but I was wondering if they featured all capabilities therein. I get the feeling that their may be additional properties like switching fonts, adding different style elements or underlining - things not expressly shared in the examples. Maybe what you see is what you get and that is all but I went over the github page pretty throughly and did not find a more detailed list of capabilities. It seems hella similar to html but it doesn't seem to have the same styling capabilities of html/css, if there is something more could someone please point it out.
Here you go.. At least, uncommented below styles are supported. I tried it myself.
['font',
'fontSize',
'bold',
'italics',
'alignment',
'color',
'columnGap',
'fillColor',
'decoration',
'decorationStyle',
'decorationColor',
'background',
'lineHeight'
//'tableCellPadding'
// 'cellBorder',
// 'headerCellBorder',
// 'oddRowCellBorder',
// 'evenRowCellBorder',
// 'tableBorder'
]
You could use the above styles, as below.
var dd = {
content: [
{
text: 'This is a header, using header style',
style: 'header'
}
],
styles: {
header: {
fontSize: 18,
bold: true,
background: '#ff1'
}
}
}
You can use margin also as shown below.
// margin: [left, top, right, bottom]
{ text: 'sample', margin: [ 5, 2, 10, 20 ] },
// margin: [horizontal, vertical]
{ text: 'another text', margin: [5, 2] },
// margin: equalLeftTopRightBottom
{ text: 'last one', margin: 5 }
It is from the docs Here.
Update: 27/5/2020 from Github's anwer
Extending #Romo 's answer:
[
'font',
'fontSize',
'bold',
'italics',
'alignment',
'color',
'columnGap',
'fillColor',
'decoration',
'decorationStyle',
'decorationColor',
'background',
'lineHeight'
'listType' // <=== Added
]
It accepts several options:
'none', 'upper-roman', 'circle', 'square'