Skip to content

Instantly share code, notes, and snippets.

@getdave
getdave / imagesizes-wordpress-block-editor.js
Created October 20, 2022 12:19
Get registered image sizes in the WordPress block editor
import {store as blockEditorStore } from '@wordpress/block-editor';
import { useSelect } from "@wordpress/data";
// Inside component
const {sizes} = useSelect((select) => {
const { getSettings } = select(blockEditorStore);
const settings = getSettings();
const sizes = settings?.imageEditing?.imageSizes;
(function () {
// Augment each menu item control once it is added and embedded.
wp.customize.control.bind( 'add', ( control ) => {
if ( control.extended( wp.customize.Menus.MenuItemControl ) ) {
control.deferred.embedded.done( () => {
extendControl( control );
} );
}
} );
@lxbdr
lxbdr / wp-upload-existing-filename-filter.php
Created February 27, 2020 12:03
Prevent upload in WordPress media library if there is already a file with the same name.
add_filter( 'wp_handle_upload_prefilter', function ( $file ) {
$uploads = wp_upload_dir();
$use_yearmonth = get_option( 'uploads_use_yearmonth_folders' );
if ( boolval( $use_yearmonth ) ) {
// if upload to year month based folders is enabled check current target
$year = date( 'Y' );
$month = date( 'm' );
$target = $uploads['path'] . DIRECTORY_SEPARATOR . $year . DIRECTORY_SEPARATOR . $month . DIRECTORY_SEPARATOR . $file['name'];
} else {
// uploads dir
@helgatheviking
helgatheviking / wordpress-add-custom-menu-meta-fields.php
Created February 26, 2020 02:06
Add an example custom meta field to WordPress menu and display text on front-end (Requires WP5.4)
<?php
/**
* Add custom fields to menu item
*
* This will allow us to play nicely with any other plugin that is adding the same hook
*
* @param int $item_id
* @params obj $item - the menu item
* @params array $args
@florianbrinkmann
florianbrinkmann / index.js
Last active October 24, 2024 11:59
Gutenberg FormTokenField block with posts as source
/**
* External dependencies
*/
const { isUndefined, pickBy } = lodash;
/**
* WordPress dependencies
*/
const {
registerBlockType,
@skttl
skttl / slide.js
Last active February 24, 2023 07:47
Vanilla JS slideup slidedown slidetoggle
let fadeOut = (target, duration=500) => {
target.style.transitionProperty = 'opacity';
target.style.transitionDuration = duration + 'ms';
target.style.opacity = 0;
window.setTimeout( () => {
target.style.display = 'none';
target.style.removeProperty('opacity');
target.style.removeProperty('transition-duration');
target.style.removeProperty('transition-property');
@them-es
them-es / functions.php
Last active December 29, 2025 20:08
Make Polylang compatible with the WP-API. Query language specific WP-API posts via a parameter and add the post language as a new REST field.
<?php
/**
* https://developer.wordpress.org/reference/hooks/rest_this-post_type_query
*
* Query language specific posts via "lang" parameter: /wp-json/wp/v2/posts?lang=en
*/
function my_theme_filter_rest_post_query( $args, $request ) {
$lang_parameter = $request->get_param('lang');
@cyancey76
cyancey76 / full-width-calc.css
Created July 12, 2019 19:02
Full browser width element with CSS calc()
.container {
max-width: 1200px;
width: calc( 100vw - 4rem );
margin: 0 auto;
}
.container section {
display: block;
max-width: 100%;
}
@igorbenic
igorbenic / App.js
Last active February 16, 2022 09:58
Gutenberg Components: Form Token Field (Tags Field) | https://www.ibenic.com/gutenberg-components-form-token-field
import MyFormTokenField from './components/FormTokenField';
class App extends Component {
render() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
@eyecatchup
eyecatchup / smooth-scrolling-polyfill.md
Last active September 8, 2023 06:32
Smooth Scroll behavior polyfill

The Scroll Behavior specification has been introduced as an extension of the Window interface to allow for the developer to opt in to native smooth scrolling. To date this has only been implemented in Chrome, Firefox and Opera.

There's a complete polyfill here (3.3KB minified). But most of the times, the following is enough for me (641 bytes minified):

smooth-scrolling-poyfill.js

Use as: scrollToElem('#elem-selector');