Tag: backgroundSize: ‘cover’

React error #231with Custom Blocks after upgrade to WP 5.5

Post author By Marcia D.
Post date August 24, 2020
No Comments on React error #231with Custom Blocks after upgrade to WP 5.5

So I wrote a plugin for a custom block using create-guten-block by ahmadawais. Everything was working fine until the WP update to 5.5. Now I when I try to edit a page that has one of my custom blocks I get just a blank white screen and some console errors. (Screen shot of errors included) […]

Tags `has-${attributes.backgroundClass}-background-color`, __("container"), __("wrap"), __("wrapper")], " " // Block content ); } }; const classes = classnames( attributes.className, " " // Block content ); } }; const classes = classnames( className, "default": {}, "default": 50, "myblock-wrapper", []) return () }, { [`align${attributes.align}`]: attributes.align && attributes.fullWidthBackground, { icon: 'welcome-widgets-menus', { title: __("Page Section"), }, } ); createElement; return ( <div cl, }; const backgrounRepeat = () => { if ( attributes.backgroundImage !== undefined && attr, }; registerBlockType("myblock/block-wrap", });, // Tag type. { className: "Wrapper-BG-img", attributes: blockAttributes, attributes.paddingBottom, attributes.paddingTop, backgroundClass: { type: "string", backgroundColor: { type: "string", backgroundImage: { type: "string", backgroundImage: attributes.backgroundImage && "url(" + attributes.backgroundImage + ")", backgroundImageSize: { type: "string", backgroundImageX: { type: "number", backgroundImageY: { type: "number", backgroundOpacity: { type: "number", backgroundSize: 'cover', category: 'common', className } = props; const wrapperStyle = { backgroundImage: attributes.backgroundImage && "url(" + attri, className: { type: 'string', contentWidth: { type: "string", createElement } = wp.element; const { registerBlockType } = wp.blocks; const { InnerBlocks } = wp.blockEditor; const blockAttributes = {, default: 'full' }, default: "#ffffff", default: "cover", default: "Inner-width--default", default: "white", default: "Wrapper-padding-bottom--default", default: "Wrapper-padding-top--default", default: 100, default: true }, edit: (props) => { const { attributes, fullWidthBackground: { type: "bool", getEditWrapperProps() { return { "data-align": "full" }; }, keywords: [__("page section"), only Wordpress itself. I'll be happy provide more info as needed. I just don't want to overload the post with what could be un-needed info., paddingBottom: { type: "string", paddingTop: { type: "string", save: (props) => { const { attributes } = props; const wrapperStyle = { backgroundColor: attributes.backgroundCol, So I wrote a plugin for a custom block using create-guten-block by ahmadawais. Everything was working fine until the WP update to 5.5. Now I, style: wrapperStyle

Mastering Development

Bootstrap style disappearing on refresh only on one page in React app

Post author By Full Stack
Post date August 2, 2020
No Comments on Bootstrap style disappearing on refresh only on one page in React app

I am working on a react app with a bootstrap template. So far all my pages work well except for one page. When I click on a link to this page the template loads fine, when I refresh on this page I loose my bootstrap styling. The only thing different about this page from the […]

