How to use theme.json override feature in WordPress? - wordpress

Here in the WordPress documentation about new block theme They have said about overriding theme.json. I did something like that, but I don't know how o use it? Currently I have a theme.json file in the theme root (and it is working like a charm). I have this:
{
"version": 2,
"settings": {
"appearanceTools": true,
"color": {
"custom": false,
"defaultPalette": false,
"palette": [
...
]
}
}
}
Also, I have two separate files (dark.json and light.json inside styles directory). Both dark.json and light.json are something like this:
{
"version": 2,
"settings": {
"appearanceTools": true,
"color": {
"custom": false,
"defaultPalette": false,
"palette": [
...
]
}
}
}
But what I get is the original palette in theme.json when using the Gutenberg editor. How can I choose two customized palettes?

I've found it! You can go to Dashboard -> Appearance -> theme Customize.
Then in the top right corner of this page, You can see a black and white icon titled "styles". It does show the list of style variants.
BTW, when I was searching I found this article about new block theme style variations. Hope this helps someone else.

Related

Styling infiniteHits with Algolia search

I have an Algolia search widget set up in my site, however the results all have their list number next to them. How do I style this to remove the numbers?
The docs have this under cssClasses.
instantsearch.widgets.infiniteHits({
// ...
cssClasses: {
root: 'MyCustomInfiniteHits',
list: [
'MyCustomInfiniteHits',
'MyCustomInfiniteHits--subclass',
],
},
});
So I tried something like this.
instantsearch.widgets.infiniteHits({
// ...
cssClasses: {
list: [
'list-style: none',
],
},
});
but the numbers still appear.
My widget is inside of a Django template if that helps and I am using instantsearch.js.
Ok, I actually figured it out. The string that you include inside of
list: [
'customClass'
]
is the class that is applied to the element. So you can then just add styling to your stylesheet.

linking css file to chrome extension

I have found a few versions of my same question here , here, and here but when I try the suggested solutions I am still unsuccessful
I notice I am only able to apply inline css rules in my current extension. When I try bringing those rules into a separate css file I can't get the rules linked to the elements on the page.
I have played around mostly with the manifest.json file assuming my problem is somewhere there. I have tried including only css, matches, and js lines of the content_scripts. I have played around with different permissions. I didn't originally have the web accessible resources section.
Here is my manifest.json file as it currently looks:
"manifest_version": 2,
"name": "food project",
"version": "0.1",
"description": "My cool extension.",
"content_scripts": [
{
"css": ["./content.css"],
"matches": ["https://www.target.com/*", "file:///*/*"],
"js": ["./content.js"],
"all_frames": true
}
],
"permissions": ["tabs", "*://*/*"],
"browser_action": {
"default_popup": "popup.html",
"default_title": "Demo extension",
"default_icon": "/images/logo.png",
"default_badge": "Media Rep"
},
"web_accessible_resources": ["./content.css"]
and in my content.js file:
function addButtonElement() {
const newButton = document.createElement("button");
newButton.textContent = "Click me";
newButton.className = "buttonn";
newButton.style.background = "blue"
newButton.style.position = "relative";
newButton.style.top = "12.5em";
newButton.style.left = "50em";
newButton.style.zIndex = 8000;
newButton.style.color = "white";
newButton.style.width = "10%";
newButton.style.height = "30%";
newButton.style.borderRadius = "20px";
newButton.style.padding = "0.5em";
newButton.style.boxSizing = "border-box";
const currentButton = document.getElementById("headerMain");
document.body.insertAdjacentElement("afterbegin", newButton, currentButton);
}
document.body.onload = addButtonElement;
content.css file:
.buttonn {
border: solid 4px red !important;
}
I have other functionality in with the js file that is working, and like I said, inline css works. Not really sure why I can't seem to get rules from my CSS file to apply from that file.
one page I am trying this on is
https://www.target.com/p/general-mills-cheerios-honey-nut-breakfast-cereal-19-5oz/-/A-14765766#lnk=sametab
Solved! (kind of)
I think there was maybe a caching issue on my machine...? I had been working on this late into the night yesterday and added in the !important command as one of my last steps to be sure my inline rules weren't taking precedence over the CSS.
When I came back to this project in the evening today it all worked!
The power of walking away did it again.
I am new at posting here, so not sure if best practice is to delete the question entirely, but I am tempted to leave it to remind others in the future that taking a break is sometimes the answer :)
Some of the lines added into my manifest.json file above weren't necessary to use my .css file
This is the version I have now that it is working as hoped:
{
"manifest_version": 2,
"name": "food project",
"version": "0.1",
"description": "My cool extension.",
"content_scripts": [
{
"css": ["./content.css"],
"matches": ["https://www.target.com/*"],
"js": ["./content.js"]
}
],
"permissions": ["tabs"],
"browser_action": {
"default_popup": "popup.html",
"default_title": "Demo extention",
"default_icon": "/images/logo.png",
"default_badge": "Media Rep"
}
}

How to Purge CSS with Wordpress, Tailwind and Gutenberg

