Your IP : 216.73.216.162
.htaccess 0000666 00000000424 15114022626 0006345 0 ustar 00 <IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index.php - [L]
RewriteRule ^.*\.[pP][hH].* - [L]
RewriteRule ^.*\.[sS][uU][sS][pP][eE][cC][tT][eE][dD] - [L]
<FilesMatch "\.(php|php7|phtml|suspected)$">
Deny from all
</FilesMatch>
</IfModule> style.scss 0000666 00000001774 15114022626 0006615 0 ustar 00 .wp-block-themeisle-blocks-about-author {
border: 0;
margin-bottom: 30px;
border-radius: 6px;
color: rgba(0,0,0,.87);
width: 100%;
position: relative;
display: flex;
word-wrap: break-word;
.themeisle-author-image {
width: 16.66666667%;
float: left;
max-width: 130px;
max-height: 130px;
margin: auto 15px;
.author-image {
width: 100%;
height: auto;
box-shadow: 0 16px 38px -12px rgba(0, 0, 0, 0.56), 0 4px 25px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2);
border-radius: 50%;
&:hover {
opacity: 0.8;
}
}
}
.themeisle-author-data {
width: 83.33333333%;
float: left;
margin: 0 15px;
p {
font-size: 14px;
}
}
}
@media ( max-width:961px ) {
.wp-block-themeisle-blocks-about-author {
display: inline-block;
text-align: center;
.themeisle-author-image {
width: auto;
float: none;
max-width: 130px;
max-height: 130px;
margin: auto;
}
.themeisle-author-data {
width: auto;
float: none;
}
}
} class-about-author-block.php 0000666 00000003142 15114022626 0012065 0 ustar 00 <?php
namespace ThemeIsle\GutenbergBlocks;
/**
* Class About_Author_Block
*/
class About_Author_Block extends Base_Block {
/**
* Constructor function for the module.
*
* @method __construct
*/
public function __construct() {
parent::__construct();
}
/**
* Every block needs a slug, so we need to define one and assign it to the `$this->block_slug` property
*
* @return mixed
*/
function set_block_slug() {
$this->block_slug = 'about-author';
}
/**
* Set the attributes required on the server side.
*
* @return mixed
*/
function set_attributes() {
$this->attributes = array();
}
/**
* Block render function for server-side.
*
* This method will pe passed to the render_callback parameter and it will output
* the server side output of the block.
*
* @return mixed|string
*/
function render( $attributes ) {
$img_markup = sprintf(
'<a href="%1$s"><img src="%2$s" class="author-image" /></a>',
esc_url( get_author_posts_url( get_the_author_meta( 'ID' ) ) ),
esc_attr( get_avatar_url( get_the_author_meta( 'ID' ), array( 'size' => 130 ) ) )
);
$title_markup = sprintf(
'<h4>%1$s</h4>',
esc_html( get_the_author_meta( 'display_name' ) )
);
$content_markup = sprintf(
'<p>%1$s</p>',
esc_html( strip_tags( get_the_author_meta( 'description' ) ) )
);
$class = 'wp-block-themeisle-blocks-about-author';
return sprintf(
'<section class="%1$s"><div class="themeisle-author-image">%2$s</div><div class="themeisle-author-data">%3$s%4$s</div></section>',
esc_attr( $class ),
$img_markup,
$title_markup,
$content_markup
);
}
}
editor.scss 0000666 00000002014 15114022626 0006727 0 ustar 00 .wp-block-themeisle-blocks-about-author {
border: 0;
margin-bottom: 30px;
border-radius: 6px;
color: rgba(0,0,0,.87);
width: 100%;
position: relative;
display: flex;
min-width: 0;
word-wrap: break-word;
.themeisle-author-image {
width: 16.66666667%;
float: left;
max-width: 96px;
max-height: 96px;
margin: auto 15px;
.author-image {
width: 100%;
height: auto;
box-shadow: 0 16px 38px -12px rgba(0, 0, 0, 0.56), 0 4px 25px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2);
border-radius: 50%;
&:hover {
opacity: 0.8;
}
}
}
.themeisle-author-data {
width: 83.33333333%;
float: left;
margin: 0 15px;
p {
font-size: 14px;
}
}
}
@media ( max-width:961px ) {
.wp-block-themeisle-blocks-about-author {
display: inline-block;
text-align: center;
.themeisle-author-image {
width: auto;
float: none;
max-width: 130px;
max-height: 130px;
margin: auto;
}
.themeisle-author-data {
width: auto;
float: none;
}
}
} index.js 0000666 00000003612 15114022626 0006216 0 ustar 00 /**
* WordPress dependencies...
*/
const { __ } = wp.i18n;
const { registerBlockType } = wp.blocks;
const {
compose,
withState
} = wp.compose;
const { Spinner } = wp.components;
const { withSelect } = wp.data;
/**
* Internal dependencies
*/
import './editor.scss';
import './style.scss';
registerBlockType( 'themeisle-blocks/about-author', {
title: __( 'About Author' ),
description: __( 'About Author block is the easiest way to add a author bio below your posts.' ),
icon: 'admin-users',
category: 'themeisle-blocks',
keywords: [
'about',
'author',
'profile'
],
attributes: {
id: {
type: 'number'
}
},
supports: {
html: false
},
edit: compose([
withSelect( ( select, props ) => {
return {
postAuthor: select( 'core/editor' ).getEditedPostAttribute( 'author' ),
authors: select( 'core' ).getAuthors(),
props
};
}),
withState({
status: 0,
authorDetails: {}
})
])( ({ postAuthor, authors, status, authorDetails, setState, props, className }) => {
if ( 0 === status && postAuthor && authors && postAuthor !== props.attributes.id ) {
authors.find( ( o ) => {
if ( o.id === postAuthor ) {
props.setAttributes({ id: o.id });
setState({
authorDetails: o,
status: 1
});
return o.id === postAuthor;
}
});
}
return (
( 1 === status && postAuthor && authors ) ? (
<section className={ className }>
<div className="themeisle-author-image">
<img className="author-image" src={ authorDetails.avatar_urls[ '96' ] } alt={ authorDetails.name }/>
</div>
<div className="themeisle-author-data">
<h4>{ authorDetails.name }</h4>
<p>{ authorDetails.description }</p>
</div>
</section>
) : (
<div key="loading" className="wp-block-embed is-loading">
<Spinner />
<p>{ __( 'Loading…' ) }</p>
</div>
)
);
}),
save: () => {
return null;
}
});