Compare commits
7 Commits
master
...
feature/gu
| Author | SHA1 | Date | |
|---|---|---|---|
|
e435da4297 | ||
|
cff279fe2f | ||
|
|
6c1ed9ea0e | ||
|
|
277b3c8693 | ||
|
|
1ff9960226 | ||
|
|
7cbae071e8 | ||
|
|
958cd58f52 |
1
.gitignore
vendored
1
.gitignore
vendored
@ -1 +1,2 @@
|
||||
node_modules
|
||||
/config.php
|
||||
|
||||
15
gutenberg/build/block.json
Normal file
15
gutenberg/build/block.json
Normal file
@ -0,0 +1,15 @@
|
||||
{
|
||||
"apiVersion": 3,
|
||||
"title": "Mastodon Feed",
|
||||
"description": "Embed the latest public posts of a Mastodon user",
|
||||
"name": "include-mastodon-feed/gutenberg-block",
|
||||
"category": "embed",
|
||||
"icon": "embed-generic",
|
||||
"supports": {
|
||||
"html": false
|
||||
},
|
||||
"textdomain": "include-mastodon-feed",
|
||||
"editorScript": "file:./index.js",
|
||||
"editorStyle": "file:./index.css",
|
||||
"style": "file:./style.css"
|
||||
}
|
||||
1
gutenberg/build/index.asset.php
Normal file
1
gutenberg/build/index.asset.php
Normal file
@ -0,0 +1 @@
|
||||
<?php return array('dependencies' => array('wp-block-editor', 'wp-blocks', 'wp-components', 'wp-element', 'wp-i18n', 'wp-primitives'), 'version' => 'bdc230821f5beabe23a2');
|
||||
1
gutenberg/build/index.css
Normal file
1
gutenberg/build/index.css
Normal file
@ -0,0 +1 @@
|
||||
.editor-block{background:repeating-linear-gradient(45deg,transparent,transparent 10px,hsla(0,0%,100%,.1) 0,hsla(0,0%,100%,.1) 20px),linear-gradient(180deg,rgba(0,0,0,.1),rgba(0,0,0,.3));cursor:pointer;padding:3rem 1rem}.editor-block .text-center{text-align:center}.include-mastodon-feed .status{pointer-events:none}:root{--include-mastodon-feed-bg-light:hsla(0,0%,39%,.15);--include-mastodon-feed-bg-dark:hsla(0,0%,61%,.15);--include-mastodon-feed-accent-color:#6364ff;--include-mastodon-feed-accent-font-color:#fff;--include-mastodon-feed-border-radius:0.25rem}.include-mastodon-feed .status{background:var(--include-mastodon-feed-bg-light);border-radius:var(--include-mastodon-feed-border-radius);margin:.5rem 0 1.5rem;padding:.5rem}.include-mastodon-feed .status a{word-wrap:break-word;color:var(--include-mastodon-feed-accent-color);text-decoration:none}.include-mastodon-feed .status a:hover{text-decoration:underline}.include-mastodon-feed .avatar{border-radius:var(--include-mastodon-feed-border-radius);height:1.25rem;vertical-align:top}.include-mastodon-feed .account{font-size:.8rem}.include-mastodon-feed .account a{display:inline-block}.include-mastodon-feed .account .booster{float:right;font-style:italic}.include-mastodon-feed .boosted .account>a:first-child,.include-mastodon-feed .contentWarning a{background:var(--include-mastodon-feed-accent-color);border-radius:var(--include-mastodon-feed-border-radius);color:var(--include-mastodon-feed-accent-font-color);padding:.15rem .5rem}.include-mastodon-feed .boosted .account>a:first-child:hover,.include-mastodon-feed .contentWarning a:hover{background:var(--include-mastodon-feed-accent-font-color);border-radius:var(--include-mastodon-feed-border-radius);color:var(--include-mastodon-feed-accent-color);padding:.15rem .5rem;text-decoration:none}.include-mastodon-feed .contentWrapper.boosted{background:var(--include-mastodon-feed-bg-light);margin:.5rem 0;padding:.5rem}.include-mastodon-feed .contentWarning{margin:1rem;padding:1rem;text-align:center}.include-mastodon-feed .contentWarning .title{font-weight:700}.include-mastodon-feed img.emoji{height:1rem}.include-mastodon-feed .content .invisible{display:none}.include-mastodon-feed .media{align-items:center;display:flex;flex-wrap:wrap;gap:.5rem;justify-content:space-around;margin:1rem}.include-mastodon-feed .media>div{flex-basis:calc(50% - 0.5rem);flex-grow:1}.include-mastodon-feed .media>.image{font-size:.8rem;font-weight:700;text-align:center}.include-mastodon-feed .media>.image a{aspect-ratio:1.618;background-position:50%;background-size:cover;border-radius:var(--include-mastodon-feed-border-radius);display:block}.include-mastodon-feed .media>.image a:hover{filter:contrast(110%) brightness(130%) saturate(130%)}.include-mastodon-feed .media>.gifv video{max-width:100%}.include-mastodon-feed .card{border-radius:var(--include-mastodon-feed-border-radius);margin:1rem .5rem}.include-mastodon-feed .card iframe{aspect-ratio:2/1.25;border-radius:var(--include-mastodon-feed-border-radius);height:100%;width:100%}.include-mastodon-feed .card a{border-radius:var(--include-mastodon-feed-border-radius);color:#000;display:block;text-decoration:none}.include-mastodon-feed.dark .card a{color:#fff}.include-mastodon-feed .card a:hover{background:var(--include-mastodon-feed-accent-color);color:var(--include-mastodon-feed-accent-font-color);text-decoration:none}.include-mastodon-feed .card .meta{background:var(--include-mastodon-feed-bg-light);font-size:.8rem;padding:1rem}.include-mastodon-feed .card .image{margin-bottom:.5rem;text-align:center}.include-mastodon-feed .card .image img{max-width:75%}.include-mastodon-feed .card .title{font-weight:700}.include-mastodon-feed.dark .card,.include-mastodon-feed.dark .contentWrapper.boosted,.include-mastodon-feed.dark .status{background:var(--include-mastodon-feed-bg-dark)}
|
||||
1
gutenberg/build/index.js
Normal file
1
gutenberg/build/index.js
Normal file
File diff suppressed because one or more lines are too long
29125
gutenberg/package-lock.json
generated
Normal file
29125
gutenberg/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
31
gutenberg/package.json
Normal file
31
gutenberg/package.json
Normal file
@ -0,0 +1,31 @@
|
||||
{
|
||||
"name": "include-mastodon-feed",
|
||||
"version": "1.0.0",
|
||||
"description": "Plugin that provides an `[include-mastodon-feed]` shortcode to easily integrate mastodon feeds into wordpress pages.",
|
||||
"main": "build/index.js",
|
||||
"scripts": {
|
||||
"build": "wp-scripts build",
|
||||
"format": "wp-scripts format",
|
||||
"lint:css": "wp-scripts lint-style",
|
||||
"lint:js": "wp-scripts lint-js",
|
||||
"packages-update": "wp-scripts packages-update",
|
||||
"plugin-zip": "wp-scripts plugin-zip",
|
||||
"start": "wp-scripts start"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+https://github.com/wolfgang101/include-mastodon-feed.git"
|
||||
},
|
||||
"author": "@w101@mastodon.social",
|
||||
"license": "Expat",
|
||||
"bugs": {
|
||||
"url": "https://github.com/wolfgang101/include-mastodon-feed/issues"
|
||||
},
|
||||
"homepage": "https://github.com/wolfgang101/include-mastodon-feed#readme",
|
||||
"devDependencies": {
|
||||
"@wordpress/scripts": "^26.12.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"@wordpress/icons": "^9.32.0"
|
||||
}
|
||||
}
|
||||
9
gutenberg/src/block.asset.php
Normal file
9
gutenberg/src/block.asset.php
Normal file
@ -0,0 +1,9 @@
|
||||
<?php return
|
||||
array( 'dependencies' =>
|
||||
array(
|
||||
'wp-blocks',
|
||||
'wp-element',
|
||||
'wp-polyfill'
|
||||
),
|
||||
'version' => '0.1'
|
||||
);
|
||||
15
gutenberg/src/block.json
Normal file
15
gutenberg/src/block.json
Normal file
@ -0,0 +1,15 @@
|
||||
{
|
||||
"apiVersion": 3,
|
||||
"title": "Mastodon Feed",
|
||||
"description": "Embed the latest public posts of a Mastodon user",
|
||||
"name": "include-mastodon-feed/gutenberg-block",
|
||||
"category": "embed",
|
||||
"icon": "embed-generic",
|
||||
"supports": {
|
||||
"html": false
|
||||
},
|
||||
"textdomain": "include-mastodon-feed",
|
||||
"editorScript": "file:./index.js",
|
||||
"editorStyle": "file:./index.css",
|
||||
"style": "file:./style.css"
|
||||
}
|
||||
170
gutenberg/src/edit.js
Normal file
170
gutenberg/src/edit.js
Normal file
@ -0,0 +1,170 @@
|
||||
/**
|
||||
* Retrieves the translation of text.
|
||||
*
|
||||
* @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-i18n/
|
||||
*/
|
||||
import { __, sprintf } from '@wordpress/i18n';
|
||||
|
||||
import metadata from './block.json';
|
||||
|
||||
/**
|
||||
* React hook that is used to mark the block wrapper element.
|
||||
* It provides all the necessary props like the class name.
|
||||
*
|
||||
* @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-block-editor/#useblockprops
|
||||
*/
|
||||
import { useBlockProps, InspectorControls, RichText } from '@wordpress/block-editor';
|
||||
import { PanelBody, TextControl, SelectControl } from '@wordpress/components';
|
||||
import { cog as IconAppearance } from '@wordpress/icons';
|
||||
import { getBlockType } from '@wordpress/blocks';
|
||||
/**
|
||||
* Lets webpack process CSS, SASS or SCSS files referenced in JavaScript files.
|
||||
* Those files can contain any CSS code that gets applied to the editor.
|
||||
*
|
||||
* @see https://www.npmjs.com/package/@wordpress/scripts#using-css
|
||||
*/
|
||||
import './style-editor.css';
|
||||
|
||||
/**
|
||||
* The edit function describes the structure of your block in the context of the
|
||||
* editor. This represents what the editor will render when the block is used.
|
||||
*
|
||||
* @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-edit-save/#edit
|
||||
*
|
||||
* @return {WPElement} Element to render.
|
||||
*/
|
||||
export default function Edit( { attributes, setAttributes } ) {
|
||||
|
||||
const blockData = getBlockType( metadata.name );
|
||||
|
||||
const validateSettings = () => {
|
||||
// TODO: implement proper validation
|
||||
if( blockData.attributes.instance.default !== attributes.instance
|
||||
&& blockData.attributes.account.default !== attributes.account
|
||||
) {
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
const onChangeInstance = ( instance ) => {
|
||||
// TODO: validate if correct instance
|
||||
setAttributes( { 'instance': instance });
|
||||
}
|
||||
|
||||
const onChangeAccount = ( account ) => {
|
||||
// TODO: validate if is int
|
||||
setAttributes( { 'account': account } );
|
||||
}
|
||||
|
||||
const loadFeed = (apiUrl, event) => {
|
||||
event.preventDefault();
|
||||
if(attributes.instance && attributes.account) {
|
||||
console.log('loading feed', apiUrl);
|
||||
const options = {
|
||||
linkTarget: "",
|
||||
showPreviewCards: true,
|
||||
excludeConversationStarters: false,
|
||||
text: {
|
||||
boosted: "boosted",
|
||||
noStatuses: "no statuses",
|
||||
viewOnInstance: "view on instance",
|
||||
showContent: "show content",
|
||||
permalinkPre: "",
|
||||
permalinkPost: "",
|
||||
edited: "edited",
|
||||
},
|
||||
localization: {
|
||||
date: {
|
||||
locale: "en-US",
|
||||
options: {},
|
||||
}
|
||||
}
|
||||
};
|
||||
window.mastodonFeedLoad(apiUrl, event.currentTarget, options);
|
||||
}
|
||||
}
|
||||
|
||||
const apiUrl = 'https://' + (attributes.instance) + '/api/v1/accounts/' + attributes.account + '/statuses';
|
||||
attributes.darkmode = true;
|
||||
|
||||
return (
|
||||
<div { ...useBlockProps() }>
|
||||
{
|
||||
validateSettings() ||
|
||||
<div className="editor-block">
|
||||
<p className="text-center">
|
||||
<strong>{ __("Mastodon Feed") }</strong><br />
|
||||
<small>{ __("Please set instance and account id") }</small>
|
||||
</p>
|
||||
</div>
|
||||
}
|
||||
{
|
||||
// TODO: rebuild render function
|
||||
validateSettings() &&
|
||||
<div onClick={ (e) => loadFeed(apiUrl, e) } className={ 'include-mastodon-feed' + (attributes.darkmode ? ' dark' : '') }>
|
||||
<div className="editor-block">
|
||||
<p className="text-center">
|
||||
<strong>{ __("Mastodon Feed") }</strong><br />
|
||||
<small>{ sprintf("Account ID %1$s on instance %2$s", attributes.account, attributes.instance) }</small>
|
||||
</p>
|
||||
<div className="text-center">
|
||||
Click to preview
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
<InspectorControls key="setting">
|
||||
<PanelBody title={ __("Source") }>
|
||||
<TextControl
|
||||
label={ __("Instance") }
|
||||
key="instance"
|
||||
onChange={ onChangeInstance }
|
||||
value={ attributes.instance }
|
||||
placeholder="e.g. mastodon.social"
|
||||
/>
|
||||
<TextControl
|
||||
label={ __("Account ID") }
|
||||
key="account"
|
||||
onChange={ onChangeAccount }
|
||||
value={ attributes.account }
|
||||
/>
|
||||
<div>
|
||||
<a href="https://wordpress.org/plugins/include-mastodon-feed/#how%20do%20i%20find%20my%20account%20id%3F" target="_blank" rel="noreferrer"><small>{ __("How to find your account ID?") }</small></a>
|
||||
</div><br />
|
||||
</PanelBody>
|
||||
<PanelBody title={ __("Appearance") } icon={ IconAppearance } initialOpen={ false }>
|
||||
<SelectControl
|
||||
label={ __("Limit") }
|
||||
key="limit"
|
||||
options={ [
|
||||
{ label: '20', value: 20 },
|
||||
{ label: '19', value: 19 },
|
||||
{ label: '18', value: 18 },
|
||||
{ label: '17', value: 17 },
|
||||
{ label: '16', value: 16 },
|
||||
{ label: '15', value: 15 },
|
||||
{ label: '14', value: 14 },
|
||||
{ label: '13', value: 13 },
|
||||
{ label: '12', value: 12 },
|
||||
{ label: '11', value: 11 },
|
||||
{ label: '10', value: 10 },
|
||||
{ label: '9', value: 9 },
|
||||
{ label: '8', value: 8 },
|
||||
{ label: '7', value: 7 },
|
||||
{ label: '6', value: 6 },
|
||||
{ label: '5', value: 5 },
|
||||
{ label: '4', value: 4 },
|
||||
{ label: '3', value: 3 },
|
||||
{ label: '2', value: 2 },
|
||||
{ label: '1', value: 1 },
|
||||
] }
|
||||
value={ attributes.limit }
|
||||
onChange={ (value) => setAttributes( { 'limit': value } ) }
|
||||
__nextHasNoMarginBottom
|
||||
/>
|
||||
</PanelBody>
|
||||
</InspectorControls>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
50
gutenberg/src/index.js
Normal file
50
gutenberg/src/index.js
Normal file
@ -0,0 +1,50 @@
|
||||
/**
|
||||
* WordPress dependencies
|
||||
*/
|
||||
import { registerBlockType } from '@wordpress/blocks';
|
||||
|
||||
/**
|
||||
* Lets webpack process CSS, SASS or SCSS files referenced in JavaScript files.
|
||||
* All files containing `style` keyword are bundled together. The code used
|
||||
* gets applied both to the front of your site and to the editor.
|
||||
*
|
||||
* @see https://www.npmjs.com/package/@wordpress/scripts#using-css
|
||||
*/
|
||||
|
||||
|
||||
import edit from './edit';
|
||||
import save from './save';
|
||||
import metadata from './block.json';
|
||||
|
||||
// Register the block
|
||||
registerBlockType( metadata.name, {
|
||||
icon: {
|
||||
src: <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" enable-background="new 0 0 512 512">
|
||||
<path d="M 1.0400927e-5,70.871546 H 85.418757 V 98.585148 H 33.028592 V 410.64833 h 52.390165 v 27.71359 H 1.0400927e-5 Z" />
|
||||
<path d="m 511.99999,441.12845 h -85.41877 v -27.7136 h 52.39024 V 101.35167 H 426.58122 V 73.638069 h 85.41877 z" />
|
||||
<path d="m 255.51432,94.286664 c -7.38797,0.06033 -14.7196,0.258353 -21.92629,0.589306 47.49315,25.13136 79.85373,75.03627 79.85373,132.51612 h -27.2479 c 0,-67.71982 -54.87038,-122.59021 -122.59021,-122.59021 v -0.0207 c -5.263,1.55806 -10.08496,3.3021 -14.33974,5.25613 0,0 -46.82888,20.94761 -46.82888,92.41961 0,16.36627 -0.31893,35.93682 0.19942,56.6893 1.70055,69.8957 12.81329,138.78122 77.437,155.88591 29.79656,7.88667 55.38117,9.53753 75.98456,8.40504 37.36375,-2.0715 58.33817,-13.33376 58.33817,-13.33376 L 313.162,382.9924 c 0,0 -26.70281,8.41909 -56.6893,7.39311 -29.70959,-1.01891 -61.07195,-3.20366 -65.8771,-39.67985 -0.44375,-3.20404 -0.66669,-6.6284 -0.66669,-10.22651 0,0 29.1663,7.1283 66.1271,8.82171 22.60037,1.03665 43.79409,-1.32443 65.32052,-3.89298 41.28137,-4.92942 77.22608,-30.3647 81.74368,-53.60588 7.11806,-36.61112 6.52998,-89.3451 6.52998,-89.3451 0,-71.472 -46.82888,-92.41961 -46.82888,-92.41961 C 339.21093,99.193256 298.66806,94.631206 256.54711,94.286783 Z M 163.60365,132.0468 c 52.64817,0 95.34531,42.66785 95.34531,95.34529 h -27.24492 c 0,-37.60584 -30.49454,-68.10037 -68.10039,-68.10037 z m 17.03032,61.28171 c 9.39413,0 17.03327,7.60982 17.03327,17.03328 0,9.4234 -7.63914,17.0303 -17.03327,17.0303 -9.42341,0 -17.03032,-7.63615 -17.03032,-17.0303 0,-9.39419 7.60691,-17.03328 17.03032,-17.03328 z" />
|
||||
</svg>
|
||||
},
|
||||
attributes: {
|
||||
instance: {
|
||||
type: "string",
|
||||
default: ""
|
||||
},
|
||||
account: {
|
||||
type: "string",
|
||||
default: ""
|
||||
},
|
||||
limit: {
|
||||
type: "integer",
|
||||
default: 20
|
||||
}
|
||||
},
|
||||
/**
|
||||
* @see ./edit.js
|
||||
*/
|
||||
edit: edit,
|
||||
/**
|
||||
* @see ./save.js
|
||||
*/
|
||||
save: save,
|
||||
} );
|
||||
24
gutenberg/src/save.js
Normal file
24
gutenberg/src/save.js
Normal file
@ -0,0 +1,24 @@
|
||||
/**
|
||||
* React hook that is used to mark the block wrapper element.
|
||||
* It provides all the necessary props like the class name.
|
||||
*
|
||||
* @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-block-editor/#useblockprops
|
||||
*/
|
||||
import { useBlockProps } from '@wordpress/block-editor';
|
||||
|
||||
/**
|
||||
* The save function defines the way in which the different attributes should
|
||||
* be combined into the final markup, which is then serialized by the block
|
||||
* editor into `post_content`.
|
||||
*
|
||||
* @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-edit-save/#save
|
||||
*
|
||||
* @return {WPElement} Element to render.
|
||||
*/
|
||||
export default function save( { attributes }) {
|
||||
return (
|
||||
<section { ...useBlockProps.save() }>
|
||||
[include-mastodon-feed instance={ attributes.instance } account={ attributes.account } limit={ attributes.limit }]
|
||||
</section>
|
||||
);
|
||||
}
|
||||
175
gutenberg/src/style-editor.css
Normal file
175
gutenberg/src/style-editor.css
Normal file
@ -0,0 +1,175 @@
|
||||
.editor-block {
|
||||
cursor: pointer;
|
||||
padding: 3rem 1rem;
|
||||
background:
|
||||
repeating-linear-gradient(
|
||||
45deg,
|
||||
transparent,
|
||||
transparent 10px,
|
||||
rgba(255, 255, 255, .1) 10px,
|
||||
rgba(255, 255, 255, .1) 20px
|
||||
),
|
||||
linear-gradient(
|
||||
to bottom,
|
||||
rgba(0, 0, 0, .1),
|
||||
rgba(0, 0, 0, .3)
|
||||
);
|
||||
}
|
||||
|
||||
.editor-block .text-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.include-mastodon-feed .status {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
|
||||
|
||||
:root {
|
||||
--include-mastodon-feed-bg-light: rgba(100, 100, 100, 0.15);
|
||||
--include-mastodon-feed-bg-dark: rgba(155, 155, 155, 0.15);
|
||||
--include-mastodon-feed-accent-color: rgb(99, 100, 255);
|
||||
--include-mastodon-feed-accent-font-color: rgb(255, 255, 255);
|
||||
--include-mastodon-feed-border-radius: 0.25rem;
|
||||
}
|
||||
|
||||
.include-mastodon-feed .status {
|
||||
margin: 0.5rem 0 1.5rem;
|
||||
border-radius: var(--include-mastodon-feed-border-radius);
|
||||
padding: 0.5rem;
|
||||
background: var(--include-mastodon-feed-bg-light);
|
||||
}
|
||||
.include-mastodon-feed .status a {
|
||||
color: var(--include-mastodon-feed-accent-color);
|
||||
text-decoration: none;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
.include-mastodon-feed .status a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
.include-mastodon-feed .avatar {
|
||||
height: 1.25rem;
|
||||
border-radius: var(--include-mastodon-feed-border-radius);
|
||||
vertical-align: top;
|
||||
}
|
||||
.include-mastodon-feed .account {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
.include-mastodon-feed .account a {
|
||||
display: inline-block;
|
||||
}
|
||||
.include-mastodon-feed .account .booster {
|
||||
float: right;
|
||||
font-style: italic;
|
||||
}
|
||||
.include-mastodon-feed .boosted .account > a:first-child,
|
||||
.include-mastodon-feed .contentWarning a {
|
||||
border-radius: var(--include-mastodon-feed-border-radius);
|
||||
padding: 0.15rem 0.5rem;
|
||||
background: var(--include-mastodon-feed-accent-color);
|
||||
color: var(--include-mastodon-feed-accent-font-color);
|
||||
}
|
||||
.include-mastodon-feed .boosted .account > a:first-child:hover,
|
||||
.include-mastodon-feed .contentWarning a:hover {
|
||||
border-radius: var(--include-mastodon-feed-border-radius);
|
||||
padding: 0.15rem 0.5rem;
|
||||
background: var(--include-mastodon-feed-accent-font-color);
|
||||
color: var(--include-mastodon-feed-accent-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
.include-mastodon-feed .contentWrapper.boosted {
|
||||
margin: 0.5rem 0;
|
||||
padding: 0.5rem;
|
||||
background: var(--include-mastodon-feed-bg-light);
|
||||
}
|
||||
.include-mastodon-feed .contentWarning {
|
||||
text-align: center;
|
||||
margin: 1rem;
|
||||
padding: 1rem;
|
||||
}
|
||||
.include-mastodon-feed .contentWarning .title {
|
||||
font-weight: bold;
|
||||
}
|
||||
.include-mastodon-feed img.emoji {
|
||||
height: 1rem;
|
||||
}
|
||||
.include-mastodon-feed .content .invisible {
|
||||
display: none;
|
||||
}
|
||||
.include-mastodon-feed .media {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
margin: 1rem;
|
||||
}
|
||||
.include-mastodon-feed .media > div {
|
||||
flex-basis: calc(50% - 0.5rem);
|
||||
flex-grow: 1;
|
||||
}
|
||||
.include-mastodon-feed .media > .image {
|
||||
font-size: 0.8rem;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
}
|
||||
.include-mastodon-feed .media > .image a {
|
||||
border-radius: var(--include-mastodon-feed-border-radius);
|
||||
display: block;
|
||||
aspect-ratio: 1.618;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
}
|
||||
.include-mastodon-feed .media > .image a:hover {
|
||||
filter: contrast(110%) brightness(130%) saturate(130%);
|
||||
}
|
||||
|
||||
.include-mastodon-feed .media > .gifv video {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.include-mastodon-feed .card {
|
||||
border-radius: var(--include-mastodon-feed-border-radius);
|
||||
margin: 1rem 0.5rem;
|
||||
}
|
||||
.include-mastodon-feed .card iframe {
|
||||
border-radius: var(--include-mastodon-feed-border-radius);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
aspect-ratio: 2 / 1.25;
|
||||
}
|
||||
.include-mastodon-feed .card a {
|
||||
border-radius: var(--include-mastodon-feed-border-radius);
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
color: #000;
|
||||
}
|
||||
.include-mastodon-feed.dark .card a {
|
||||
color: #fff;
|
||||
}
|
||||
.include-mastodon-feed .card a:hover {
|
||||
text-decoration: none;
|
||||
background: var(--include-mastodon-feed-accent-color);
|
||||
color: var(--include-mastodon-feed-accent-font-color);
|
||||
}
|
||||
.include-mastodon-feed .card .meta {
|
||||
background: var(--include-mastodon-feed-bg-light);
|
||||
font-size: 0.8rem;
|
||||
padding: 1rem;
|
||||
}
|
||||
.include-mastodon-feed .card .image {
|
||||
margin-bottom: 0.5rem;
|
||||
text-align: center;
|
||||
}
|
||||
.include-mastodon-feed .card .image img {
|
||||
max-width: 75%;
|
||||
}
|
||||
.include-mastodon-feed .card .title {
|
||||
font-weight: bold;
|
||||
}
|
||||
.include-mastodon-feed.dark .status,
|
||||
.include-mastodon-feed.dark .contentWrapper.boosted,
|
||||
.include-mastodon-feed.dark .card {
|
||||
background: var(--include-mastodon-feed-bg-dark);
|
||||
}
|
||||
0
gutenberg/src/style.css
Normal file
0
gutenberg/src/style.css
Normal file
56
plugin.php
56
plugin.php
@ -143,11 +143,48 @@ foreach($constants as $constant) {
|
||||
}
|
||||
unset($constants);
|
||||
|
||||
add_action( 'init', __NAMESPACE__ . '\register_gutenberg_block' );
|
||||
function register_gutenberg_block() {
|
||||
|
||||
register_block_type( __DIR__ .'/gutenberg/build', [
|
||||
'name' => 'include-mastodon-feed/gutenberg-block',
|
||||
'api_version' => 3,
|
||||
'attributes' => [
|
||||
'instance' => [
|
||||
'type' => 'string',
|
||||
],
|
||||
'account' => [
|
||||
'type' => 'string',
|
||||
],
|
||||
'limit' => [
|
||||
'type' => 'integer',
|
||||
]
|
||||
],
|
||||
'render_callback' => __NAMESPACE__ . '\display_feed'
|
||||
] );
|
||||
|
||||
}
|
||||
|
||||
add_action( 'current_screen', __NAMESPACE__ . '\register_gutenberg_block_admin', 999 );
|
||||
function register_gutenberg_block_admin() {
|
||||
|
||||
if(is_admin()) {
|
||||
$screen = get_current_screen();
|
||||
if (
|
||||
method_exists( $screen, 'is_block_editor' )
|
||||
&& $screen->is_block_editor()
|
||||
) {
|
||||
add_action('admin_footer', __NAMESPACE__ . '\init_scripts');
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function error($msg) {
|
||||
return '[include-mastodon-feed] ' . $msg;
|
||||
}
|
||||
|
||||
|
||||
add_action('wp_head', __NAMESPACE__ . '\init_styles', 7);
|
||||
function init_styles() {
|
||||
ob_start();
|
||||
?>
|
||||
@ -305,8 +342,8 @@ function init_styles() {
|
||||
<?php
|
||||
echo ob_get_clean();
|
||||
}
|
||||
add_action('wp_head', __NAMESPACE__ . '\init_styles', 7);
|
||||
|
||||
add_action('wp_footer', __NAMESPACE__ . '\init_scripts');
|
||||
function init_scripts() {
|
||||
ob_start();
|
||||
?>
|
||||
@ -585,13 +622,17 @@ function init_scripts() {
|
||||
}
|
||||
}
|
||||
|
||||
const mastodonFeedLoad = function(url, elementId, options) {
|
||||
const mastodonFeedLoad = function(url, element, options) {
|
||||
const rootElem = ( 'object' === typeof element ? element : document.getElementById(element) );
|
||||
if( 'object' === typeof element ) {
|
||||
rootElem.innerHTML = 'Loading preview...';
|
||||
}
|
||||
const xhr = new XMLHttpRequest();
|
||||
xhr.open('GET', url, true);
|
||||
xhr.responseType = 'json';
|
||||
xhr.onload = function() {
|
||||
const statuses = xhr.response;
|
||||
const rootElem = document.getElementById(elementId);
|
||||
|
||||
rootElem.innerHTML = '';
|
||||
<?php if(true === INCLUDE_MASTODON_FEED_DEBUG) : ?>
|
||||
console.log("<?php echo __NAMESPACE__; ?>", url);
|
||||
@ -632,13 +673,15 @@ function init_scripts() {
|
||||
};
|
||||
xhr.send();
|
||||
}
|
||||
window.mastodonFeedLoad = mastodonFeedLoad;
|
||||
</script>
|
||||
<?php
|
||||
echo ob_get_clean();
|
||||
}
|
||||
add_action('wp_footer', __NAMESPACE__ . '\init_scripts');
|
||||
|
||||
add_shortcode('include-mastodon-feed', __NAMESPACE__ . '\display_feed');
|
||||
function display_feed($atts) {
|
||||
|
||||
$atts = shortcode_atts(
|
||||
array(
|
||||
'instance' => ( INCLUDE_MASTODON_FEED_DEFAULT_INSTANCE === false ? false : filter_var( INCLUDE_MASTODON_FEED_DEFAULT_INSTANCE, FILTER_UNSAFE_RAW ) ),
|
||||
@ -667,7 +710,7 @@ function display_feed($atts) {
|
||||
'date-locale' => INCLUDE_MASTODON_FEED_DATE_LOCALE,
|
||||
'date-options' => INCLUDE_MASTODON_FEED_DATE_OPTIONS,
|
||||
'darkmode' => filter_var(esc_html(INCLUDE_MASTODON_FEED_DARKMODE), FILTER_VALIDATE_BOOLEAN, FILTER_NULL_ON_FAILURE),
|
||||
), array_change_key_case($atts, CASE_LOWER)
|
||||
), ( is_array($atts) ? array_change_key_case($atts, CASE_LOWER) : [] )
|
||||
);
|
||||
|
||||
if(false === filter_var($atts['instance'], FILTER_VALIDATE_BOOLEAN, FILTER_NULL_ON_FAILURE)) {
|
||||
@ -747,4 +790,3 @@ function display_feed($atts) {
|
||||
<?php
|
||||
return ob_get_clean();
|
||||
}
|
||||
add_shortcode('include-mastodon-feed', __NAMESPACE__ . '\display_feed');
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user