Highlight and Share

Highlight and Share is a free WordPress plugin that displays social networks when a user selects text, clicks on inline highlighted text, or uses the robust Click to Share block.

Quick Links

For an in-depth overview of Highlight and Share, please check out the documentation.

Developers

Clone the development branch locally.
Run npm install to install the development scripts.
Run npm run start to start the build scripts.
Run npm run build to do a production build.
Run grunt to create a plugin ZIP file.

Perform a Pull Request against the development branch.

Location of Block Scripts

The location of the Click to Share block is: src/blocks/click-to-share/

click-to-share  
├─ block.js     
├─ block.json   
└─ edit.js

For the PHP initialization, see php/Blocks.php.

Location of Admin Scripts

Most of the admin script location is in src/react.

Each admin tab is separated in separate scripts.

Settings tab: src/react/Settings
Appearance tab: src/react/Appearance
Block Editor tab: src/react/BlockEditor
Emails tab: src/react/Emails

Webpack:

entry: {
	'has-cts-editor': './src/blocks/editor.scss',
	'has-cts-style': './src/blocks/style.scss',
	'has-admin-style': './src/admin.scss',
	'has-admin': [ './src/admin.js' ],
	'has-admin-settings': [ './src/react/Settings/index.js' ],
	'has-admin-appearance': [ './src/react/Appearance/index.js' ],
	'has-admin-block-editor': [ './src/react/BlockEditor/index.js' ],
	'has-admin-emails': [ './src/react/Emails/index.js' ],
	'has-email-modal': [ './src/react/EmailModal/index.js', './src/react/EmailModal/style.scss' ],
	'has-themes': [ './src/themes.scss' ],
	'has-gfont-josefin-sans': { import: './src/scss/fonts/josefin-sans.scss' },
	'has-gfont-karla': { import: './src/scss/fonts/karla.scss' },
	'has-gfont-lato': { import: './src/scss/fonts/lato.scss' },
	'has-gfont-montserrat': { import: './src/scss/fonts/montserrat.scss' },
	'has-gfont-open-sans': { import: './src/scss/fonts/open-sans.scss' },
	'has-gfont-playfair-display': { import: './src/scss/fonts/playfair-display.scss' },
	'has-gfont-raleway': { import: './src/scss/fonts/raleway.scss' },
	'has-gfont-roboto': { import: './src/scss/fonts/roboto.scss' },
	'has-gfont-source-sans-pro': { import: './src/scss/fonts/source-sans-pro.scss' },
	'highlight-and-share': [ './src/frontendjs/highlight-and-share.js' ],
},

The admin appearance tab uses context, which is in src/react/Appearance/index.js

The main components are in: src/react/Components:

Components                    
├─ BackgroundSelector         
│  └─ index.js                
├─ ColorPicker                
│  └─ index.js                
├─ Dimensions                 
│  ├─ editor.scss             
│  └─ index.js                
├─ DimensionsBlock            
│  ├─ editor.scss             
│  └─ index.js                
├─ ErrorBoundary              
│  └─ index.js                
├─ GradientGenerator          
│  └─ index.js                
├─ GradientPicker             
│  └─ index.js                
├─ GradientSync               
│  └─ index.js                
├─ Icons                      
│  ├─ AtIcon.js               
│  ├─ Circle.js               
│  ├─ CircularExplanation.js  
│  ├─ CircularInfo.js         
│  ├─ CircularQuestion.js     
│  ├─ CodeBranchIcon.js       
│  ├─ ColorPalette.js         
│  ├─ CopyIcon.js             
│  ├─ Ellipsis.js             
│  ├─ FacebookIcon.js         
│  ├─ FlaskIcon.js            
│  ├─ Gear.js                 
│  ├─ Home.js                 
│  ├─ KeyIcon.js              
│  ├─ LinkIcon.js             
│  ├─ MenuIcon.js             
│  ├─ NewWindow.js            
│  ├─ Preview.js              
│  ├─ QuoteIcon.js            
│  ├─ QuotesIcon.js           
│  ├─ Spinner.js              
│  ├─ VialIcon.js             
│  ├─ edit.js                 
│  ├─ paintbrush.js           
│  ├─ settings.js             
│  └─ twitter.js              
├─ Loader                     
│  └─ index.js                
├─ Notice                     
│  └─ index.js                
├─ PreviewSocialIconList      
│  └─ index.js                
├─ PreviewSocialIconListItem  
│  └─ index.js                
├─ SocialIconList             
│  └─ index.js                
├─ SocialIconListItem         
│  └─ index.js                
├─ SocialIcons                
│  └─ index.js                
├─ SocialNetworkColorsTabs    
│  └─ index.js                
├─ TabColorPickers            
│  └─ index.js                
├─ ThemeCustomizer            
│  └─ index.js                
├─ Typography                 
└─ unit-picker

Location of CSS

Admin CSS is at: src/admin.scss

Frontend CSS is at: src/themes.scss

Font CSS is at: src/scss/fonts

Frontend JS

The frontend JS can be found at: src/frontendjs/highlight-and-share.js

Build Directories

The block JS and CSS can be found in the build folder.

The admin JS and CSS can be found in the dist folder.

harrinsonmb / highlight-and-share Goto Github PK