Skip to content

Commit

Permalink
adds the safe svg plugin
Browse files Browse the repository at this point in the history
  • Loading branch information
pbcpreview committed Aug 27, 2024
1 parent abd04da commit 5b98690
Show file tree
Hide file tree
Showing 428 changed files with 38,373 additions and 0 deletions.
6 changes: 6 additions & 0 deletions web/wp-content/plugins/safe-svg/assets/safe-svg.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
/**
* Fix SVGs not showing correctly as featured images.
*/
#postimagediv .inside .svg img {
width: 100%;
}
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
<?php return array('dependencies' => array('wp-data'), 'version' => '1b735708b42375c17f55');
1 change: 1 addition & 0 deletions web/wp-content/plugins/safe-svg/dist/safe-svg-admin.js

Large diffs are not rendered by default.

Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
<?php return array('dependencies' => array(), 'version' => 'b6e34e258024b576f98c');
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
.safe-svg-cover{text-align:center}.safe-svg-cover .safe-svg-inside{display:inline-block;max-width:100%}.safe-svg-cover svg{height:100%;max-height:100%;max-width:100%;width:100%}
Empty file.
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
<?php return array('dependencies' => array('react', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-i18n'), 'version' => '87c6788379633e7d322e');
1 change: 1 addition & 0 deletions web/wp-content/plugins/safe-svg/dist/safe-svg-block.css
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
.safe-svg-cover{text-align:center}.safe-svg-cover .safe-svg-inside{display:inline-block;max-width:100%}.safe-svg-cover svg{height:100%;max-height:100%;max-width:100%;width:100%}
1 change: 1 addition & 0 deletions web/wp-content/plugins/safe-svg/dist/safe-svg-block.js

Large diffs are not rendered by default.

59 changes: 59 additions & 0 deletions web/wp-content/plugins/safe-svg/includes/blocks.php
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
<?php
/**
* SafeSvg Blocks setup
*
* @package SafeSvg
*/

namespace SafeSvg\Blocks;

/**
* Set up blocks
*
* @return void
*/
function setup() {
$n = function ( $function ) {
return __NAMESPACE__ . "\\$function";
};

add_filter( 'block_categories_all', $n( 'blocks_categories' ), 10, 2 );

register_blocks();
}

/**
* Registers blocks that are located within the includes/blocks directory.
*
* @return void
*/
function register_blocks() {
// Require custom blocks.
require_once SAFE_SVG_PLUGIN_DIR . '/includes/blocks/safe-svg/register.php';

// Call register function for each block.
SafeSvgBlock\register();
}

/**
* Filters the registered block categories.
*
* @param array $categories Registered categories.
*
* @return array Filtered categories.
*/
function blocks_categories( $categories ) {
if ( ! is_array( $categories ) ) {
$categories = [];
}

return array_merge(
$categories,
array(
array(
'slug' => 'safe-svg-blocks',
'title' => __( 'SafeSvg', 'safe-svg' ),
),
)
);
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
{
"$schema": "https://schemas.wp.org/trunk/block.json",
"apiVersion": 3,
"title": "Safe SVG",
"description": "Display the SVG icon",
"textdomain": "safe-svg",
"name": "safe-svg/svg-icon",
"category": "safe-svg-blocks",
"attributes": {
"svgURL": {
"type": "string",
"default": ""
},
"type": {
"type": "string",
"default": "full"
},
"alignment": {
"type": "string"
},
"imageID": {
"type": "number",
"default": 0
},
"imageWidth": {
"type": "number"
},
"imageHeight": {
"type": "number"
},
"dimensionWidth": {
"type": "number"
},
"dimensionHeight": {
"type": "number"
},
"imageSizes": {
"type": "object"
}
},
"supports": {
"html": false,
"color": {
"text": true,
"background": true
},
"spacing": {
"margin": true,
"padding": true
}
},
"editorScript": "file:../../../dist/safe-svg-block.js",
"style": "file:../../../dist/safe-svg-block-frontend.css"
}
239 changes: 239 additions & 0 deletions web/wp-content/plugins/safe-svg/includes/blocks/safe-svg/edit.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,239 @@
/* eslint-disable no-unused-vars */
/**
* WordPress dependencies
*/
import { __ } from '@wordpress/i18n';
import {
Placeholder,
PanelBody,
} from '@wordpress/components';
import {
useBlockProps,
BlockControls,
AlignmentToolbar,
InspectorControls,
__experimentalImageSizeControl as ImageSizeControl,
MediaReplaceFlow,
MediaPlaceholder
} from '@wordpress/block-editor';
import PropTypes from 'prop-types';
import { ReactSVG } from 'react-svg'

/**
* Edit component.
* See https://wordpress.org/gutenberg/handbook/designers-developers/developers/block-api/block-edit-save/#edit
*
* @param {Object} props The block props.
* @param {Object} props.attributes Block attributes.
* @param {Object} props.attributes.svgURL SVG URL.
* @param {boolean} props.attributes.alignment Alignment of the SVG.
* @param {string} props.className Class name for the block.
* @param {Function} props.setAttributes Sets the value for block attributes.
* @return {Function} Render the edit screen
*/
const SafeSvgBlockEdit = ( props ) => {
const { attributes, setAttributes } = props;

const {
contentPostType,
svgURL,
type,
imageID,
imageSizes,
alignment,
imageWidth,
imageHeight,
dimensionWidth,
dimensionHeight
} = attributes;
const blockProps = useBlockProps(
{
className:` wp-block-safe-svg-svg-icon safe-svg-cover`,
style: {
textAlign: alignment,
}
}
);
const { className, style, ...containerBlockProps } = blockProps;

// Remove text alignment so we can apply to the parent container.
delete style.textAlign;
containerBlockProps.style = { textAlign: alignment };

// Remove core background & text color classes, so we can add our own.
const newClassName = className.replace(/has-[\w-]*-color|has-background/g, '').trim();
containerBlockProps.className = newClassName;

// Add the width and height to enforce dimensions and to keep parity with the frontend.
style.width = `${dimensionWidth}px`;
style.height = `${dimensionHeight}px`;

const ALLOWED_MEDIA_TYPES = [ 'image/svg+xml' ];

const onSelectImage = media => {
if ( !media.sizes && !media.media_details?.sizes ) {
return;
}

if( media.media_details ) {
media.sizes = media.media_details.sizes;
}

const newURL = media.sizes.full.url ?? media.sizes.full.source_url;

setAttributes( {
imageSizes: {
full: media.sizes.full,
medium: media.sizes.medium,
thumbnail: media.sizes.thumbnail,
},
imageWidth: media.sizes.full.width,
imageHeight: media.sizes.full.height,
dimensionWidth: media.sizes.full.width,
dimensionHeight: media.sizes.full.height,
imageID: media.id,
svgURL: newURL,
type: 'full',
} );
};

const onError = ( message ) => {
console.log( __(`Something went wrong, please try again. Message: ${message}`, 'safe-svg') );
}

const onChange = (dimensionSizes) => {
if( !dimensionSizes.width && !dimensionSizes.height ) {
dimensionSizes.width = parseInt( imageSizes[type].width );
dimensionSizes.height = parseInt( imageSizes[type].height );
}
setAttributes({
dimensionWidth: dimensionSizes.width ?? dimensionWidth,
dimensionHeight: dimensionSizes.height ?? dimensionHeight,
})
}

const onChangeImage = (newSizeSlug) => {
const newUrl = imageSizes[newSizeSlug].url ?? imageSizes[newSizeSlug].source_url;
if( ! newUrl ) {
return null;
}
let newWidth = parseInt( imageSizes[newSizeSlug].width );
let newHeight = parseInt( imageSizes[newSizeSlug].height );
if( 'full' !== newSizeSlug ) {
if(imageSizes[newSizeSlug].width >= imageSizes[newSizeSlug].height) {
newHeight = imageSizes[newSizeSlug].height * imageSizes['full'].height / imageSizes['full'].width;
} else {
newWidth = imageSizes[newSizeSlug].width * imageSizes['full'].width / imageSizes['full'].height;
}
}
setAttributes({
svgURL: newUrl,
imageWidth: newWidth,
imageHeight: newHeight,
dimensionWidth: newWidth,
dimensionHeight: newHeight,
type: newSizeSlug
})
}

const imageSizeOptions = [
{ value: 'full', label: 'Full Size' },
{ value: 'medium', label: 'Medium' },
{ value: 'thumbnail', label: 'Thumbnail' },
];

return (
<>
{svgURL &&
<><InspectorControls>
<PanelBody
title={__(
'Image settings',
'safe-svg'
)}
>
<ImageSizeControl
width={dimensionWidth}
height={dimensionHeight}
imageWidth={imageWidth}
imageHeight={imageHeight}
imageSizeOptions={imageSizeOptions}
slug={type}
onChange={onChange}
onChangeImage={onChangeImage} />
</PanelBody>
</InspectorControls><BlockControls>
<AlignmentToolbar
value={alignment}
onChange={(newVal) => setAttributes({ alignment: newVal })} />
</BlockControls><BlockControls>
<MediaReplaceFlow
mediaId={imageID}
mediaURL={svgURL}
allowedTypes={ALLOWED_MEDIA_TYPES}
accept={ALLOWED_MEDIA_TYPES}
onSelect={onSelectImage}
onError={onError} />
</BlockControls></>
}


{!svgURL &&
<MediaPlaceholder
onSelect={onSelectImage}
allowedTypes = {ALLOWED_MEDIA_TYPES}
accept={ALLOWED_MEDIA_TYPES}
value={imageID}
labels={{
title: __( 'Inline SVG', 'safe-svg' ),
instructions: __( 'Upload an SVG or pick one from your media library.', 'safe-svg' )
}}
/>
}

{svgURL &&
<div { ...containerBlockProps }>
<div
style={style}
className="safe-svg-inside"
>
<ReactSVG src={svgURL} beforeInjection={(svg) => {
svg.setAttribute( 'style', `width: ${dimensionWidth}px; height: ${dimensionHeight}px;` );
}} />
</div>
</div>
}

{ contentPostType && (
<Placeholder
label={ __( 'SafeSvg', 'safe-svg' ) }
>
<p>
{ __(
'Please select the SVG icon.',
'safe-svg'
) }
</p>
</Placeholder>
) }
</>
);
};
// Set the propTypes
SafeSvgBlockEdit.propTypes = {
attributes: PropTypes.shape({
svgURL: PropTypes.string,
alignment: PropTypes.string,
imageID: PropTypes.number,
imageWidth: PropTypes.number,
imageHeight: PropTypes.number,
dimensionWidth: PropTypes.number,
dimensionHeight: PropTypes.number,
imageSizes: PropTypes.object,
}).isRequired,
className: PropTypes.string,
clientId: PropTypes.string,
setAttributes: PropTypes.func.isRequired,
};

export default SafeSvgBlockEdit;
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
/* global safe-svg_personalizer_params */
/* eslint-disable camelcase */
import './frontend.scss';
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
.safe-svg-cover {
text-align: center;

.safe-svg-inside {
display: inline-block;
max-width: 100%;
}

svg {
height: 100%;
max-height: 100%;
max-width: 100%;
width: 100%;
}
}
Loading

0 comments on commit 5b98690

Please sign in to comment.