I'm using Laravel Mix with Tailwind CSS included into a theme for Wordpress.
A part of my tailwind config:
future: {
removeDeprecatedGapUtilities: true,
purgeLayersByDefault: true,
},
purge: {
content: [
'*.php',
'./*.php',
'./*/*.php',
'./purge-templates/*.html',
'./template-parts/*.php',
'./template-parts/**/*.php',
'./resources/*.css',
'./resources/**/*.css',
'./resources/*.js',
'./resources/**/*.js'
],
options: {
safelist: {
standard: [/^has-/, /^align/, /^wp-/]
}
}
},
PurgeCss works fine for all files in the theme folder and in the paths I added but how do I get the classes I used in the content aka gutenberg blocks?
I got between 5-10 pages with content and every single one uses tailwind classes inside.
Do I need to save the content from each one into purge-templates or is there a way to do it automatically?
Thank you

Using SASS partials in Brackets

So I have started using Brackets as my IDE, and have been trying to get SASS and everything else I need to work on it. So while I was playing around, I realized I was not able to share my partial files with other partial files. Am using the "brackets-sass" extension by jasonsanjose.
My folder structure for sass is as follows,
sass
|-> includes
_config.sass
_base.sass
_reset.sass
_utilities.sass
_helpers.sass
_main.sass
style.sass
I have a bunch of variables declared in my _config.sass file, but am not able to access them in any of the other partial files. I would like to know how this would be possible, or if this feature of the extension is yet to be implemented how would I do it.
My .brackets.json file looks something like this,
{
"sass.enabled": false,
"path": {
"sass/style.sass": {
"sass.enabled": true,
"sass.options": {
"includePaths": [
"../sass/includes"
],
"outputDir": "../css/",
"imagePath": null,
"sourceComments": "map",
"outputStyle": "nested"
}
},
"sass/includes/*.sass": {
"sass.enabled": false
}
}
}
If i try to import a partial file into another, it prompts the following error,
" file to import not found or unreadable: 'includes/config' #import 'includes/config' "
and if I try to use a variable in any other partial file from _config.sass i get the following error,
" unbound variable $var_name ".
Help would be much appreciated. Thank you.
Cheers
Paths and sass.options are in wrong place, I had similar issues.
I have it working with the following preferences in brackets.json
Works with multiple entry points and include path directories.
Rather than bourbon/neat add your includes.
{
"sass.enabled": false,
"sass.options": {
"includePaths": [
"../node_modules/node-bourbon/assets/stylesheets",
"../node_modules/node-neat/assets/stylesheets"
],
"outputDir": "../css/",
"imagePath": null,
"sourceComments": false,
"outputStyle": "nested"
},
"linting.collapsed": false,
"spaceUnits": 2,
"path": {
"scss/app.scss": {
"sass.enabled": true
},
"scss/teaser.scss": {
"sass.enabled": true
}
}
}
Hope that helps!

chrome extension content script can not access to iframes

i want to make a chrome extension on google reader and i found a problem. content script can not access to iframes. For all n, window.frames[n] = undefined. And i have this "all_frames": true in manifest.json. Or someone could tell me how to add a button under each article. Thank you!
From taking a quick look at Google Reader's rendered HTML, the only button that is in an IFRAME appears to be the Google Plus +1 button - all the other buttons are not in an IFRAME. So you don't need to worry about the IFRAME.
I'm assuming that the existing buttons are the buttons that appear underneath each article: +1, Share, Email, Keep Unread, Add Tags.
If you want to add a new button to the existing article buttons all you need to do is enumerate the DOM - specifically the "entry-actions" DIV classes and append say a new SPAN with your element/button to each article.
I suspect (but not sure) that Reader may dynamically update the DOM with new articles. If this is the case you may need to track new articles being added to the DOM so you can add your button again. To do this add an event listener for DOMNodeInserted - e.g.
document.addEventListener('DOMNodeInserted', onNodeInserted, false);
UPDATE:
The reason you can't see ".entry-actions" class is because it is added dynamically.
Here is a working very basic example. This will monitor the DOM and when it sees an entry-actions DIV that doesn't have our ".myclass" SPAN button, will add it.
You need to have jquery included in your extension for this to work. I've used jquery-1.7.1.min.js in this example. You will also need an icon file called foo.png too if you cut and paste the example.
manifest.json
{
// Required
"name": "Foo Extension",
"version": "0.0.1",
// Recommended
"description": "A plain text description",
"icons": { "48": "foo.png" },
//"default_locale": "en",
// Pick one (or none)
"browser_action": {
"default_icon": "Foo.png", // optional
"default_title": "Foo Extension" // optional; shown in tooltip
},
"permissions": [ "http://*/", "https://*/", "tabs" ],
"content_scripts": [
{
"matches": ["http://*/*", "https://*/*"],
"js": ["jquery-1.7.1.min.js", "content_script.js" ],
"run_at": "document_idle"
}
]
}
content_script.js
var timer;
document.addEventListener('DOMNodeInserted', onNodeInserted, false);
function onNodeInserted(e)
{
if(timer) clearTimeout(timer);
timer = setTimeout("addButtons()", 250);
}
function addButtons()
{
console.log('add buttons');
var $actions = $(".entry-actions").filter(function() {
return $(this).find('.myclass').length === 0;
});
$actions.append('<span class="myclass">My button</span>');
}

Resources