Tags :employee, { Component } from 'react' export default class EmpoyeeShow extends Component { constructor() { super(); this.state = { empl, }; } componentDidMount() { const id = this.props.match.params.userId; console.log("this.props.match.params.userI, backgroundPosition: 'center'} const breadcrumb = { background: 'transparent' } return ( <div class=", backgroundSize: 'cover', I am working on a react app with a bootstrap template. So far all my pages work well except for one page. When I click on a link to this page, id) const response = await fetch(`/employees/`+ id) const initialUser = await response.json() const employees = initialUser, id) this.fetchEmployee(id) } fetchEmployee = async (id) => { console.log("id", this.props.match.params.userId) console.log("params", this.state.employees[0]) const employee = this.state.employees[0] this.setState({employee: employee}) } render() { const, when I refresh on this page I loose my bootstrap styling. The only thing different about this page from the others is its a show page that u

Development

How to adjust background color for ‘paper’ on material-ui?

Post author By Full Stack
Post date March 5, 2020
No Comments on How to adjust background color for ‘paper’ on material-ui?

I am studying material-ui styling and using one of the free templates that is given. const useStyles = makeStyles(theme => ({ root: { height: “100vh” }, image: { backgroundImage: “url(https://source.unsplash.com/random)”, backgroundRepeat: “no-repeat”, backgroundColor: theme.palette.type === “dark” ? theme.palette.grey[900] : theme.palette.grey[50], backgroundSize: “cover”, backgroundPosition: “center” }, paper: { margin: theme.spacing(8, 4), display: “flex”, flexDirection: “column”, alignItems: […]

Tags // Fix IE 11 issue. marginTop: theme.spacing(1), 0, 2) } })); I have tried touching each aspect and have tried to change the background of the right side of the template. But it just looks l, 4, alignItems: 'center', avatar: { margin: theme.spacing(1), backgroundColor: theme.palette.secondary.main, backgroundColor: theme.palette.type === "dark" ? theme.palette.grey[900] : theme.palette.grey[50], backgroundPosition: 'center', backgroundRepeat: 'no-repeat', backgroundSize: 'cover', display: 'flex', flexDirection: 'column', form: { width: '100%', I am studying material-ui styling and using one of the free templates that is given. const useStyles = makeStyles(theme => ({ root: {, image: { backgroundImage: "url(https://source.unsplash.com/random)", paper: { margin: theme.spacing(8, submit: { margin: theme.spacing(3

Development

Nivo Pie Chart Not Rendering

Post author By Full Stack
Post date January 19, 2020
No Comments on Nivo Pie Chart Not Rendering

I’m using the nivo charting library and am struggling to get my pie charts to render. I really don’t understand why the pie chart isn’t showing up. Here is my core component code for the dashboard: import React, { useState, useEffect } from “react”; import Amplify, { Storage } from “aws-amplify”; import Paper from “@material-ui/core/Paper”; […]

Tags "")} /> )} </B, "")} /> <Paper c, "& > * + *": { marginLeft: theme.spacing(2) } }, "contains_hows")} /> <Grid co, "contains_whats")} />, "contains_whos")} />{" "}, "control_relevance_to_risk" )} />, "multiple_hows")} /> <Grid co, "multiple_whats")} />{" "}, "multiple_whos")} />, []); const classes = useStyles(); const [dashboard, { expires: 60 }); console.log(url); return url; }; const countColumnValues = (file, { level: "private" }, { Storage } from "aws-amplify"; import Paper from "@material-ui/core/Paper"; import Box from "@material-ui/core/Box"; import Grid from "@mate, {key: "False", {useState, // Fix IE 11 issue. marginTop: theme.spacing(1), 0, 2, 3, alignContent: "center" }, alignItems: 'center', backgroundColor: theme.palette.type === "dark" ? theme.palette.grey[900] : theme.palette.grey[50], backgroundPosition: 'center', backgroundRepeat: 'no-repeat', backgroundSize: 'cover', card: { maxWidth: 600 }, circle: { display: "flex", column) => { var data = countColumnValues(file, column) => { var data_count = d3 .nest() .key(function(d) { return d[column]; }) .rollup(function(leaves), column); return data; }; return ( <I, direction: "row", display: 'flex', effects: [ { on: "hover", error: { backgroundColor: theme.palette.error.dark }, flexDirection: 'column', form: { width: '100%', I'm using the nivo charting library and am struggling to get my pie charts to render. I really don't understand why the pie chart isn't showi, icon: { fontSize: 20 }, iconVariant: { opacity: 0.9, image: { backgroundImage: "url(https://source.unsplash.com/8WFnEehJWso)", itemHeight: 18, itemTextColor: "#999", itemWidth: 100, marginRight: theme.spacing(1) }, media: { height: 500 }, menuButton: { marginRight: theme.spacing(2) }, message: { display: "flex", paper: { margin: theme.spacing(1.5, pie: { height: 250 } })); export default useStyles; Lastly an example of my data that is coming back from the generate pie function i, setFile] = useState(); const getFile = async () => { const url = await get_url().catch(err => getFile()); const file = await d3.cs, showDashboard] = useState(false); const [dashboardfile, style: { itemTextColor: "#000" } } ] } ]} /> ); export default MyResponsivePie; and, submit: { margin: theme.spacing(3, success: { backgroundColor: green[600] }, symbolShape: "circle", symbolSize: 18, title: { flexGrow: 1, translateY: 56, useEffect } from "react"; import Amplify, value: 7981}, value: 950} ]

Development

How can I have a function accept multiple file types?

Post author By Full Stack
Post date December 27, 2019
No Comments on How can I have a function accept multiple file types?

How can I have a function accept multiple file types such as .jpg, .png, and .gif? Example of the intended file structure: img/slides/ profilePic-0.jpg profilePic-1.png profilePic-2.gif var imageType = “.jpg”; $.each($(“#modal .slide”), function(index, value) { $(this).css({ background: “url(‘img/slides/” + id + “-” + index + imageType + “‘) center center/cover”, backgroundSize: “cover” }); });

Tags "png", and .gif? Example of the intended file structure: img/slides/ profilePic-0.jpg profilePic-1.png profilePic-2.gif var imageType = ".j, backgroundSize: 'cover', function(index, How can I have a function accept multiple file types such as .jpg, value) { $(this).css({ background: "url('img/slides/" + id + "-" + index + im

Development

Testing Material-UI with Jest outputs ShallowWrapper {} in my snapshot

Post author By Full Stack
Post date October 19, 2019
1 Comment on Testing Material-UI with Jest outputs ShallowWrapper {} in my snapshot

Here’s my component: import React, { useState } from ‘react’; import history from ‘redux/history’; import parse from ‘html-react-parser’; import { Avatar, makeStyles, Typography, TextField, Button, Grid, Chip, Paper } from ‘@material-ui/core’; import LockOutlinedIcon from ‘@material-ui/icons/LockOutlined’; import CONFIG from ‘config’; import { loginUser as loginUserUtil } from ‘utils/accountUtil/accountUtil’; const useStyles = makeStyles((theme) => ({ root: { […]

Tags ....5Z" size={1} className="makeStyles-icons-3" color= horizontal={false} vertical={false} rotate={0} spin={false} /> <span classNa, () => ({ loginUser: jest.fn() })); afterEach(() => { jest.resetAllMocks(); }); let component; beforeAll(() => { component = shallow(<, () => { expect(component).toMatchSnapshot(); }); }); any my snapshot looks like: // Jest Snapshot v1... exports[`Login renders and m, () => { it('renders and matches snapshot', { useState } from 'react'; import history from 'redux/history'; import parse from 'html-react-parser'; import { Avatar, }, })); const Login = () => { const classes = useStyles(); const [loginEmail, // Fix IE 11 issue. marginTop: theme.spacing(1), 0, 2, 4, alignItems: 'center', avatar: { margin: theme.spacing(1), backgroundColor: theme.palette.secondary.main, backgroundPosition: 'center', backgroundRepeat: 'no-repeat', backgroundSize: 'cover', Button, Chip, display: 'flex', flexDirection: 'column', form: { width: '100%', got the same result: import React from 'react'; import { shallow } from 'enzyme'; import { createShallow } from '@material-ui/core/test-util, GRID, Here's my component: import React, image: { backgroundImage: 'url(https://source.unsplash.com/featured/?food)', loginPassword); if (resp) { setLoginEmail(''); setLoginPassword(''); history.push(CONFIG.UI_URL.LANDING); } else {, makeStyles, Paper } from '@material-ui/core'; import LockOutlinedIcon from '@material-ui/icons/LockOutlined'; import CONFIG from 'config'; import { logi, paper: { margin: theme.spacing(8, setLoginEmail] = useState(''); const [loginPassword, setLoginPassword] = useState(''); const [notAllowed, setNotAllowed] = useState(''); const loginUser = async () => { const resp = await loginUserUtil(loginEmail, submit: { margin: theme.spacing(3, textfield, Typography, which looks like what I'd want <WithStyles(ForwardRef(Ca